iconfont微信小程序组件

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"/>

效果图

效果图

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容