以前我們項(xiàng)目中使用矢量圖溉瓶，通常的做法是由設(shè)計(jì)師提供SVG授药，然后通過 http://fontello.com/ 生成 Web Icon Font。麻煩的是每次添加一個(gè)SVG就得重新生成一遍鸵鸥，再把新生成的文件添加到代碼倉庫中嵌巷，十分繁瑣；另外 Web Icon Font 對(duì)彩色圖標(biāo)支持也不是很好室抽。
為了省事搪哪，我也曾經(jīng)直接在 JSX 頁面中嵌入 SVG，就是把 SVG 當(dāng)做普通的 HTML 標(biāo)簽寫進(jìn)去坪圾，這樣當(dāng)然是可以的晓折，只是這些 SVG 對(duì) JSX 代碼是一個(gè)污染，所以這也不是一個(gè)好方案兽泄。
后來考慮用更優(yōu)雅的方式使用SVG漓概，看到這篇 SVG Sprite 技術(shù)實(shí)踐，里面也羅列了一下 SVG 相關(guān)的文章病梢，于是準(zhǔn)備使用 SVG Sprite 胃珍。
首先，我準(zhǔn)備用 react-boilerplate 做Demo蜓陌，發(fā)現(xiàn)里面已經(jīng)自帶了 svg-url-loader觅彰，便決定先嘗試一下，發(fā)現(xiàn)它是將 SVG 轉(zhuǎn)為 DataURL 嵌入到頁面钮热，這種方式可用填抬，但不是我喜歡的方式。
然后隧期，刪掉 svg-url-loader飒责，使用 svg-sprite-loader。
以這樣的方式使用 SVG 之后仆潮，再也不用像 Web Icon Font 那樣每次添加圖片都必須更新許多文件宏蛉。而且 SVG Sprite 還支持設(shè)置顏色，方便做一些 Hover 之類的 CSS 效果性置。
相關(guān)代碼
package.json
"svg-sprite-loader": "^3.8.0",
webpack.base.conf.js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
},
注意檐晕，配置文件中若有 file-loader 之類的插件，注意 test 捕獲文件可能會(huì)造成沖突。
react
import Cube from './cube.svg';
import Game from './game.svg';
import Facebook from './facebook.svg';
<svg>
<use xlinkHref={`#${Cube.id}`} />
</svg>
<svg>
<use xlinkHref={`#${Game.id}`} />
</svg>
<svg>
<use xlinkHref={`#${Facebook.id}`} />
</svg>
注意辟灰，此處引入的 SVG 應(yīng)該是純凈的个榕，設(shè)計(jì)師提供的 SVG 可能會(huì)在path中包含 fill，那樣就很難修改顏色芥喇。
生成的 HTML
<svg><use xlink:href="#cube"></use></svg>
<svg><use xlink:href="#game"></use></svg>
<svg><use xlink:href="#facebook"></use></svg>
設(shè)置大小西采、修改顏色
直接設(shè)置 width 和 height 屬性即可。
單色圖標(biāo)可以通過 fill 屬性直接修改顏色继控，多色圖標(biāo)設(shè)置比較麻煩械馆，不建議。
SVG Sprite 是否支持 CSS 中的 background
支持武通，但是兼容性并不好霹崎，Safari 并不支持，參考 https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode冶忱。
