vi-icon
组件效果预览
使用
npm i vi-icon --save
使用微信开发者工具构建NPM并使用NPM模块
"usingComponents":
示例
使用内置图标
iconName接收内置的图标名称
icon-style 用于定义图标的样式
如果要定义图标的字体大小,请给类名加上 before伪元素
内置图标的字体大小为14px
扩展图标库
使用图标库扩展功能请先阅读微信小程序的字体API
fontSource 接收图标库的资源文件。文件类型为 .ttf或者 .woff
content 中的内容为字体的 unicode 编码
修改扩展图标的fontFamily
fontFamily 用于修改字体文件的css引用名称
全局配置扩展图标的文件资源
如果是使用全局配置,请在app.js的options对象上挂载
_$ViIcon
配置信息
// app.js
如果是全局配置过了字体文件资源,那么只需要定义
icon
的样式即可
Config Props
接口 | 数据类型 | 说明 | 选项 | 默认值 | 版本号 |
---|---|---|---|---|---|
iconName | String | 组件内容的icon名称 | 选填 | '' | 0.0.1 |
fontFamily | String | 扩展的字体资源名称设置 | 选填 | custom-font | 0.0.1 |
fontSource | String | 字体的资源路径需要为 | 选填 | '' | 0.0.1 |
Extend Class
prop | 说明 |
---|---|
icon-style | 用于设置字体图标的样式 |
Event name
Event name | 说明 |
---|---|
clickIcon | 组件点击事件 |
Global Config Props
接口 | 数据类型 | 说明 | 选项 | 默认值 | 版本号 |
---|---|---|---|---|---|
_$ViIcon | Object | 字体资源文件的相关配置 | 选填 | {} | 0.0.3 |
Icon Name 内置的图标名
icon name | icon name | icon name |
---|---|---|
shooping | location | |
cloud-download | cloud-upload | branch |
data | telephone | share |
price | full-screen | full-screen-cancel |
delete | qrCode | setting |
setting-cente | control | return |
link | link-cancel | shopping-case |
label | bluetooth | |
add | reduce | right |
error | refresh | history |
bottom-left-arrow | bottom-right-arrow | top-right-arrow |
top-left-arrow | right-arrow | left-arrow |
bottom-arrow | top-arrow | bottom-arrow-doubl |
top-arrow-double | right-arrow-double | right-arrow-double |
left-arrow-double | - | - |
版本记录
- v0.0.1 初始版本
- v0.0.3 新增全局配置外部字体文件功能