VUE3 使用 vite-plugin-svg-icons加载SVG

最新推荐文章于 2025-07-03 14:07:19 发布
原创 最新推荐文章于 2025-07-03 14:07:19 发布 · 635 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue3 + Vite 中使用 vite-plugin-svg-icons 插件显示本地 SVG 图标
King Saj
08-21 1504
这样配置后，你就可以在 Vue 3 项目中显示本地的 SVG 图标了。请根据具体情况将代码中的路径和图标 id 替换为实际使用的内容。
VUE3 加载自定义SVG文件
fendouweiqian的博客
01-27 1136
VUE3 vue-cli 加载自定义SVG图标
vue3+vite使用vite-plugin-svg-icons
Liberty_yes的博客
08-11 838
在开发项目的时候，经常会用到svg矢量图标，而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小很多，放在项目中几乎不占用资源。（vite:vue3的打包工具，相当于vue2中的webpack）文件(我自己起的名字suit.svg)，把复制的。这里以阿里巴巴矢量图标库svg图片为例。随便找一个矢量图标，点击——组件中，app.vue为例。插件显示本地svg图标。
Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons
weixin_48040732的博客
02-19 7601
这里记录下自己在Vue3+vite的项目使用vite-plugin-svg-icons来全局使用svg雪碧图，不使用ts语法，方便以后直接使用。
vite-plugin-svg-icons的取代方案
最新发布
xiangfei150702的博客
07-03 819
在使用vite-plugin-svg-icons时，项目显示不出svg。具体原因不清楚。官方文档 二、新建uno.config.ts 三、修改vite.config.js，导入unocss插件 四、修改main.ts文件 五、使用 参考文档：告别 vite-plugin-svg-icons！使用 @unocss/preset-icons 实现 SVG 本地加载
Vue3.js中使用svg：vite-plugin-svg-icons
彭世瑜的博客
08-01 2016
本文使用vue3.js提供的option-api方式实现。将svg图标文件放在icons目录下即可。配置文件vite.config.js。
批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用
weixin_39729729的博客
04-03 6886
在vue3项目中，需要批量导入某个文件夹内数量不确定的svg文件用来作为图标，开发完成后能够通过增减文件夹内的svg文件，从而影响图标的数量。是一个vite插件，提供轻松导入svg文件作为symbol元素并插入到document中的功能。所以最终选择使用插件在编译的时候就导入所有svg文件，解决了动态导入的问题，让业务逻辑更流畅。// 引入/src/assets/icon-svg/文件夹下的所有svg文件。svg是一种 xml语言，svg作为html标签使用的时候，除了svg标签。中引入即可，详情可参阅。
vue3项目中使用vite-plugin-svg-icons插件
weixin_43676252的博客
12-28 639
那么 svg格式的图片，可以通过插件打包成svg地图，通过ID来使用，一次加载，动态使用，图片无需懒加载，真实项目中，其实可以把下面这段代码封装成一个组件来使用，就不用占用3行位置了。png格式的图片可以合成精灵图，然后根据定位使用。完成以上操作，就可以在页面中正确展示svg图片了。
vue3 + vite 使用 vite-plugin-svg-icons 插件显示本地 svg 图标的方法
2301_80826038的博客
09-11 797
vue3 + vite 使用 vite-plugin-svg-icons 插件显示本地 svg 图标的方法
vue3使用vite-plugin-svg-icons加载SVG图片
enhenglhm的博客
03-30 922
svg图片在vue3项目中进行使用
vite-plugin-svg-icons 用法
于坤
08-30 2609
提供了一种简便的方法来在 Vue 3 项目中管理和使用 SVG 图标。通过这个插件，你可以轻松地将本地的 SVG 文件转换为 Vue 组件，从而在项目中轻松使用这些图标。配置和使用非常简单，并且可以通过自定义symbolId和组件来满足不同的需求。
vue3中使用插件vite-plugin-svg-icons
Anyuegogogo的博客
10-03 2555
在vue3 + vite 项目中使用svg图标，vue3中使用插件vite-plugin-svg-icons
vite-plugin-svg-icons:Vite插件可快速创建SVG精灵
03-06
vite-plugin-svg-icons English | 用于生成svg精灵图。 特征 预加载项目运行时会生成所有图标，并且只需要操作一次dom。 高性能的内置缓存，只有在修改文件后才会重新生成。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
【亲测免费】 Vite Plugin SVG Icons 使用指南
gitblog_00880的博客
08-22 635
Vite Plugin SVG Icons 使用指南 1. 项目目录结构及介绍 vite-plugin-svg-icons/ ├── src/ # 核心源代码目录 │ ├── index.js # 插件主入口文件 │ └── ... # 其他辅助或配置文件 ├──...
在Vue 3 和 Vite 项目使用 vite-plugin-svg-icons
qq_44136028的博客
03-25 665
【代码】在Vue 3 和 Vite 项目使用 vite-plugin-svg-icons。
[vue3] 通过vite-plugin-svg-icons插件显示svg图标
weixin_49965757的博客
12-04 1511
四、创建缓存的图标文件夹（需和vite.config.js配置文件中插件地址一致）一、安装vite-plugin-svg-icons插件。五、封装SvgIcon.vue组件导入进行全局引用。二、在vite.config.js文件中配置插件。三、在main.js入口文件引入注册脚本。创建组件SvgIcon.vue。
Vite Plugin SVG Icons 使用教程
gitblog_00075的博客
08-08 384
Vite Plugin SVG Icons 使用教程 1. 项目的目录结构及介绍 vite-plugin-svg-icons/ ├── README.md ├── package.json ├── src/ │ ├── index.ts │ ├── plugin.ts │ └── utils/ │ ├── cache.ts │ └── dom.ts ├── ts...
Vite for Vue项目中使用vite-plugin-svg-icons插件加载svg图标为组件使用
Wrysmile0308的博客
02-23 4617
Vite for Vue项目中使用vite-plugin-svg-icons插件加载svg图标为组件使用
vue3项目全局安装vite-plugin-svg-icons
ydyd16的博客
10-26 527
示例在登录页面组件中引用注：因为在第六步钟已经全局引入并且注册过svg的组件，所以在项目内，可以直接引入//有闭合标签的写法//单标签的写法以上为个人学习资料，仅供参考。
vite-plugin-svg-icons
07-27
Vite-plugin-svg-icons是一个用于Vite构建工具的插件，它可以方便地将SVG图标作为Vue组件导入并使用。通过使用这个插件，你可以以一种更模块化和可复用的方式使用SVG图标，而无需手动处理SVG文件。它会自动将SVG图标转换为Vue组件，并将其导入到你的项目中，使你可以直接在代码中使用它们。这个插件还具有一些其他功能，比如支持自定义图标目录和文件名规则等。要使用vite-plugin-svg-icons插件，你可以在Vite项目中安装并配置它，然后按照文档中的说明来使用SVG图标。希望这能帮到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值