iconfont-to-tsx
v1.0.5
Published
把 iconfont 图标批量转换成多 tsx react 组件。不依赖字体,支持多色彩。
Downloads
22
Readme
iconfont2Tsx
把 iconfont 图标批量转换成多 tsx react 组件。不依赖字体,支持多色彩。
特性
1、纯组件 2、不依赖字体文件 3、支持 px 和 rpx 两种格式 4、原样渲染多色彩图标 5、图标颜色可定制
Step 1
安装插件
# Yarn
yarn add iconfont-to-tsx --dev
# Npm
npm install iconfont-to-tsx --save-dev
Step 2
生成配置文件
npx iconfont2Tsx-init
# 可传入配置文件输出路径
# npx iconfont2Tsx-init --output iconfont.json
此时项目根目录会生成一个iconfont.json
的文件,内容如下:
{
"symbol_url": "请参考README.md,复制 http://iconfont.cn 官网提供的JS链接",
"save_dir": "./src/Iconfont",
"icon_all_name": "Iconfont",
"is_signle": true,
"use_rpx": false,
"trim_icon_prefix": "",
"default_icon_size": 16,
"design_width": 750
}
配置参数说明:
symbol_url
请直接复制iconfont官网提供的项目链接。请务必看清是.js
后缀而不是.css
后缀,可使用 //at.alicdn.com/t/c/font_4492100_gbyyt9o35yg.js
试一下
save_dir
根据 iconfont 图标生成的组件存放的位置。每次生成组件之前,该文件夹都会被清空。
icon_all_name
指定全量图标的组件名
is_signle
控制是否生成单个图标组件
use_rpx
使用微信提供的尺寸单位 rpx还是普通的像素单位px
。默认值为 false,即使用px
。
trim_icon_prefix
如果你的图标有通用的前缀,而你在使用的时候又不想重复去写,那么可以通过配置这个选项把前缀统一去掉。
default_icon_size
我们将为每个生成的图标组件加入默认的字体大小,当然,你也可以通过传入 props 的方式改变这个 size 值。
design_width
默认为 750px,你可以通过配置这个选项来改变这个值。
Step 3
生成组件
# 可传入配置文件路径
# npx iconfont2Tsx-generate --config iconfont.json
npx iconfont2Tsx-generate
生成后查看您设置的保存目录中是否含有所有的图标
使用
在 page 中使用图标。
// 原色彩
<Iconfont name="alipay" />
// 单色:红色
<Iconfont name="alipay" color="red" />
// 多色:红色+橘色
<Iconfont name="alipay" color={["red", "orange"]} size="300" />
// 不同格式的颜色写法
// 暂不支持 rgba 写法,因为需要encodeURIComponent转码
<Iconfont name="alipay" color={["#333", "red"]} />
更新图标
当您在 iconfont.cn 中的图标有变更时,只需更改配置symbol_url
,然后再次执行Step 3
即可生成最新的图标组件。欢迎使用,并给我一些反馈和建议.