React + Webpack + SVG Sprite

以前我们项目中使用矢量图，通常的做法是由设计师提供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。