您现在的位置是：首页 >技术教程 >【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件网站首页技术教程

1. 安装依赖插件 vite-plugin-svg-icons

vite-plugin-svg-icons 用于生成 svg 雪碧图。
特点：
1.预加载 在项目运行时就生成所有图标,只需操作一次 dom
2.高性能 内置缓存,仅当文件被修改时才会重新生成

vite-plugin-svg-icons 官方文档

pnpm add vite-plugin-svg-icons

2. 安装 fast-glob

该软件包提供了遍历文件系统的方法，并根据Unix Bash shell使用的规则返回与一组定义的指定模式匹配的路径名，并进行了一些简化，同时以任意顺序返回结果。快速、简单、有效。

fast-glob NPM 文档

pnpm add fast-glob

3. 配置 vite.config.ts

import { defineConfig } from 'vite'
import path from "path";
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; // vite-plugin-svg-icons 用于自动导入 svg 图标

export default defineConfig({
  plugins: [
	createSvgIconsPlugin({
		// 需要自动导入的 svg 文件目录（可自行修改）
		iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
		// 执行icon name的格式（可自行修改）
		symbolId: "icon-[dir]-[name]",
		// 更多配置请参考：https://github.com/vbenjs/vite-plugin-svg-icons/blob/HEAD/README.zh_CN.md
	}),
  ]
});

4. 在 main.ts 入口注册脚本

import "virtual:svg-icons-register"; // vite-plugin-svg-icons 插件注册，不引入会导致svg图标无法正常显示

5. 封装 SvgIcon 组件

可根据自己实际项目需要自行修改组件逻辑

<template>
	<svg :style="iconStyle" aria-hidden="true">
		<use :xlink:href="symbolId" />
	</svg>
</template>

<script setup lang="ts" name="SvgIcon">
import { computed, CSSProperties } from "vue";

interface SvgProps {
	name: string; // 图标的名称（Svg 文件名） ==> 必传
	prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
	iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
}
// 接收父组件参数并设置默认值
const props = withDefaults(defineProps<SvgProps>(), {
	prefix: "icon",
	iconStyle: () => ({ width: "50px", height: "50px" }),
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

6. 引入组件使用

// 导入
import SvgIcon from '@/components/SvgIcon/index.vue';

// 使用
<SvgIcon :name="item.name" :iconStyle="{ width: '24px', height: '24px' }" />

参考文章

vite-plugin-svg-icons 官方文档
fast-glob NPM 文档
Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件