Vue项目中引用svg时webpack如何配置？

引入svg的配置

当我们项目中遇到需要引用图片目录下svg图片的需求时，如果图片不多我们可以直接在项目文件中引用：

<script lang="ts">
    import svg from './assets/icons/label.svg'
    console.log(svg)
    export default {
        // ...
    }
</script>

但是如果直接这样引用，log出来的是一串文件路径。

我们需要使用svg-sprite-loader引入icon

npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

安装后，文档要求在webpack.config.js中进行一些配置····，这会有问题。因为在vue中没有webpack.config.js文件，只有vue.config.js，因为webpack的配置在vue中放到了vue.config.js文件中，因此我们需要做一些翻译的额外处理工作。 

在vue.config.js中配置如下：

const path = require('path')
module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')// 存svg图片路径
        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 loader排除icons目录
    },
}

这时候console.log(svg)就不会只出现一个路径了，而是一个svg图片。我们就可以在html中使用use标签引用svg了。

 

引入多个svg的配置

但是另一个问题来了，如果我们需要引用很多svg标签， 那么 import svg from './assets/icons/label.svg' 岂不是要写很多次？？

这么麻烦，那可不可以直接引用svg整个文件呢？

是可以的，我们试着来解决这个问题吧。

在文件中这样引入：

<script lang="ts">
     const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
    try {
        importAll(require.context('@/assets/icons', true, /\.svg$/))//将一个目录里面所有的文件引入到当前文件
    } catch (error) {
        console.log(error)
    }
    export default {
        // ...
    }
</script>

在ts中通过这样引用，就可以将icons目录下的所有svg图片全部遍历引用到页面中。

 

一个BUG

另外我们还需要注意一个会出现的BUG：如果引入svg时，svg的fill就存在颜色，那么在项目中我们是无法更改整个svg的颜色的。

那么怎么解决这个BUG？？只能谷歌全网搜吧～ ～||  

n个小时后：

原来需要添加一个loder，并且在vue.config.js中增加一些配置才行···

npm install --dev svgo-loader

# via yarn

yarn add --dev svgo-loader

const path = require('path')
module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')
        config.module
            .rule('svg-sprite')
            .test(/\.svg$/)
            .include.add(dir).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({extract: false}).end()
            // 新增loder
            .use('svgo-loader').loader('svgo-loader')
            .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})) //去掉svg原有的fill颜色
            .end()

        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
        config.module.rule('svg').exclude.add(dir)//其他svg loader排除icons目录
    },
}

.use('svgo-loader').loader('svgo-loader').tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()

上面这段代码大意如下：找到svg文件，然后查找是否有fill属性，如果有就将它删除。