iconfont-cli 告别批量打包到项目

相关插件

mini-program-iconfont-cli
react-native-iconfont-cli
uni-app-iconfont-cli
vue-iconfont-cli
react-iconfont-cli
flutter-iconfont-cli
taro-iconfont-cli

这里我们以 vue项目和react-native项目为例子

vue npm的地址

react-native的地址
这两个地址有对应的教程

生成配置文件

npx iconfont-init

这样会在项目生成一个iconfont.json文件 这是相关的配置文件

{
    "symbol_url": "请参考README.md，复制官网提供的JS链接",
    "use_typescript": false, //支持ts
    "save_dir": "./src/iconfont",// 图标组件存放位置
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "local_svgs": "./localSvgs"
}

将阿里图标库项目中的symbol中的链接复制到json文件 然后执行
vue项目：

npx iconfont-h5

Vue项目会生成一个Index.vue (注意i大写)的文件 然后引入组件
使用:

//template
<Icon name="Faxian" ></Icon>
//script
import Icon from 'src/assets/iconfont/Index.vue'
components:{ Icon }

react-native项目:
在这里插入图片描述

npx iconfont-rn

我这里是支持ts的

//在对应的组件内
import Icon from '@/assets/iconfont/index';

<Icon name="icon-shouye" color={color} size={size} />

当阿里图标库项目中的内容有更新 刷新链接 复制 然后在重新生成组件即可