Vue3 通过 vite-plugin-svg-icons 封装 SvgIcon 组件

1、安装插件依赖

npm i vite-plugin-svg-icons -D

2、vite.config.js 插件配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		VueDevTools(),
		createSvgIconsPlugin({
			// 指定需要缓存的图标文件夹
			iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
			// 指定symbolId格式
			symbolId: "icon-[dir]-[name]",
		})
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url))
		}
	}
})

3、main.js 中引入注册

import 'virtual:svg-icons-register'

4、封装 SvgIcon 组件

<template>
  <svg :width="size" :height="size">
    <use :xlink:href="symbolId" :fill="color"></use>
  </svg>
</template>

<script setup>
/**
 * 该组件为全局组件
 * 将svg图片转化为图标, svg图片文件存入./assets/svg路径下
 * eg:
 * <svgIcon name="login-bg"></svgIcon>
 * **/
import { computed } from 'vue'

const props = defineProps({
  size: {
		type: Number,
		default: 18,
	},
  color: {
		type: String,
		default: '#333',
	},
  prefix: {
		type: String,
		default: 'icon',
	},
  name: {
		type: String,
		default: ''
	},
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<style lang="less" scoped></style>

5、组件使用

<template>
	<div>
		<svgIcon name="logo"></svgIcon>
	</div>
</template>
<script setup>
	// 如使用了自动按需导入组件，下列代码可省略，自动按需导入方式可查看博文
	import svgIcon from './components/svgIcon/index.vue'
</script>