在微信小程序中使用svg图标

最新推荐文章于 2024-09-24 10:09:26 发布
最新推荐文章于 2024-09-24 10:09:26 发布
阅读量2.7k 收藏 6
点赞数 5
分类专栏： 前端 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58017233/article/details/140049228
版权

请添加图片描述
在项目中引入图标组件是很常见的一个问题，但是这里我在小程序中引入图标组件的时候报错了！
这个主要原因是
微信小程序上不支持 SVG 字体图标！

 <image src="./xx.svg"/>

所以参考微信开放社区
我们想要在微信小程序中使用svg图标组件可以将其进行转化转化为base64之后进行使用
这里我们用到了

https://icomoon.io/ 将svg图标进行打包
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
成功之后下载并引入项目
由于微信小程序不方便直接使用外部字体库，普遍的做法，是使用transfonter ，将外部字体，转化成base64格式，之后进行使用
①
在这里插入图片描述
② 将下载之后的字体图标文件中的

文件选中之后在transfonter 转化为base64的形式在这里插入图片描述1.使用 transfonter，将字体文件上传。
2.参数选填好后，convert一下。

合并字体图标

最低0.47元/天 解锁文章
微信小程序如何使用svg矢量图标
weixin_45465881的博客
05-06 6410
在微信小程序中，经常会用到小图标来装饰界面，我们常用的方法就是引用第三方的图标，但会存在收费或者找不到合适的图标，这时候我建议可以自行编写svg图标代码，就可以随心所欲的使用。具体的效果图如下：那么在微信小程序中，具体怎样引用自定义的图标的呢，大概的步骤我浅浅的分享如下：</
uniapp，微信小程序中该如何导入svg图标
最新发布
m0_65324703的博客
02-07 863
uniapp，微信小程序中该如何导入svg图标
微信小程序——高效加载SVG代码图标全攻略
Jiaberrr的博客
09-24 2655
通过以上步骤，我们可以在微信小程序中轻松加载SVG代码图标，为用户提供更加美观和流畅的体验。希望本文能帮助您在微信小程序开发中更好地运用SVG图标。
微信小程序中使用 SVG位图
资深全栈开发工程师
07-09 9072
请根据你的具体需求选择适合的方式来在微信小程序中使用 SVG。同时注意，微信小程序对 SVG 的支持可能存在一些限制，不同版本的微信客户端对 SVG 的支持程度也可能有所差异，建议在开发前进行兼容性测试。
微信小程序里使用SVG矢量图标方法
weixin_44960636的博客
07-31 2558
把SVG图标上传到网站服务器上，在浏览器中输入SVG图标地址测试是否能正常打开，就是把上面的代码编程一个图片地址。同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放。可以在百度搜索’svg在线转BASE64’（可能会有问题，如下）还是建议第二种，珍惜小程序的每一行代码。一、SVG图标转换为BASE64编码。二、使用运程地址引入SVG图标。
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
微信小程序中使用SVG
热门推荐
tao_meng_的博客
04-15 1万+
最近在作一个微信小程序的项目，需要使用svg引入矢量图标，总结一下svg在小程序中的使用。 SVG 简介 什么是SVG SVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。 SVG的优势 与其他图像格式相比，使用SVG的优势在于： SVG 可被非常多的工具读取和修改 SVG 与JPEG和GIF图像比起来，尺寸
微信小程序里引入SVG矢量图标的方法
12-13
同时还是因为微信小程序的限制，我们要先把svg的xml编码转码为base64编码 首先，说明以下我们常见的svg矢量图是什么？下面引用百度百科的话： svg是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维...
如何优雅的在微信小程序使用 SVG 字体图标
pingan8787
07-28 1831
本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。 最近在重构一个项目，主要是做 H5 端和小程序端，这次打算开始多做总结啦，之前已经总结一篇《如何优雅的管理 HTTP 请求和响应拦截器？》 。 如果大家还有其他方案，欢迎一起探讨哈~ 喜欢本文的朋友给个赞????鼓励一下哈~ 一、需求思考和方案设计 本文介绍的项目是使用 Taro框架进行多端开发，目前主要适配 H5 端和微信小程序端。项目使用的字体图标库内部维护，目前托管在 iconfont 上。
微信小程序里面如何使用svg图片
榴莲不好吃的专栏
12-07 4960
首先准备一段svg代码如下: 然后打开下面的网址, https://codepen.io/jakob-e/pen/doMoML 将svg代码贴到下图中红线圈起来的位置,会自动转成base64, 然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果. 最后在小程序里面使用,如下 结果:
微信小程序-自动生成svg雪碧图，支持微信小程序rpx单位
08-06
SvgSprite 自动生成svg雪碧图，支持微信小程序rpx单位 安装使用 下载安装成功后，选中所要处理的svg图标拖拽到工具中即可自动转化，处理完成后将在本地同级目录生成一个sprite文件夹，里面包含合并的雪碧图以及样式 界面预览 下载 暂时支持mac版 mac版
微信小程序开发常用的1600个PNG图标
03-08
微信小程序开发常用的1600个PNG图标
今天，小程序正式支持 SVG
10-17
主要介绍了小程序支持SVG，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 SVG图标使用
小二的博客
05-24 974
微信小程序不能直接是用SVG显示图标，需要转成Base64编码，， 可以在这里在线转：https://codepen.io/jakob-e/pen/doMoML 把SVG代码直接复制到图中绿色框中，，就自动转成功了，，在复制一下就好了，， 使用的时候，直接在显示的位置增加一个 样式就好了，类似如下： ...
在小程序中如何使用svg图标
weixin_43923808的博客
12-13 2679
在小程序中如何使用svg图标
微信小程序中使用svg字体图标教程 ——图解三步，很清晰
最初都是小白
06-01 3276
小程序中想使用字体图标其实很简单： 第一步：首先在阿里巴巴矢量图库https://www.iconfont.cn/search 里面下载你想要的小图标： 下载时选择svg下载： 第二步：打开 https://icomoon.io 把你刚刚下载的svg拖拽到这里： 第三步：在线转换base64编码字体，打开 https://transfonter.org/ ： 下载完成后你会得到第二个文件夹，解压： 接下来就可以使用了： 注意： 字体图标就相当于字体直接用font-size控制大小，color
微信小程序怎么加载svg 图标
06-08
微信小程序可以通过使用 `wx.createInnerAudioContext` 方法来加载 SVG 图标。具体步骤如下： 1. 在小程序项目中添加 SVG 图标文件，通常以 `.svg` 作为文件扩展名。 2. 在需要使用 SVG 图标的页面或组件中，使用 `<svg>` 标签来创建 SVG 元素。 3. 在 `<svg>` 标签中添加 `<use>` 标签，用于引用 SVG 图标文件。例如： ```html <svg class="icon" aria-hidden="true"> <use xlink:href="/images/icons.svg#icon-name"></use> </svg> ``` 其中 `xlink:href` 属性指向 SVG 图标文件的路径和图标名称，例如上面的示例中，SVG 图标文件的路径为 `/images/icons.svg`，图标名称为 `icon-name`。 4. 在 CSS 样式中设置 `.icon` 类的样式，例如： ```css .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } ``` 这样可以让 SVG 图标自适应容器大小，并且填充当前文本颜色。 注意：在微信小程序中，SVG 图标文件需要使用工具将其转换为 Base64 编码的字符串，并且在页面或组件中使用 `wx.createInnerAudioContext` 方法来加载该字符串。可以使用第三方工具库，如 `svg-to-dataurl`，来将 SVG 图标文件转换为 Base64 字符串。具体操作方法可以参考微信小程序官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值