在封装好svg的项目中使用自己的新svg图标不显示问题

最新推荐文章于 2025-03-26 15:12:37 发布
最新推荐文章于 2025-03-26 15:12:37 发布
阅读量1.8k 收藏
点赞数
分类专栏： svg 前端 svg图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41796860/article/details/100135980
版权

最近我接手了一个已经完成的项目（这个项目使用的是封装好的svg）优化其中的某些地方，其中一个就是将项目原来的有些图标替换为自己的，出了点小插曲，

插曲一

咦？我的图标放进去咋就不显示呢？！！
在这里插入图片描述
定位了好久都没有头绪，怎么就出不来？等下午太阳下去了，我的电脑屏幕不反光了，才发现其实是有图标显示的，只是颜色太浅没看见··~~

插曲二

那我的图标为啥颜色和人家的不一样呢，F12查看对比样式，尝试修改都无济于事，最终打开svg图的源代码发现我自己下的图标里面都有颜色填充
在这里插入图片描述
只要去掉这个填充色，再试试就OK了
在这里插入图片描述

「Vue组件化」封装SVG图标
拥抱AI Design
07-18 817
首先创建一个用于加载SVG文件的Vue组件。将SVG文件放在项目的某个目录下，例如components/svgIcon/。创建一个函数来动态导入SVG文件，并注册到Vue组件中。在项目中通过组件标签使用SVG图标。
Vue2后台管理项目封装使用svg图标
ssxx_zzyy_baba的博客
03-12 967
此作者很懒，什么也没有留下如有错误欢迎大佬指教。
vue配置svg，图标显示不出来
qq_35119405的博客
05-14 2万+
在vue中配置处理svg文件，结果图标显示不出来也不报错 正常的应该如下图，shadow-root下面还有dom节点： 根据网上的步骤 https://www.cnblogs.com/luoxuemei/p/12154835.html 重新检查配置的步骤，发现没有问题 解决： 如果碰到这个问题，直接把关于svg这段的配置全部删掉 如果问题依旧，浏览器也不会报错，则可以确定是整个vue.config.js文件没有生效，检查配置前的代码是否有问题造成了堵塞（代码往后执行不下去） 本人
html svg dom操作,无法在HTML DOM中显示已解析的SVG节点。为什么？
weixin_35907598的博客
06-27 261
在下面的代码中，我尝试以两种不同的方式在屏幕上创建一个SVG圆。无法在HTML DOM中显示已解析的SVG节点。为什么？var body = document.getElementsByTagName('body')[0];var vis = document.createElementNS("http://www.w3.org/2000/svg", "svg");body.appendChild...
vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg
qq1114565087的博客
06-22 4985
注意： 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的) 还有就是可能是创建的icons不在src根目录（2.x最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，3.0正常，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样
Vue中使用导出来的svg icon时有的icon无法显示的问题
qq_41892833的博客
06-29 2963
Vue中使用导出来的svg icon时有的icon无法显示的问题 正常显示如下图; 无法显示的图标如下图： 解决方法： 如下图所示，svg文件的路径替换成对应的http路径。
若依前后端分离框架SVG加载不存在时显示默认图标
weixin_40660198的博客
09-20 500
标签： 块中引入import svgIcons from '@/views/components/icons/svg-icons' methods方法： ​​​​​​​getClass(name){ if (svgIcons.includes(name)) { return name; } else { return "temp"; } },
Vue3+vite项目 引入svg图标并使用（封装svg组件）
最新发布
蓝胖子的博客
03-26 961
Vue3+vite项目 引入svg图标并使用（封装svg组件）
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
如何使用Svg矢量图封装引用到vue3项目中
炑焽的博客
08-30 2419
在现代前端开发中，SVG（可缩放矢量图形）因其高质量和灵活性成为了图标和图形设计的热门选择。对于 Vue 3 项目而言，将 SVG 图标封装和引用到项目中不仅能提升性能，还能带来更高的可维护性和一致性。SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。这种做法不仅优化了开发流程，也提升了用户体验。
RuoYi-Vue——图标使用
s_156的博客
06-30 3702
使用的小伙伴们，是否有遇到找图标的烦恼。若依框架里图标分两种，
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 6089
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
svg模糊或不显示问题
weixin_45240168的博客
04-17 8079
问题简述 １．项目中使用的ｓｖｇ在苹果手机移动端，微信内置链接打开显示模糊。 ２.　经过查找资料，可以使用＜ｏｂｊｅｃｔ＞标签来嵌套ｓｖｇ可以解决ｓｖｇ模糊问题。 ３.　使用＜ｏｂｊｅｃｔ＞标签引发的问题，部分ｓｖｇ失去了点击事件的功能，经查证，不能点击的ｓｖｇ是因为在＜ｏｂｊｅｃｔ＞标签内的点击事件失效，把点击事件添加到父级元素即可。 ４.　经过一天时间，大量的ｓｖｇ不显示，原因是＜ｏｂｊｅｃｔ＞标签存在浏览器兼容问题，在手机其他浏览器中均可正常显示，但是使用微信内置的浏览器打开ｓｖｇ就不显示。 问题分析
vue(webpack3.X)项目中如何使用.svg图标，你是否遇到正确配置却无法显示？
lelehouse的博客
01-15 3948
具体文字配置可以参考这个文章https://www.jianshu.com/p/7e65608ddc0a 项目配置，可到github查看，转自该仓库https://github.com/Hugo-Jiang/icon-componentde , 如何所以的配置你都发现完全正确，却还不能正确显示， 需要注意检查package.json中svg-sprite-loader 的版本号，你有可能下载的 4...
vue-cli3+ 打包部署到服务器后，svg/jpg/png在iphone上无法正常显示 -- 工作笔记
simper_boy的博客
12-22 1843
用vue-cli3初始化项目配置完，然后打包部署到服务器上，svg图片在iPhone不能正常显示（.png格式可以显示），在安卓可以正常显示。 下面是我的做法 我是用img标签引入 <div class="CPRdiv" @click="mapLink('CPR')"> <img class="CPR" src="@/assets/images/CoastalP...
img src请求后台，加载图片问题（svg不显示）
热门推荐
jiandan217的博客
01-26 3万+
今天项目要求后台管理系统中的图标和图片，于是楼主开始写代码，把图片存储到oracle数据库，取数数据后转化为流写入reponse，设置reponse头部，标识返回类型，正常图片类型都没有问题，png，jpg都可以正常加载，但是svg却不能显示，于是博主到处查资料也没有查到，因为src正常加载svg图片是显示的，所以一定有办法，最后对比了一下正常加载图片与后台返回流的reponse的响应头;
React项目中SVG图标管理新工具Reicons使用指南
在React项目中，使用SVG图标通常涉及将SVG文件直接导入到React组件中，或通过图标字体（如Font Awesome）来使用。然而，直接使用SVG文件可能会导致项目中的图标管理变得复杂和繁琐。当项目变大时，维护和更新图标的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值