Vite中使用vite-plugin-svg-icons插件配置SVG图标，并自动去除fill属性

最新推荐文章于 2025-05-22 09:00:00 发布

whatfuck123

最新推荐文章于 2025-05-22 09:00:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vite 文章标签：前端开发语言 vue

本文链接：https://blog.youkuaiyun.com/whatfuck123/article/details/129166502

本文介绍了如何在Vite项目中使用vite-plugin-svg-icons插件来管理和使用SVG图标，详细步骤包括插件的安装、配置、创建SvgIcon组件、全局引入和注册，以及组件的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vite中使用vite-plugin-svg-icons插件

安装

// 安装插件
npm i vite-plugin-svg-icons -D

引入并配置插件

在vite.config.js中引入

...
import {
    resolve } from 'node:path'
// svg-icon插件
import {
    createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig(({
    command, mode})=>{
   
	return {
   
		// ...其他配置
		plugins:[
			// ...其他配置
			createSvgIconsPlugin({
   
		        // 指定需要缓存的图标文件夹目录
		        iconDirs: [resolve(process.cwd(), 'src/assets/svgIcons')],
		        // 指定symbolId格式