vue3 动态 svg 图标使用

于 2024-09-13 17:44:26 发布
阅读量71 收藏
点赞数
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/142214967
版权

前言 

在做后台管理系统中，我们经常会用到很多图标，比如左侧菜单栏的图标

当然这里 element-ui 或者 element-plus 组件库都会提供图标

但是在有些情况下 element-ui 或者 element-plus 组件库提供的图标满足不了我们的需求时，这个时候我们就需要自己去网上找一些素材或者UI给我们一些.svg的图标文件

那么这个时候我们如何像使用组件一样很方便地去使用？只需要在需要的地方引入组件、传入图标名字就可以了

vite项目中

如果是vite项目，那么我们就需要用到一个插件 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
小白小白从不日白
关注
专栏目录
订阅专栏
vue3中使用svg图标
weixin_62216253的博客
04-22 1447
vue3中使用svg
vue中使用svg图标
m0_55557411的博客
03-24 1074
vue中使用svg图标
vue3中svg图标的封装与使用
Anlittlecat的博客
07-04 380
vue.config中定义svg图标目录。index.js获取svg文件。
如何在VUE项目中使用svg图标
热门推荐
m0_57524265的博客
07-01 1万+
本文手把手带你一起体验SVG图标的使用，解决大家使用图标的苦恼！
vue2动态使用自定义svg图标
wang1811539550的博客
07-04 284
3、src下创建icons文件夹，并在其中创建svg文件夹用于存放自己的svg图标，创建index.js文件。2、在components文件夹中创建SvgIcon.vue组件。5、组件已经全局挂载，无需再次引入，可直接在需要的地方使用。1、安装svg-sprite-loader包。index.js文件内容，进行全局挂载。4、配置vue.config.js文件。
vue3 封装svg图标
2301_81274510的博客
07-15 1744
安装插件1. 修改注意：我的 svg 存放路径是根目录下的./public，多数情况下放在。2.修改main.js，增加一行代码。3.使用示例
vue3使用svg图标
m0_58984409的博客
03-27 120
第一步：将选好的图标加入购物车。第二步：将图标添加至项目。最后点击复制就可以使用了。
vue3 svg图标封装及使用
weixin_44088179的博客
08-04 501
在src/assets中创建icon文件夹用来放icon图标。
Vue项目使用svg图标
qq_34378032的博客
10-26 8895
Vue项目使用svg图标一. svg图标介绍二. svg图标的获取方式三. Vue项目使用svg图标的环境配置四. Vue项目使用svg图标的项目配置 一. svg图标介绍 svg图标是用作Web应用程序或移动应用程序内的图标或图像按钮。 图标使用svg的优点： 可以轻松地按比例放大和缩小图标，具体取决于要在应用程序中显示的位置以及显示应用程序的屏幕尺寸。 svg图标具有优于位图图形的优点，即按比例放大或缩小时它们仍然看起来不错。 位图图形在按比例放大时趋于像素化，而在按比例缩小时会失去质量（像素）。
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过...
vue动态加载SVG文件并修改节点数据的操作代码
11-19
在搜索解决方案时，我们发现大部分搜索结果涉及SVG图标，而不是大图。因此，我们调整搜索关键词，找到了几种动态加载SVG图片的方法，如通过`<image>`, `<object>`, 或者`<embed>`标签。然而，这些方法只能插入SVG，...
vue动态渲染svg、添加点击事件的实现
10-15
3. **转换SVG为Vue虚拟DOM**：将获取到的SVG DOM转换为字符串，然后使用`Vue.extend()`创建新的Vue组件，并使用`$mount()`方法将该组件挂载到页面上的指定元素。 4. **为SVG添加点击事件处理器**：将点击事件处理器...
vue3-ts 编辑svg 合并svg
06-13
在Vue3中，还可以利用`teleport`功能将SVG元素直接注入到DOM的特定位置，这样可以实现SVG图标的动态加载和合并。 总之，Vue3和TypeScript的组合为SVG的编辑和合并提供了强大的工具和灵活性。通过合理选择和集成相应...
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 567
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 651
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1177
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
element-plus组件问题汇总
最新发布
xiaoxian_xian的博客
09-12 230
element-plus组件问题汇总
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 384
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 376
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小白小白从不日白

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

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

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

打赏作者

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

抵扣说明：

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

余额充值