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文件命名一致。