Iconfont-wechat NPM

iconfont-wechat 使用方法

详细使用方法请查看 iconfont-wechat

安装

`小程序项目根目录下运行`

npm i iconfont-wechat@latest --save-dev

初始化配置

npx iconfont-init

参数

参数	说明	类型	默认值	必填
Thanks Use	忽视	String	Yes	false
SYMBOL_URL	图标地址	String	null	true
OUTPUT_PATH	输出路径	String	/iconfont	false
ICON_NAME_PREFIX	图标前缀	String	icon-	false

配置文件(手动配置)

示例

//filename iconfont.config.json
{
  "SYMBOL_URL": null,         //图标地址--iconfont项目symbol图标地址
  "OUTPUT_PATH": "/components/iconfont",   //输出路径--小程序根目录/iconfont
  "ICON_NAME_PREFIX": "icon-"   //图标前缀--icon-xxxxx
}

运行

npx iconfont-start

Dom元素使用方法

属性

参数	说明	类型	默认值
name	图标名称	String	null
iconfont-class	自定义类名修改组件样式	String	null
tapcolor	获取焦点后颜色	ColorString	null
color	图标颜色	ColorString	original

`name`

ionfont图标名称

类型: String

默认值: null

示例

前缀默认值--不变

//filename iconfont.config.json
{
  "SYMBOL_URL": "null",         //图标地址--iconfont项目symbol图标地址
  "OUTPUT_PATH": "/iconfont",   //输出路径--小程序根目录/iconfont
  "ICON_NAME_PREFIX": "icon-"   //图标前缀--icon-xxxxx
}

<iconfont-wechat name="ios-home"/>

前缀自定义--改变

//filename iconfont.config.json
{
  "SYMBOL_URL": "null",
  "OUTPUT_PATH": "/iconfont",
  "ICON_NAME_PREFIX": "",     //自定义为空
}

<iconfont-wechat name="home"/>

`iconfont-class`

说明: 自定义图标类名

类型: ClassString

默认值: null

注意：由于组件内部样式优先级高于外部样式，所以需要外部样式加上!important覆盖组件内部默认样式

内部已设置默认样式:width, height

示例代码：

 <iconfont-wechat iconfont-class="iconfont"/>

.iconfont{
  color: #999;
  height: 100px !important; /** 组件内部样式覆盖 **/
  width: 100px !important;  /** 组件内部样式覆盖 **/
}

`tapcolor`

类型: ColorString

支持格式: RGBA,RGB,HEX

示例:
rgba(1,1,1,.5) rgba(1,1,1,0.1)---透明值0-1
rgb(1,1,1)
#111

示例代码：

<iconfont-wechat tapcolor="#999"icon="iconfont-wechat"/>

`color`

类型: ColorString

支持格式: RGBA,RGB,HEX

示例:
rgba(1,1,1,.5) rgba(1,1,1,0.1)---透明值0-1
rgb(1,1,1)
#111

<iconfont-wechat color="#999"icon="iconfont-wechat"/>

示例代码：

`app.json` 全局使用

`index.json` 局部使用

//file app.json or index.json
  "usingComponents": {
    "iconfont-wechat": "/components/iconfont/iconfont"  
    // iconfont-wechat                    组件名称
    // "/components/iconfont/iconfont"    组件路径
  }