vue-cli3使用svg

• 执行命令安装插件 npm install svg-sprite-loader --save-dev

• 在vue.config.js中，添加配置

    module.exports = {
        ...
        chainwebpack: config => {
            // 一个规则里的 基础loader
            // svg是个基础loader
            const svgrule = config.module.rule("svg");
  
            // 清除已有的所有 loader。
            // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
            svgrule.uses.clear();
  
            // 添加要替换的 loader
            svgrule
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
                symbolid: "icon-[name]"
            });
        },
        ...
    }

• 创建vue公共svg组件svgicon.vue

    <template>
    <svg :class="svgclass" aria-hidden="true">
        <use :xlink:href="iconname" />
    </svg>
    </template>
    <script>
    export default {
    name: "svgicon",
  
    props: {
        iconclass: {
            type: string,
            required: true,
        },
        classname: {
            type: string,
            default: '',
        },
    },
  
    computed: {
        iconname () {
            return    `#icon-${this.iconclass}`
        },
        svgclass () {
            if(this.classname) {
                return `svg-icon${this.classname}`
            }else {
                return 'svg-icon'
            }
        },
    },
    }
    </script>
    <style lang="scss" scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentcolor;
        overflow: hidden;
    }
    </style>

• 新建svg-icon文件夹，文件夹下包含svg和index.js，分别为svg原文件和引入代码。index.js内容为：

    import vue from 'vue'
    import svgicon from '@/components/svgicon'
  
    vue.component('svg-icon', svgicon)   // 挂载在全局
  
    const requireall = requirecontext => requirecontext.keys().map(requirecontext)
    const req = require.context('./svg', false, /\.svg$/)
    requireall(req);

• 使用 <svg-icon icon-class="svgname" /> // svgname必须与/svg-icon/svg/下的svg文件命名一致。