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