vue中配置SVG圖片

1. 安裝依賴包

npm install svg-sprite-loader 

2. 在src下新建資料夾

在src下新建src/icon/svg

3. 配置vue.config.js

這裡是使用wepack處理svg檔案

const {defineConfig} = require('@vue/cli-service')
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    chainWebpack(config) {
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))       //注意svg的儲存地址
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))        //注意svg的儲存地址
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
})
 

4. 匯入svg檔案

在icons資料夾下新建index.js檔案

也可以在這裡設定掛載全域性元件

// import Vue from 'vue'
// import svgIcon from '../components/svgIcon' // 元件引入
//
// Vue.component('svg-icon', svgIcon) //掛載全域性元件

//下面這個是匯入svgIcon/svg下的所有svg檔案
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
/*
   第一個引數是:'./svg' => 需要檢索的目錄，
   第二個引數是：false => 是否檢索子目錄,
   第三個引數是: /\.svg$/ => 匹配檔案的正則
  */
requireAll(req)
 

5. 編寫svgIcon元件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="getIconName" ></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    icon: {
      type: String,
      require: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    getIconName() {
      // console.log("icon",this.icon)
      return `#icon-${this.icon}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  /* 預設樣式設定 預設寬高1em*/
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  /* 當前顏色 */
  fill: currentColor;
  overflow: hidden;
}
</style>

 

6. 使用

<div class="music-icon">
      <svg-icon icon="erji" class-name="erji-icon"></svg-icon>
</div>