下載阿里巴巴矢量圖標(biāo)庫的步驟elementUI設(shè)置自定義圖標(biāo)庫 - 簡書 (jianshu.com)

復(fù)制其中的文件到項目中的theme-chalk文件中你存放字體的地方

我新建的是m-icon的組件

在上文下載的字體文件中有一個叫做iconfont.css文件的，將里面的內(nèi)容復(fù)制粘貼到m-icon.scss（或者是對應(yīng)的less、css）中，稍作修改

新建gen-cssfile腳本命令:"gen-cssfile": "node build/bin/gen-cssfile"

執(zhí)行npm run gen-cssfile

修改build/bin/iconInit.js文件

執(zhí)行npm run build:file,會在/examples目錄下生成自己的圖標(biāo)庫的json文件

在/example/entry.js文件中

import mIcon from './m-icon.json'

Vue.prototype.$mIcon = mIcon;?

運(yùn)行代碼發(fā)現(xiàn)沒有生效，然后在play.js中發(fā)現(xiàn)引用的index樣式中引入了icon.scss，最后把自己寫的icon.scss引入

最后要在base.scss（包含在index.css）中引用m-icon.scss

就可以直接使用了

參考鏈接:如何快速為團(tuán)隊打造自己的組件庫（下）—— 基于 element-ui 為團(tuán)隊打造自己的組件庫 - 掘金 (juejin.cn)