在项目中使用图标时,使用react-iconfont-cli
很方便的将iconfont选中的图标打包到项目下
使用react-iconfont-cli
生成的项目结构
iconfont
fontsA
...
index.js
fontsB
...
index.js
fontsA/index.js
中将该目录下的所有图标都导出了,但是iconfont
目录没有统一导出所有图标的文件, 该工具就是读取iconfont
目录下所有图标,生成统一导出文件,并添加到iconfont
目录下,方便引入使用
使用iconfont-export
之后生成的结构
iconfont
fontsA
...
index.js
fontsB
...
index.js
index.js
# Yarn
yarn add iconfont-export
# Npm
npm install iconfont-export
生成配置文件
npx font-init
此时项目根目录会生成一个iconfont.json
的文件,内容如下:
{
"symbol_url": "请参考README.md,复制官网提供的JS链接",
"use_typescript": false,
"save_dir": "./src/components/iconfont",
"trim_icon_prefix": "icon",
"unit": "px",
"default_icon_size": 18
}
配置iconfont.json
详细配置以及说明戳这里
生成React标准组件并生成导出文件
npx font-export
最终导出文件格式
import React from "react"
import IconNameA from './A/IconNameA'
import IconNameB from './A/IconNameB'
...
export const IconFontMap = new Map([
['namea', IconA],
['nameb', IconB],
...
])
const IconFont = ({ name, ...rest }) => {
const Icon = IconFontMaps.get(name)
if(!Icon) return null;
return (
<Icon {...rest}/>
)
}
export {
IconA,
IconB,
...
}
export default IconFont