uniapp，微信小程序中该如何导入svg图标

已于 2025-02-07 13:38:49 修改
阅读量900 收藏 10
点赞数 5
文章标签： uni-app
于 2025-02-07 13:38:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65324703/article/details/145492977
版权

1.第一步需要让项目管理员把你拉入到iconfont组里面

2.进入之后点击上传图标至项目

3.上传完毕之后会有审核，审核通过之后，点击下载至本地

4.下载到本地之后是一个压缩包，解压之后找到 对应的文件 iconfont.css iconfont.ttf iconfont.woff iconfont.woff2 这4个文件 

5.然后使用前面提到的压缩包中的文件替换掉原来uniapp项目中中的static文件夹下的iconfont中的依赖文件就可以了。

5.需要注意是是，替换之后可能会出现报错  例如 ： Module build fai

最低0.47元/天 解锁文章
大溪地C
关注
uniapp -- 发布微信小程序主包大小超过2M限制解决思路
King Saj
11-21 1086
本文记录一下解决该问题的一个方向，通过分包优化、代码压缩、资源管理等多维度手段，跨越那2M的界限。创建分包目录结构：在项目的根目录下，为每个子包创建一个单独的文件夹，并在项目配置文件app.json中声明这些分包。配置页面路径：确保在app.json中的pages数组里正确引用了分包下的页面路径，使用//格式。优化资源加载：利用分包机制，将图片、音频等静态资源随所属功能一同放入对应子包，减少主包体积。删除冗余代码：定期审查代码库，移除未使用的变量、函数和组件，避免不必要的代码膨胀。
微信小程序转 uni-app（系列一）
小蓝鲸的博客
04-22 7259
一、搭建uni-app项目框架 1、通过Hbuilder可视化界面 1)下载安装 开发工具HBuilderX：官方IDE下载地址 2)创建uni-app 点击工具栏里的文件 -> 新建 -> 项目 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。 注：Hello uni-app模板 ，是官方的组件和API示例 3)运行uni-app 浏览器运行：进入hello...
微信小程序里引入SVG矢量图标的方法
10-16
主要介绍了微信小程序里引入SVG矢量图标的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app 如何使用svg
热门推荐
BradenHan的专栏
04-27 1万+
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
uni-app小程序实现svg组件
qq_38736186的博客
10-21 3553
3.封装svg组件。在components文件夹下新建 components\cus-svg\cus-svg.vue 组件。实现思路，将svg的html字符串的URI编码，作为view的背景图。并且将svg.js导出的对象挂载到全局，便于全局使用。至此svg资源便已经封装好。2.封装svg换色函数。并将其挂载到全局函数。
uniapp 开发小程序使用iconfont彩色图标
程序猿小白的博客
12-18 2692
1、在阿里图标官网添加需要的图标到你的项目中，然后下载文件到本地：https://www.iconfont.cn/ 2、解压下载后字体文件，如下： 3、在第二步解压的目录中，打开cmd： 输入命令行：npm install -g iconfont-tools 命令结束后，运行：iconfont-tools 出现如下图所示的内容，按图示输入文件名即可（或者一直回车） 4、以上命令运行结束后，会在目录中生成iconfont-weapp文件夹： 进入文件夹，里面的...
微信小程序如何使用svg矢量图标
weixin_45465881的博客
05-06 6465
在微信小程序中，经常会用到小图标来装饰界面，我们常用的方法就是引用第三方的图标，但会存在收费或者找不到合适的图标，这时候我建议可以自行编写svg图标代码，就可以随心所欲的使用。具体的效果图如下：那么在微信小程序中，具体怎样引用自定义的图标的呢，大概的步骤我浅浅的分享如下：</
uniapp 使用svg
~~~
02-24 2869
uniapp 使用svg
在微信小程序中使用svg图标
weixin_58017233的博客
06-28 2779
小程序中使用svg图标！！！
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
uniapp - 微信小程序 - 自定义底部tabbar
06-26
同时，需要在uniapp项目中引入微信小程序的适配层，这样uniapp的代码才能在微信小程序环境中正常运行。 三、自定义tabbar设计 设计自定义tabbar时，通常需要考虑以下几个方面： 1. 图标：可以使用SVG图标或者网络...
微信小程序——高效加载SVG代码图标全攻略
Jiaberrr的博客
09-24 2727
通过以上步骤，我们可以在微信小程序中轻松加载SVG代码图标，为用户提供更加美观和流畅的体验。希望本文能帮助您在微信小程序开发中更好地运用SVG图标。
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
HouGISer的博客
12-21 7277
文章目录小程序引用图片的几种方式如何根据主题色改变图标颜色？ 小程序引用图片的几种方式 这一期我们直入主题，教大家如何动态改变图标的颜色。 首先，我们知道小程序引用图片的方式并不多。目前小程序并不支持直接引用svg文件，也不支持直接引用本地文件。总结下来，可行的方法有如下几种： img的src引用 云文件的cloudID 图片的https链接 图片base64格式 字体图标 如uniapp的u...
svg图标封装--基于vue2适配uniapp全端
2302_79245293的博客
06-11 832
注意:已注册为全局组件,可直接在页面中引用(注意,宽高有默认值可以不传参数,xin是文件名)在static目录下新建svg目录,后将所有svg图标都放到此文件夹。(注意：在根目录下新建components文件夹)在main.js文件下。
uniapp在web端怎么使用svg图标呢
@微你
01-10 1566
uniapp h5开发中 如何使用iconfont中的svg图标呢
【小程序】uniapp自定义图标组件可动态更换svg颜色
qq_45406325的博客
09-23 2621
通过图标名称加载对应svg，size参数调整图标大小，color参数调整图标颜色。
Uniapp使用svg
qq_39443970的博客
10-24 7850
uniapp基础使用svg
uniapp image 引入svg图片更改颜色
最新发布
12-12
在uniapp中使用SVG图片并更改其颜色，可以通过以下几种方法实现： 1. **使用`uni-icons`组件**： uniapp提供了`uni-icons`组件，可以直接使用SVG图标，并且可以通过`color`属性更改图标颜色。 ```html <uni-icons type="home" size="30" color="#ff0000"></uni-icons> ``` 2. **使用`image`组件并通过CSS滤镜更改颜色**： 如果你使用的是自定义的SVG图片，可以使用`image`组件并通过CSS滤镜来更改颜色。 ```html <template> <image src="@/static/icons/home.svg" class="icon"></image> </template> <style> .icon { filter: invert(43%) sepia(100%) saturate(5000%) hue-rotate(200deg); } </style> ``` 这种方法适用于简单的颜色更改，但对于复杂的SVG图片，可能需要更复杂的CSS滤镜。 3. **使用`inline` SVG并通过CSS更改颜色**： 将SVG图片直接嵌入到HTML中，然后通过CSS样式来更改颜色。 ```html <template> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2L2 22h20L12 2z"/> </svg> </div> </template> <style> .icon svg { width: 24px; height: 24px; color: #ff0000; } </style> ``` 这种方法允许你完全控制SVG的颜色和其他样式。 4. **使用`background-image`并通过CSS滤镜更改颜色**： 类似于使用`image`组件，可以通过CSS滤镜来更改背景图片的颜色。 ```html <template> <div class="icon"></div> </template> <style> .icon { width: 24px; height: 24px; background-image: url('@/static/icons/home.svg'); background-size: contain; filter: invert(43%) sepia(100%) saturate(5000%) hue-rotate(200deg); } </style> ``` 选择哪种方法取决于你的具体需求和SVG图片的复杂程度。如果只是简单的图标更改颜色，使用`uni-icons`组件或`inline` SVG会更方便。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值