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
暂无评论内容