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"    组件路径
  }

index.wxml

<iconfont-wechat icon="Search"/>

效果图