【vue】vue3中使用svg切图

一、安装插件

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

二、封装一个组件

在componemts里新建一个文件svgIcon.vue

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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: 100px;
  height: 100px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

三、新建一个文件夹

1.在assets下新建icons文件夹，来放你的svg文件，新建index.js

目录

2.index.js

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

四、在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/assets/icons')) //处理svg目录（根据你建的文件路径）
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
}

五、引入

在main.js里引入（根据你建的文件引入）
import './assets/icons'

六、页面使用

<svg-icon icon-class="menu_logo" />  //// icon-class：是svg的文件名