在vue中使用svg-sprite-loader

第一步首先 npm install svg-sprite-loader --save

在assets文件夾下創建icons文件夾用來存放svg文件夾和index.js文件

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 注冊全局組件
Vue.component('svg-icon', SvgIcon)
/**
 * 固定語法 , webpack 上下文模塊API 上下文模塊導出一個帶一個參數的（require）函數：
 * 請求。導出的功能有3個屬性：resolve，keys，id。
 * resolve 是一個函數，返回已解析請求的模塊ID。
 * keys 是一個函數，它返回上下文模塊可以處理的所有可能請求的數組
 * */
const importAll = requireContext => requireContext.keys().map(requireContext)
/**
 * require.context("./svg", false, /\.svg&/) 會去找 ./svg 文件夾下面的以 .svg結尾的所有文件
 *  需要結合 importAll 使用
 *
 * require.context(directory, useSubdirectories, regExp)有三個參數：
 * directory ：說明需要檢索的目錄
    useSubdirectories ：是否檢索子目錄
    regExp : 匹配文件的正則表達式
*/
const req = require.context('./svg', false, /\.svg$/)
importAll(req)

創建組件SvgIcon

<template>
  <svg class="icon-svg" aria-hidden="true">
    <use :xlink:href="IconName" />
  </svg>
</template>
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      default: '',
      required: true
    }
  },
  computed: {
    // 用於接收傳遞的 svg 圖標的名稱
    IconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>
<style lang="scss" scoped>
// 導入的樣式可以自定義
.icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在main.js中導入

import './assets/icons' 

 

在vue.config.js中配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

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

最后使用方法

<svg-icon icon-class="此處為SVG文件名"  />