vue-cli3引入svg-icon正确姿势

最新推荐文章于 2025-07-03 14:07:19 发布
最新推荐文章于 2025-07-03 14:07:19 发布
阅读量1w 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 禅あ思之aurora 禅あ思之研发管理 禅あ思之前端问题集中地 文章标签： vue icon svg-icon 项目 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/alnorthword/article/details/86582685
本文档详细介绍了在vue-cli3项目中如何正确引入和使用svg-icon，包括创建icon组件、处理下载的图标、配置svg-sprite-loader以及在main.js中全局注册组件。通过这些步骤，可以有效地管理和统一项目中的图标，简化开发流程并便于后期维护。

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

在博客的前边已经介绍前端svg-icon的使用.为啥要这样做,我们都知道任何一个项目到上线经过一段时间的UI设计,开发,测试等流程,为了统一管理项目中所使用的icon,也是为了后期的更改,更为了多人开发的使用,这样统一引用,给开发带来很好的收益以及减少开发时间,也为了后期更好的维护,下面我以项目实列来说下(vue-cli3脚手架构建):

项目构建生成目录:

在这里插入图片描述

在构建的项目中在src的components目录下新建一个 icon-svg.vue的文件,当然这个名字可以随便定义,但是不能太随便,要满足vue的命名要求哦,我在项目中src的components的commons下新建个 icon-svg.vue,目录结构如下:

在这里插入图片描述

接下来我们要在新建的icon-svg.vue写上代码:

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue3.0项目中添加svg图标
ZhuTianLunHui的博客
04-07 551
vue 3.0 项目中 添加svg图标
vue3.0 引入svg-icon组件
light_guang_IF的专栏
01-21 739
从vue2.0的svg-icons升级到 vue3新特性写法
vite-plugin-svg-icons的取代方案
最新发布
xiangfei150702的博客
07-03 823
在使用vite-plugin-svg-icons时，项目显示不出svg。具体原因不清楚。官方文档 二、新建uno.config.ts 三、修改vite.config.js，导入unocss插件 四、修改main.ts文件 五、使用 参考文档：告别 vite-plugin-svg-icons！使用 @unocss/preset-icons 实现 SVG 本地加载
vue-引入SVG图标
Link_Starts的博客
12-22 1451
SVG: 矢量图png,jpg: 图片。
Vue3如何引入iconfont
HaushoLin的博客
12-02 3529
本次采用的免费字体图标是iconfont。
vue 项目引入 svg
qq_41821445的博客
05-23 3263
url-loader是一款由Webpack社区贡献的插件，它能够将小尺寸的文件转换为Base64编码的URIs直接内联到你的代码中，而大文件则会交给file-loader处理。注意，如果url-loader的配置的 test 中有校验 svg 类型时，需要配置 exclude忽略掉存放 svg 文件的文件夹。创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。require.context参数介绍。
关于vue-cli4 使用 svg-sprite-loader
hy116420的博客
02-25 1322
vue-cli4 使用 svg-sprite-loader 不得不说一句，网上的文章大多有点坑，很多都是相互复制，我被别人坑了。废话少说，文章具有时效性，这里只是针对我遇到的情况，我使用的vue-cli使用的版本是4.5.11。 vue.config.js module.exports = { lintOnSave: false, chainWebpack(config) { const svgRule = config.module.rule('svg');
vue3+vue-cli 如何使用svg图标
weixin_42710827的博客
06-28 494
一、npm install svg-sprite-loader -D。本项目是多入口项目，svg写在单独子项目里，用法与单入口一致；icons/svg下存放svg图标，二、配置vue.config.js。四、封装SvgIcon组件。index.js代码如下。item是svg图标名称。三、配置main.js。三、本项目目录如下,
vue3-ts，vue-cli5封装svg组件
weixin_46850857的博客
12-13 726
创建 index.ts；console.log(svgRequire.keys())能打印出非空数组就是导入成功了。4.安装svg-sprite-loader解析svg图片，然后配置vue.config.js文件。在src下创建icons文件夹，icons文件夹内创建svg文件夹用来存储.svg文件；6.在.vue文件中使用，iconClass传的是要展示的.svg文件的文件名。5.配置vue.config.js。2.创建icons文件夹。3.在main.ts导入。
vue-cli svg-sprite-loader
qq_40822000的博客
11-22 1021
在vue-cli中使用svg-sprite-loader 新手上路，有什么不对的地方请不吝赐教 svg-sprite-loader是干啥的？ 当你有很多的svg图片的时候，你可以使用svg-sprite-loader来把图片打包成雪碧图（不是心飞扬哪个雪碧），然后使用时每个svg对应一个name标识。 svg-sprite-loader安装 npm install svg-sprite-loade...
vue3中引入svg矢量图
DZQ1223的博客
11-24 1313
在项目开发过程中，我们经常会用到svg矢量图,而且我们使用svg以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们svg文件比img要小的很多，放在项目中几乎不占用资源。
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev # when you're happy with the changes yarn build 预览
vue3 + vite 使用svg-icon
weixin_48519850的博客
03-25 1588
vite-plugin-svg-icons 的使用
vue3.0项目中如何优雅使用svg
weixin_43926335的博客
05-26 844
安装svgo svg-sprite-loader cnpm install svgo cnpm install svg-sprite-loader --save-dev 新建vue.config.js const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { publicPath: process.env.NODE_ENV ==.
iconfont在项目中的使用
Sadhu_liang的博客
10-17 1080
iconfront使用方式 本文主要描述iconfront如何在vue中使用 文章目录iconfront使用方式前言一、使用步骤1.进入阿里图标2.注册并登录阿里用户3.选择图标4.添加项目5.下载至本地6.解压文件7.导入文件8.使用iconfont总结 前言 字体图标是为解决图片放大或缩小后失真、整站图片过多请求和整站体积过多的问题。字体图标可以和图片改变透明度、旋转等，其本质是文字所以也可以改变颜色、添加阴影等效果而且一般来说比图片体积会更小并被绝大部分浏览器支持。例如常见的购物车图标，按钮图标
vue3 组件篇 Icon
秋来九月八
11-06 1130
Icon（图标）组件是一种常见的用户界面元素，用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。
vue3 动态图标icon ＜el-icon
qq_36164225的博客
02-07 3090
在表格中使用，渲染出每一行不同的图标。
Vue3 项目引入阿里 iconfont 图标和字体
热门推荐
weixin_42365757的博客
11-02 1万+
Vue3 项目引入阿里 iconfont 图标和字体
【vue3组件封装】Icon图标组件
aaaaapipi的博客
10-22 1900
icon组件封装
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

禅思院

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值