vue-cli3使用svg问题的简单解决办法

此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite

效果如下：

那个朋友圈图标就是我从网上找的svg图片

使用方式如下：

vue add svg-sprite

vue.config.js添加配置，在文件内最下方找到pluginOptions

module.exports = {
    pluginOptions: {
        svgSprite: {
            /*
             * The directory containing your SVG files.
             */
            dir: 'src/assets/icons',
            /*
             * The reqex that will be used for the Webpack rule.
             */
            test: /\.(svg)(\?.*)?$/,
            /*
             * @see https://github.com/kisenka/svg-sprite-loader#configuration
             */
            loaderOptions: {
                extract: true,
                spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false
            },
            /*
             * @see https://github.com/kisenka/svg-sprite-loader#configuration
             */
            pluginOptions: {
                plainSprite: true
            }    
        }    
    }    
};

再执行：

npm install svgo svgo-loader --save-dev

然后再在 your vue.config.js file:

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('svg-sprite')
            .use('svgo-loader')
            .loader('svgo-loader');
    }
};

然后再assets下创建icons文件夹，将你的svg图标放入，name就是svg的名字，如下方式使用：

<svg-icon name="aperture"></svg-icon>

这个组件是插件帮你生成的

就会看到你的svg图标出来了