老生常談了，一般來(lái)說(shuō)簡(jiǎn)單優(yōu)化，可以選擇使用精靈圖，把多個(gè)icon放在一張圖中，本來(lái)需要請(qǐng)求多次的圖標(biāo)請(qǐng)求一次就ok了。
本文介紹的是另一種方法，對(duì)于純色的icon，可以把他們打包成字體文件
（目前應(yīng)該打包成兩個(gè)文件，一個(gè)*.ttf，一個(gè)*.woff，woff格式相對(duì)較新，是專門針對(duì)web的格式，兼容性不高，但是整體大小比tff文件小40%左右，所以引入兩個(gè)文件，如果打開(kāi)項(xiàng)目的瀏覽器支持woff格式的字體，則自動(dòng)引入woff），引入項(xiàng)目，一次請(qǐng)求就下載了全部項(xiàng)目用到的純色icon，就woff來(lái)說(shuō)，我項(xiàng)目中的woff，經(jīng)過(guò)服務(wù)器壓縮，最后只有179B（這里修正一個(gè)錯(cuò)誤，貌似服務(wù)器并不能壓縮字體文件，但是也不用擔(dān)心，一個(gè)143個(gè)圖標(biāo)的woff文件只有不到15kb）。下面開(kāi)始介紹具體制作和引入方法。-
首先需要制作字體文件，在mac系統(tǒng)下，先下載一個(gè)軟件叫Panda，圖標(biāo)是一個(gè)熊貓，然后找UI要svg矢量圖（這個(gè)軟件只能用svg生成字體文件），軟件的使用很簡(jiǎn)單，首次使用點(diǎn)擊下面三個(gè)tab中的第一個(gè)“拼合”，把svg拖入軟件，點(diǎn)擊生成，軟件會(huì)在svg所在的文件夾生成一個(gè)demo文件夾，兩個(gè)字體文件就生成到這個(gè)文件里了
image.png 第二次添加圖標(biāo)的時(shí)候，點(diǎn)擊軟件下面三個(gè)tab中的第二個(gè)“修改”，把之前生成的ttf文件拖入軟件，再拖入需要添加的svg，點(diǎn)擊生成，就會(huì)更新“demo”文件夾中的字體文件了。
制作好了字體文件，進(jìn)入第二步，比如把字體文件放入index.html同級(jí)的fonts文件夾中，推薦的做法是把字體圖標(biāo)的聲明和定義樣式全部抽離到一個(gè)文件中，再引入App.vue
字體編碼可以在demo/demo.html中查看，比如第一個(gè)圖標(biāo)下面的編碼為
ခ，則對(duì)應(yīng)的字體編碼為\1001
/* 使用font-face聲明字體 */
@font-face {
font-family: 'iconfont';
src: url('fonts/iconfont.woff?t=1510834658947') format('woff'), /* chrome, firefox */
url('fonts/iconfont.ttf?t=1510834658947') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-style: normal
}
/* 定義使用iconfont的樣式 */
[class^="icon-font-"] {
font-family: "iconfont" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 挑選相應(yīng)圖標(biāo)并獲取字體編碼，起個(gè)類名賦值給他的content */
i.icon-font-home:before {content: '\1001'}
- 定義好之后就可以在頁(yè)面中使用了
<i class="icon-font-home"></i>
整合elementUI
有的項(xiàng)目需要fork elementUI的樣式文件，修改成自己項(xiàng)目的風(fēng)格，我們也可以把圖標(biāo)整合進(jìn)elementUI本身的字體文件中。先下載 elementUI的樣式文件，解壓之后把文件夾中的src文件夾改個(gè)名字theme，放入
/src/element，再修改main.js之前引入的element樣式文件路徑為import './element/theme/index.scss'然后重啟項(xiàng)目，這時(shí)你可能會(huì)發(fā)現(xiàn)報(bào)錯(cuò)了！
This relative module was not found:
* ./element/theme/index.scss in ./src/main.js
- 居然說(shuō)找不到模塊，老子路徑明明沒(méi)錯(cuò)！莫慌，其實(shí)是你的項(xiàng)目解析不了scss文件，如果你使用的是webpack4.0+，只需要安裝一下sass就解決了，連寫配置都省了
// 在項(xiàng)目下，運(yùn)行下列命令行
npm install --save-dev sass-loader
// 因?yàn)閟ass-loader依賴于node-sass，所以還要安裝node-sass
npm install --save-dev node-sass
下面就可以開(kāi)始修改字體文件了，把UI給你的svg添加到elementUI的字體文件中，步驟參照上面說(shuō)過(guò)的 第二次添加圖標(biāo) ，把需要修改的
/src/element/theme/fonts/element-icons.ttf拖入熊貓，添加svg后生成新的字體文件，并用新生成的字體文件改名后替換element原來(lái)的那兩個(gè)字體文件最后一步，在
/src/element/theme/icon.scss中配置一下剛才導(dǎo)入的圖標(biāo)就可以用了
注意：類名前綴必須是'.el-icon-'
