用 svg-sprite-loader 引入 SVG 以及它的“坑”

在页面中以 symbol 引用的方式使用 SVG，已经成为目前最完美的图标解决方案。除了使用一些无版权图标网站如 Iconfont 提供的引入方式外，咱们还能够在项目中使用 Webpack 来引入本身的 SVG，这就要用到 svg-sprite-loader。

svg-sprite-loader 的安装和配置

打开 svg-sprite-loader 的官方文档，能够看到它的安装方式：

npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D
复制代码

安装完成之后须要对其进行配置，若是项目中使用了 Webpack，直接参照文档的配置方法便可。若是使用了一些开发框架官方提供的脚手架工具如 Vue CLI，它的配置可能会稍微复杂一些，须要参考 Vue CLI 的配置方法。

如下是笔者在使用 Vue CLI 时进行的配置，在 vue.config.js 中加入：

module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname, '.../icons目录')

    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
      
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    
    config.module.rule('svg').exclude.add(dir)
  }
}
复制代码

在引入时若是须要一次性引入整个目录的 SVG，能够这样作：

const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);

try {
    importAll(require.context('.../icons目录', true, /\.svg$/));
} catch (error) {
    console.log(error);
}
复制代码

坑

SVG 可能会自带一个 fill 属性，若是有此属性，那么引入后没法再经过 CSS 修改颜色。因此在引入前应将 fill 删掉。可是这样作过低效了！

好在有另外一个 loader 能够帮助咱们自动完成这一工做，那就是 svgo-loader。

安装：

npm install svgo-loader --dev
# via yarn
yarn add svgo-loader --dev
复制代码

在vue.config.js中配置：

// 只需在以上use('svg-sprite-loader')的end()后面添加：
module.exports = { //...
    .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    .use('svgo-loader').loader('svgo-loader')
        .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()

//...
}
复制代码

这样在引入 SVG 时就能够自动去除 fill 属性了，很是方便。

以上为笔者在项目开发中使用 SVG symbol 引用图标时遇到的一些问题，以及最后总结出的一种可行且较为通用的解决方案，可供你们参考。