現(xiàn)在要做個項目，里面有很多的小圖標，都是公司設計同事自己設計的，然后怎么把這些小圖標運行到項目里，為此我研究了iconfont的前世今生，在此記錄下。
首先，拿到svg文件的時候我有以下幾個疑問：
1、可以使用的svg文件有哪些要求嗎
2、svg文件怎么就可以用font-size，color這些css屬性來控制
3、設計給的svg文件，怎么拿來在代碼里用？
帶著這些問題，首先我研究了張鑫旭大神的未來必熱：SVG Sprites技術介紹，得出了一下結論
針對第一個問題，設計給的svg圖有兩種情況，一是每個icon的svg文件，二是集在一起的svg圖片，不巧，設計同事導出的svg雪碧圖文件是這個樣子
image.png
我嘗試了單獨引入某個svg的path卻屢屢失敗，失敗情況如下，要么是需要的那個icon小到看不見，要么icon就不在可見區(qū)域內(nèi)，為此我研究了svg的viewBox屬性，這個屬性是用來控制svg畫板的尺寸大小，可以說是加上這個尺寸就可以對svg圖片進行相應的放大縮?。ň唧w可見 博客SVG之ViewBox），所以就暴露了一個問題，設計導出的是多個path或者g集合共用一個svg，所以也共用了一個viewBox, 我們引入相應的path的時候，改變的是整個svg的大小，所以里面相應的icon都會進行縮放，又因為一般的icon尺寸都是非常小，從而導致里面的icon小到不可見或者不在可見位置
image.png
由此可見，這種格式的svg雪碧圖文件是不可用的。經(jīng)過再深入研究svg，發(fā)現(xiàn)原來svg還有個symbol元素, 這個元素簡直太完美了，symbol元素用來對元素進行分組；它不會被直接顯示，大概相當于定義一個模板，并且可以設置單獨的viewBox，然后使用<use>元素引用并進行渲染。所以一個合理的svg雪碧圖應該是這個樣子
image.png
于是乎，得出了第一個問題的答案，可以前端用來使用的svg文件要么是每個icon單獨svg文件，要么是一個含有元素symbol的多個symbol的集合的svg的雪碧圖（可參考未來必熱：SVG Sprites技術介紹里面對svg雪碧圖的兩種處理）
第一個問題解決后，不知道有沒有人好奇過第二個問題，比如你直接在svg文件里定義font-size和color是不生效的，這是為什么呢？我本來以為是js或者svg的fill和尺寸從而配置font-size和color？后來才知道自己想多了，font-size是因為在調(diào)用svg的父級設置寬高的時候使用em單位（1em 等于當前的字體尺寸）,從而解釋了font-size為什么可以控制svg的寬高，color控制svg顏色是因為css3里有個關鍵字currentColor（具體意思就是使用該關鍵字的元素的（或其最近父元素）color屬性的顏色值），在調(diào)用svg文件里設置fill: currentColor，于是svg就乖乖跟著父級的color改變而改變了，從而解釋了第二個問題。
最后，合適的svg文件做好了，也懂得了為什么可以控制svg的大小和顏色，就剩下如何在代碼中使用了，具體可以參考vue-element-admin里面對icon的封裝，博客可見手摸手，帶你優(yōu)雅的使用 icon（這塊后續(xù)添加到項目中我會具體再介紹）
