老生常談了，一般來說簡(jiǎn)單優(yōu)化曲饱，可以選擇使用精靈圖，把多個(gè)icon放在一張圖中珠月，本來需要請(qǐng)求多次的圖標(biāo)請(qǐng)求一次就ok了扩淀。
本文介紹的是另一種方法，對(duì)于純色的icon啤挎，可以把他們打包成字體文件
（目前應(yīng)該打包成兩個(gè)文件驻谆，一個(gè)*.ttf卵凑，一個(gè)*.woff，woff格式相對(duì)較新胜臊，是專門針對(duì)web的格式勺卢，兼容性不高，但是整體大小比tff文件小40%左右象对，所以引入兩個(gè)文件黑忱，如果打開項(xiàng)目的瀏覽器支持woff格式的字體，則自動(dòng)引入woff）勒魔，引入項(xiàng)目甫煞，一次請(qǐng)求就下載了全部項(xiàng)目用到的純色icon，就woff來說冠绢，我項(xiàng)目中的woff抚吠，經(jīng)過服務(wù)器壓縮，最后只有179B（這里修正一個(gè)錯(cuò)誤弟胀，貌似服務(wù)器并不能壓縮字體文件楷力，但是也不用擔(dān)心，一個(gè)143個(gè)圖標(biāo)的woff文件只有不到15kb）孵户。下面開始介紹具體制作和引入方法弥雹。-
首先需要制作字體文件，在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'}
- 定義好之后就可以在頁面中使用了
<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
- 居然說找不到模塊，老子路徑明明沒錯(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
下面就可以開始修改字體文件了芒炼，把UI給你的svg添加到elementUI的字體文件中，步驟參照上面說過的 第二次添加圖標(biāo) 术徊，把需要修改的
/src/element/theme/fonts/element-icons.ttf拖入熊貓本刽，添加svg后生成新的字體文件，并用新生成的字體文件改名后替換element原來的那兩個(gè)字體文件最后一步赠涮，在
/src/element/theme/icon.scss中配置一下剛才導(dǎo)入的圖標(biāo)就可以用了
注意：類名前綴必須是'.el-icon-'
