以前我们项目中使用矢量图，通常的做法是由设计师提供SVG，然后通过 http://fontello.com/ 生成 Web Icon Font。麻烦的是每次添加一个SVG就得重新生成一遍，再把新生成的文件添加到代码仓库中，十分繁琐；另外 Web Icon Font 对彩色图标支持也不是很好。
为了省事，我也曾经直接在 JSX 页面中嵌入 SVG，就是把 SVG 当做普通的 HTML 标签写进去，这样当然是可以的，只是这些 SVG 对 JSX 代码是一个污染，所以这也不是一个好方案。
后来考虑用更优雅的方式使用SVG，看到这篇 SVG Sprite 技术实践，里面也罗列了一下 SVG 相关的文章，于是准备使用 SVG Sprite 。
首先，我准备用 react-boilerplate 做Demo，发现里面已经自带了 svg-url-loader，便决定先尝试一下，发现它是将 SVG 转为 DataURL 嵌入到页面，这种方式可用，但不是我喜欢的方式。
然后，删掉 svg-url-loader，使用 svg-sprite-loader。
以这样的方式使用 SVG 之后，再也不用像 Web Icon Font 那样每次添加图片都必须更新许多文件。而且 SVG Sprite 还支持设置颜色，方便做一些 Hover 之类的 CSS 效果。
相关代码
package.json
"svg-sprite-loader": "^3.8.0",
webpack.base.conf.js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
},
注意，配置文件中若有 file-loader 之类的插件，注意 test 捕获文件可能会造成冲突。
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 应该是纯净的，设计师提供的 SVG 可能会在path中包含 fill，那样就很难修改颜色。
生成的 HTML
<svg><use xlink:href="#cube"></use></svg>
<svg><use xlink:href="#game"></use></svg>
<svg><use xlink:href="#facebook"></use></svg>
设置大小、修改颜色
直接设置 width 和 height 属性即可。
单色图标可以通过 fill 属性直接修改颜色，多色图标设置比较麻烦，不建议。
SVG Sprite 是否支持 CSS 中的 background
支持，但是兼容性并不好，Safari 并不支持，参考 https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode。
