1.1.4 • Published 6 months ago
taro-iconfont-svg v1.1.4
灵感来源:taro-iconfont-cli
通过 background:url(data:svg+xml....) 的形式 在小程序上把svg显示出来,目前在公司内部开发中得到实际应用。
试验田请访问:taro-test-iconfont-svg
支持平台
- 微信小程序
支持框架
- React
用法
npm 安装
npm install taro-iconfont-svg -D
也可使用 pnpm 安装
pnpm install taro-iconfont-svg -D
初始化 iconfont.json 文件
执行 npx iconfont-init 初始化配置
此时项目根目录会生成一个iconfont.json
的文件,内容如下:
{
"symbol_url": "请参考README.md,复制 http://iconfont.cn 官网提供的JS链接",
"parse_local_svg": false,
"local_svg_dir": "./src/assert/svg",
"save_dir": "./src/components/iconfont",
"default_icon_size": 18,
}
填上阿里矢量图标的svg地址(symbol_url)
symbol_url
请直接复制iconfont官网提供的项目链接。请务必看清是.js
后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库,那么可以填入这个链接去测试:http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js
save_dir
根据iconfont图标生成的组件存放的位置。每次生成组件之前,该文件夹都会被清空。
default_icon_size
我们将为每个生成的图标组件加入默认的字体大小,当然,你也可以通过传入props的方式改变这个size值。
parse_local_svg
是否开启本地svg文件解析
local_svg_dir
本地svg文件存放文件夹的地址
生成自定义组件
执行 npx iconfont-taro 生成自定义组件iconfont
最后在项目中引入新生成的IconFont
组件即可
IconFont 组件
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
name | string | 阿里矢量图标Symbol名称,字段唯一表示,必须唯一 | - |
size | number | 图标字体大小 | - |
color | string | string[] | 图标颜色,如果图标有多个色块,请十六进制颜色字符串组成的数组表示 | - |
customStyle | CSSProperty | 自定义行内样式style | - |
customClassName | string | 自定义样式class类名 | - |
1.1.4
6 months ago
1.1.3
6 months ago
1.1.2
6 months ago
1.1.1
1 year ago
1.0.19
1 year ago
1.1.0
1 year ago
1.0.18
1 year ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.11
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago