1.安裝依賴npm install svg-sprite-loader --save-dev

2.vue.config.js 中新增配置

chainWebpack(config) {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
 

  }

3.SRC下新件資料夾icons

建立svg資料夾 ，同時新建 index.js 內容如下：

importVuefrom'vue'; importSvgIconfrom'@/components/SvgIcon';//svgcomponent
//registerglobally Vue.component('svg-icon',SvgIcon);
constreq=require.context('./svg',false,/\.svg$/); constrequireAll=requireContext=>requireContext.keys().map(requireContext); requireAll(req); 4、在src/components下新建資料夾及檔案SvgIcon/index.vue，index.vue中內容如下

<template> <svg:class="svgClass"aria-hidden="true"v-on="$listeners"> <use:xlink:href="iconName"/> </svg> </template> <script> exportdefault{ 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> <stylescoped> .svg-icon{ width:20px; height:20px; vertical-align:-0.15em; fill:currentColor; overflow:hidden; } </style> 5.在main.js中引入 ，頁面使用及頁面效果如下圖

import '@/icons'