用 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 引用圖標時遇到的一些問題，以及最後總結出的一種可行且較爲通用的解決方案，可供你們參考。