Vue-Octicon

上一篇講到過 inline SVG 圖標方案，GitHub 是後端輸出的，但是這樣 HTML 源碼中會有很多冗餘的 SVG 代碼（不過 gzip 以後應該可以小不少）。

如果要在純前端輸出的話，可以使用 SVG Sprite。Sprite 的做法一般是拼成一個 SVG 然後用 <use> 來引用。但其實這樣輸出的時候也很不友好，得自己去寫 <svg> 標籤。

在一些有組件機制的框架下，我們可以進行一下封裝，使得調用方式更為友好。我從 Octicons 的 SVG 源提取了一個 JSON 文件，主要包括每個圖標的尺寸、路徑數據，實測 gzip 後和字體是差不多大小的。嘗試了一下用 Vue.js 的組件進行了一下封裝，這樣在基於 Vue.js 的項目就可以用如下的形式輸出圖標了：

<octicon name="repo"></octicon>n<octicon name="sync" spin></octicon>n

• Repo
• Demo

推薦閱讀：