Vue3中使用svg

1）安裝插件

npm install svg-sprite-loader --save-dev

2）封裝svgIcon組件

在componemts里新建svgIcon文件夾，新建index.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 scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

3）在src下新建icons文件夾，此文件夾下新建svg文件夾。其中svg文件夾存放所有的svg文件

4）在icons下新建index.js，由於配置svg

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)

5）在svg文件夾下新建user.svg。打開阿里圖標倉庫，找一個用戶的圖標的svg並復制，粘貼到user.svg中

 

6）在vue.config.js添加下面的內容

const path = require('path')

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

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重點:刪除默認配置中處理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //處理svg目錄
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
}

7）在main.js里引入

import './icons'

8）在頁面中使用

 svg圖標<svg-icon icon-class="user"></svg-icon>

其中icon-class指定的是svg文件的名字。查看頁面如下：