svg-sprites

介绍

vite 插件：svg 雪碧图

安装

pnpm add vite-plugin-svg-symbol -D

使用说明

1、配置 vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import svgSprite from "vite-plugin-svg-symbol";
export default defineConfig({
	plugins: [vue(), svgSprite(option)],
});

//option 默认值:{
//   symbolId: "icon-[dir]-[name]",// 生成图标的 id
//   svgDir: "src/assets/svg",      // svg 图标目录
//	 inline:false,                   // 是否内联
//	 moduleName:'virtual:daiend-svg-sprites' // 虚拟模块名
//   svgNames:'virtual:daiend-svg-names' // 虚拟模块名
//}

2、在 main.js 引入虚拟模块

import { createApp } from "vue";
import App from "./App.vue";
import "virtual:daiend-svg-sprites";
const app = createApp(App);
app.mount("#app");

3、SvgIcon 组件

<template>
	<svg class="icon" aria-hidden="true">
		<use :href="iconName"></use>
	</svg>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
	name: {
		type: String,
		required: true,
	},
});
const iconName = computed(() => `#icon-${props.name}`);
</script>
<style lang="scss" scoped>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>

4、svg 文件目录

src/assets/svg/home.svg

src/assets/svg/system/user.svg

5、使用

<h1 style="color:red"><SvgIcon name="home"></SvgIcon></h1>
<h1 style="color:red"><SvgIcon name="system-user"></SvgIcon></h1>

6、获取svg 文件名列表

import names from "virtual:daiend-svg-names";