vite2+vue2中加载svg图片

一、安装svg依赖包

// npm
npm install vite-plugin-svg-icons -D
// or
yarn add vite-plugin-svg-icons -D

二、vite.config配置插件

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

const { resolve } = require('path')

export default defineConfig({
	...
	plugins: [
		// svg 图标
	    createSvgIconsPlugin({
	      iconDirs: [resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
	      symbolId: 'icon-[dir]-[name]',
	    }),
	]
})

三、main.js配件

...
import 'virtual:svg-icons-register'
...

四、新建组件

src/components/SvgIcon.vue

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

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconName() {
      return `#icon-svg-${this.iconClass}`
    },
  },
}
</script>

五、src 目录下建立 icons 目录存放 svg 图标

这里可以将SvgIcon注册到全局中，然后在icons中新建index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg component

// register globally
Vue.component('svg-icon', SvgIcon)

六、main.js中引入

这样我们在使用svg图标的时候，就不需要引用组件了

import '@/icons'; // icon

七、组件中使用

<template>
	<div>
		<svg-icon icon-class="user" />
	</div>
</template>