1、加载svg的使用插件
npm install vite-plugin-svg-icons fast-glob -D
2、在vite.config.ts中配置
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
export default defineConfig({
plugins: [
vue(),
defineOption(),
createSvgIconsPlugin({
// 指定目录(svg存放目录)
iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
// 使用 svg 图标的格式(name为图片名称)
symbolId: "icon-[dir]-[name]",
})
],
})
3、在src的目录下创建 src/assets/svgs/**.svg
4、在conponents中创建svg.vue文件,封装代码
<template>
<svg
aria-hidden="true"
:width="width"
:height="height"
>
<use :xlink:href="`#icon-${name}`" :fill="color"/>
</svg>
</template>
<script setup lang="ts">
defineProps<{
name: string,
width: string,
height: string,
color?: string
}>();
</script>
5、在main.ts中全局注册
import 'virtual:svg-icons-register';
import SvgIcon from "./components/svg/index.vue";
const app = createApp(App)
app.component("SvgIcon", SvgIcon);
6、如何在项目中使用
<template>
<svg-icon name="home" width="24" height="24" color="#57EF0C"></svg-icon>
</template>
// name为svg的名称
7、 注意:如果在项目中color颜色值无效时,需要注意
打开svg图片代码:查看下fill值是否为空或者为currentColor