@mj666/gen-iconfont-export v1.0.1

gen-iconfont-export

在项目中使用图标时,使用react-iconfont-cli很方便的将iconfont选中的图标打包到项目下

使用react-iconfont-cli生成的项目结构

iconfont
    fontsA
        ...
        index.js
    fontsB
        ...
        index.js

fontsA/index.js中将该目录下的所有图标都导出了,但是iconfont目录没有统一导出所有图标的文件, 该工具就是读取iconfont目录下所有图标，生成统一导出文件,并添加到iconfont目录下，方便引入使用

使用gen-iconfont-export之后生成的结构

iconfont
    fontsA
        ...
        index.js
    fontsB
        ...
        index.js
    index.js

安装

# Yarn
yarn add gen-iconfont-export
# Npm
npm install gen-iconfont-export

使用

使用之前需要react-iconfont-cli所需配置文件iconfont.json

详细配置以及说明戳这里

Step1

生成配置文件

npx iconfont-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
}

Step 2

开始生成React标准组

npx iconfont-h5

Step3

生成导出文件

npx gen-iconfont-export

导出文件格式

import React from "react"
import IconNameA from './A/IconNameA'
import IconNameB from './A/IconNameB'
...

export const IconFontMap = {
    'name': IconA,
    ...
}
const IconFont = ({ name, ...rest }) => {
    siwtch(name) {
        case 'name':
            return <IconName {...rest}>;
        ...
    }
    return null
}
export default IconFont