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圖標出來了