优雅的使用iconfont

背景

目前我们在 web 端和小程序端使用图标的时候，都是切成 png 图片再引入，这样做需要切图、命名、上传等等流程很繁琐。

之前在做 app 的过程中使用用了一个很不错的库，能把 iconfont 转换为标准的 React 组件，可以很方便的引入，并且更新也非常方便，后来发现小程序和 web 端也有类似的方案，在此分享一下

下面以小程序为例，其他端都差不多，具体的 vue/mini/app 的集成 demo 放在这个仓库。

设计

设计同学在 iconfont.cn 上建立一个项目，放入该项目的图标

小程序

1、安装

npm install mini-program-iconfont-cli --save-dev

2、生成配置文件

执行下面命令，在项目的根目录会生成一份配置文件

npx iconfont-init

修改配置文件

{
    "symbol_url": "//at.alicdn.com/t/font_1921168_kt4m8h6d92o.js",
    "save_dir": "./static/iconfont",
    "use_rpx": true,
    "trim_icon_prefix": "",
    "default_icon_size": 28
}

symbol_url：

3、生成iconfont小程序组件

执行改命令会在上一步配置的 save_dir 路径中生成小程序组件。

npx iconfont-wechat

4、引入

// app.wpy
"usingComponents": {
 	"Iconfont": "../static/iconfont/iconfont"
}

5、使用

<Iconfont name="ylkj-home" />
<Iconfont name="ylkj-home" color="#f00" size="40" />

最终的效果如下

6、更新

如果设计同学有更新 iconfont 的话，只需要把第 2 步的路径替换，然后执行第 3 步就可以了。

Vue

1、安装

npm install vue-iconfonts-cli --save-dev

2、生成配置文件

执行下面命令，在项目的根目录会生成一份配置文件

npx iconfont-init

修改配置文件

{
    "symbol_url": "//at.alicdn.com/t/font_1921168_kt4m8h6d92o.js",
    "save_dir": "./src/assets/iconfont",
    "trim_icon_prefix": "icon",
    "unit": "px",
    "default_icon_size": 18
}

3、生成iconfont vue组件

执行改命令会在上一步配置的 save_dir 路径中生成小程序组件。

npx iconfont-h5

4、引入

// main.js
import IconFont from "./assets/iconfont/Index.vue";

const app = createApp(App)
app.component('Iconfont', IconFont)

5、使用

<Iconfont name="ylkj-home" />
<Iconfont name="ylkj-home" color="#f00" size="40" />

参考资料

RN：https://github.com/iconfont-cli/react-native-iconfont-cli
Mini：https://github.com/iconfont-cli/mini-program-iconfont-cli
React：https://github.com/iconfont-cli/react-iconfont-cli
Vue：https://github.com/iconfont-cli/vue-iconfont-cli
vue库目前用下面这个，上面那个作者还没更新：https://github.com/Yorksh1re/vue-iconfonts-cli