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文件的名字。查看页面如下：