vue3项目全局安装vite-plugin-svg-icons

最新推荐文章于 2025-12-13 13:00:00 发布

原创最新推荐文章于 2025-12-13 13:00:00 发布 · 639 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript #前端框架

1、安装依赖

npm i vite-plugin-svg-icons

npm i fast-glob

2、在src/assets新建svg目录

注：这个文件目录只需要跟第三步的iconDirs里面的路径对应上即可

3、vite.config.js中进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path';

//在plugins中添加
	createSvgIconsPlugin({
        iconDirs:[resolve(process.cwd(), 'src/assets/svg')],
        symbolId: 'icon-[dir]-[name]',
    }),

4、在main.js中导入文件

 //导入svg图标
 import 'virtual:svg-icons-register'

五、在components文件中创建SvgIcon.vue文件封装svg组件

<template>
    <svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    iconName: {
        type: String,
        required: true
    },
    color: {
        type: String,
        default: ''
    },
    size: {
        type: [Number, String],
        default: 18
    }
})
const symbolId = computed(() => `#icon-${props.iconName}`);

</script>


<style scoped>
.svg-icon {
    fill: currentColor;
    vertical-align: middle;
}
</style>

六、在main.js全局引入并注册SvgIcon组件

//引入SvgIcon组件
import SvgIcon from "./components/svg-icon.vue";

// 全局注册 SvgIcon 组件
app.component("SvgIcon", SvgIcon);

七、最后在需要的文件中使用图标

示例在登录页面组件中引用

注：因为在第六步钟已经全局引入并且注册过svg的组件，所以在项目内，可以直接引入

//有闭合标签的写法
<svg-icon icon-name="account"></svg-icon>

//单标签的写法
<svg-icon icon-name="account" />

以上为个人学习资料，仅供参考