微信小程序:图片转icon

svg方式

通过svg图片的方式也能实现自定义icon。但是相比第一种方式,svg图片可以修改颜色,并且缩放的失真率也比较低。不过小程序wxss并不支持加载本地的svg图片。我们可以通过在线(https://www.sojson.com/image2base64.html)svg转base64的方式在wxss中加载svg图片。
实现代码如下

<icon class="close-icon"></icon>
.close-icon {
  width: 20rpx;
  height: 20rpx;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUJnQUFBQVhDQVlBQUFGbUpyKzdBQUFBQVhOU1IwSUFyczRjNlFBQUFlTkpSRUZVU0EyZFZidFNBa0VROUNnQ0k2SE1JRk1qQXZnRjhEUHdGK1FiTU5CZkl2WkJGWmtQL3NBcXRFeElqTVNFczN0dis1aGI5KzdFcVJwbnBydG4yTnZkTzVNRFdKcW1TNFFXa3piY1dlS1psTEZvWHRGaFRPQmIwSlNmT1JtQUdSbVp3RzhQZEFpRTVGd0FvK3Z3cWtzZis4Q2J6S1ByU21BTktOWlV3QzdnYjB5QVRibEVONU1xRDJhMUxaalQzS2dzcmZpTGlZVWw4eWVzL1dvRnViV0NTSDdpbWtCb3A2UVoyMmtDRlhWb2F3R0lLelVnUHpZNDA2azROaFlPS2hEdWppSHZRQUxSQk03NzRnejVBUDRLZDhjalhHVFRrMzBScUpmd2llcENCRkZsYzRrYlNtcmlaNEhINk5PcThlQjRsVE5EY1JXSVY2aDU2Y2NCenExdmMyY0twa0dNSU1LbVRkMHozTnNCTHNlVWFlRW5jTG9TQWVmeVpObVNTQUw1KzBPYmFab1VpelBwNnA1QnVpTWxlY1JZWFkyQlFHRGxWOE9JZWw1b2wvYUY0aG8rOU02Y21EVU83MmxPYVlUb3lYYnRtVCtHZzJON3RBbEZlOVRsdlZncFA5L1BlNjQ0SnVlTVZyNG9GSGN4bGNGNCtmTExxRVppY0hzeFRVdWUzdHAvSXVvTll4Y2Y1bzhRWkkweFhZVDNHT2V4bEdmd1VDRWdOYXJnaHhVY3FkMjdpdFh3REY3eWh5c20zQXArQ1RyZW1aZHREOCtnWGZyRElCZncvOW9pSEJ5N3BvZWhhSSs2dmhkTGo3M0pHK0EzOEJIODNPZkVyRVhmNUI4UGVEazExamxtVkFBQUFBQkpSVTVFcmtKZ2dnPT0iIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQmdBQUFBWENBWUFBQUZtSnIrN0FBQUFBWE5TUjBJQXJzNGM2UUFBQWVOSlJFRlVTQTJkVmJ0U0FrRVE5Q2dDSTZITUlGTWpBdmdGOERQd0YrUWJNTkJmSXZaQkZaa1Avc0FxdEV4SWpNU0VzM3R2KzVoYjkrN0VxUnBucHJ0bjJOdmRPNU1EV0pxbVM0UVdremJjV2VLWmxMRm9YdEZoVE9CYjBKU2ZPUm1BR1JtWndHOFBkQWlFNUZ3QW8rdndxa3NmKzhDYnpLUHJTbUFOS05aVXdDN2diMHlBVGJsRU41TXFEMmExTFpqVDNLZ3NyZmlMaVlVbDh5ZXMvV29GdWJXQ1NIN2lta0JvcDZRWjIya0NGWFZvYXdHSUt6VWdQelk0MDZrNE5oWU9LaER1amlIdlFBTFJCTTc3NGd6NUFQNEtkOGNqWEdUVGszMFJxSmZ3aWVwQ0JGRmxjNGtiU21yaVo0SEg2Tk9xOGVCNGxUTkRjUldJVjZoNTZjY0J6cTF2YzJjS3BrR01JTUttVGQwejNOc0JMc2VVYWVFbmNMb1NBZWZ5Wk5tU1NBTDUrME9iYVpvVWl6UHA2cDVCdWlNbGVjUllYWTJCUUdEbFY4T0llbDVvbC9hRjRobys5TTZjbURVTzcybE9hWVRveVhidG1UK0dnMk43dEFsRmU5VGx2VmdwUDkvUGU2NDRKdWVNVnI0b0ZIY3hsY0Y0K2ZMTHFFWmljSHN4VFV1ZTN0cC9JdW9OWXhjZjVvOFFaSTB4WFlUM0dPZXhsR2Z3VUNFZ05hcmdoeFVjcWQyN2l0WHdERjd5aHlzbTNBcCtDVHJlbVpkdEQ4K2dYZnJESUJmdy85b2lIQnk3cG9laGFJKzZ2aGRMajczSkcrQTM4Qkg4M09mRXJFWGY1QjhQZURrMTFqbG1WQUFBQUFCSlJVNUVya0pnZ2c9PSIgaWQ9InN2Z18xIiBoZWlnaHQ9IjIzIiB3aWR0aD0iMjQiIHk9IjI4OC41IiB4PSIzODgiLz4KIDwvZz4KPC9zdmc+');
  background-position: unset;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

字体文件方式

阿里巴巴矢量图标库(iconfont.cn)

css方式

小程序wxss原生支持css3。所以可以通过css3方式实现自己想要的自定义icon。
1、仅用css代码便可以绘制一些基础的图形icon

<view class="icon"></view>
.icon {
  display: inline-block;
  width: 18rpx;
  height: 4rpx;
  background-color: red;
  transform: rotate(45deg);
}

.icon::after {
  content: "";
  display: block;
  width: 18rpx;
  height: 4rpx;
  background-color: red;
  transform: rotate(-90deg);
}

2、转base64方法


<icon class="close-equipment "></icon>

.icon-equipment {
    width: 72rpx;
    height: 72rpx;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAZFJREFUWIXtmD1OwzAUgL9E3bp05xL2wFoxM3EFR2LNGThD10ruEWBirroy2Dchi2cYWkemJPgRojRI/ZZW8fPLF/88RykAQgj3wCNwB6yYlgbYA9vlcvm6OMk8AbcTi0RWwANwE0KgCCE8ny7MgZcihPDO9NPUR1MyHxmAVXlpg3OuQjlmJ7SQBnrvqet60E2MMRhjRLHiEbLWDpIBcM6JY8VC3vtBMr/tK56yFKXU6CIRkVCa2BiD1roVi23xf3rNOcdut2tzSB5ENGXpGtBaY63FWtsu9Hjjuq7x3rftfTl+QjRCaTLnHFVV4ZxDKfVlxCKxfQhFCOEjFxSfPKKU+ibRRZyu2Gez2YwjtF6vs4kkHA6HbEx2Df1luw/JNenRIVlXWaGhi3Mo/09oTNJd14eoDkm2qwTJAZ0VipU3PRa6jolIX0xXbBeiKdNat8VQKUVVVe3vObEt7dNVzfvIFkbv/agLO/eiJqrUUzK7d+qrUI5ZCjWXlkhoSo4fi+bCvgS2wNulTTg6bAuY1ye9TyqGy6ncAsCCAAAAAElFTkSuQmCC');
    background-position: unset;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/773323.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis-Redis可视化工具Redis Insight下载及安装

下载 1、博主已经上传资源&#xff0c;点此下载 2、点此进入官方下载 2.1 点击Installing Redis Insight 2.2 点击Install on desktop 2.3 选择Install on desktop&#xff0c;点击Redis Insight is available for download for free from this web site从网站下载 2.4 下载…

中小企业适用的HTTPS证书

在当今数字化时代&#xff0c;企业的网站安全及其数据传输的安全是至关重要的。对于中小企业而言&#xff0c;选择适合的HTTPS证书&#xff08;即SSL证书&#xff09;是确保网站通信安全、增强用户信任和保护企业数据不可或缺的一步。下面将围绕中小企业适用的HTTPS证书进行深入…

【CT】LeetCode手撕—4. 寻找两个正序数组的中位数

目录 题目1- 思路2- 实现⭐4. 寻找两个正序数组的中位数——题解思路 3- ACM 实现 题目 原题连接&#xff1a;4. 寻找两个正序数组的中位数 1- 思路 思路 将寻找中位数 ——> 寻找两个合并数组的第 K 大 &#xff08;K代表中位数&#xff09; 实现 ① 遍历两个数组 &am…

【LeetCode:3033. 修改矩阵 + 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

如何在Qt使用uchardet库

如何在 Qt 中使用 uchardet 库 文章目录 如何在 Qt 中使用 uchardet 库一、简介二、uchardet库的下载三、在Qt中直接调用四、编译成库文件后调用4.1 编译工具下载4.2 uchardet源码编译4.3 测试编译文件4.4 Qt中使用 五、一些小问题5.1 测试文件存在的问题5.2 uchardet库相关 六…

GaussDB关键技术原理:高性能(四)

GaussDB关键技术原理&#xff1a;高性能&#xff08;三&#xff09;从查询重写RBO、物理优化CBO、分布式优化器、布式执行框架、轻量全局事务管理GTM-lite等五方面对高性能关键技术进行了解读&#xff0c;本篇将从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存…

Appium环境搭建,华为nova8鸿蒙系统(包括环境安装,环境配置)(一)

1.安装代码工具包 appium python client pip install appium-python-client 2.安装JDK 参考链接: ant+jmeter+jenkins从0实现持续集成(Windows)-CSDN博客 3.下载并安卓SDK 下载地址:AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载…

MySQL 8.0 架构 之 中继日志(Relay log)

文章目录 MySQL 8.0 架构 之 中继日志&#xff08;Relay log&#xff09;中继日志&#xff08;Relay log&#xff09;概述相关参数参考 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 来源|WaltSQL和数据库技术(ID:SQLplusDB) MySQL 8.0 OCP …

vue+openlayers之几何图形交互绘制基础与实践

文章目录 1.实现效果2.实现步骤3.示例页面代码3.基本几何图形绘制的关键代码 1.实现效果 绘制点、线、多边形、圆、正方形、长方形 2.实现步骤 引用openlayers开发库。加载天地图wmts瓦片地图。在页面上添加几何图形绘制的功能按钮&#xff0c;使用下拉列表&#xff08;sel…

【java高级】【算法】通过子节点 反向获取 树路径父节点 且不获取无关节点

有一个奇葩需求 要求 用户配置在某选择框的选项 例如 然后在选择时显示 用户配置的选项 依旧是返回树,但是只包含 选择的子节点。 以及涉及的父节点,树路径 不返回无关节点 【一般】我们开发中都是直接通过 树节点 返回 其下子节点 这个需求的确很奇葩。 而且还要考…

语音大模型引领自然交互新时代,景联文科技推出高质量语音大模型数据库

近期&#xff0c;OpenAI正式发布语音大模型GPT-4o&#xff0c;可以综合利用语音、文本和视觉信息进行推理&#xff0c;扮演一个个人语音交互助手。 在音频处理方面&#xff0c;它不仅能识别和转录多种口音和方言&#xff0c;改变语音的速度音调和振动&#xff0c;还能进行声音模…

CAS(compare and swap)

文章目录 CAS 的应用标准库的原子类自旋锁 CAS的ABA问题什么是 ABA 问题ABA 问题引来的 BUG相关面试题 CAS是一条CPU指令,就可以完成比较和交换这样的操作 我们假设内存中的原数据V&#xff0c;旧的预期值A&#xff0c;需要修改的新值B。 1.比较 A 与 V 是否相等。&#xff08;…

2024年7月4日 (周四) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 卸载工具 HiBitUninstaller: Windows上的软件卸载工具 《最终幻想14》画面升级后 著名…

【高级篇】第10章 Elasticsearch 集群管理与扩展

在本章中,我们将深入探讨Elasticsearch集群的管理与扩展策略,旨在帮助读者构建一个既能应对大规模数据处理需求,又能保持高可用性和弹性的系统架构。我们将从集群架构设计入手,解析不同节点的角色与配置,然后转向节点发现与配置同步机制,最后讨论水平扩展与容错策略,确保…

【Python实战因果推断】20_线性回归的不合理效果10

目录 Neutral Controls Noise Inducing Control Feature Selection: A Bias-Variance Trade-Off Neutral Controls 现在&#xff0c;您可能已经对回归如何调整混杂变量有了一定的了解。如果您想知道干预 T 对 Y 的影响&#xff0c;同时调整混杂变量 X&#xff0c;您所要做的…

系统提示我未定义与 ‘double‘ 类型的输入参数相对应的函数 ‘finverse‘,如何解决?

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

新火种AI|AI搜索挑战百度谷歌,重塑信息检索的市场?

作者&#xff1a;一号 编辑&#xff1a;美美 AI正在颠覆传统的搜索引擎市场。 随着ChatGPT等大型语言模型的火爆&#xff0c;AI搜索技术成为了公众和业界关注的焦点。这些技术不仅能够提供快速、准确的信息检索&#xff0c;还能够通过自然语言处理技术理解用户的复杂查询&am…

步进电机(STM32+28BYJ-48)

一、简介 步进电动机&#xff08;stepping motor&#xff09;把电脉冲信号变换成角位移以控制转子转动的执行机构。在自动控制装置中作为执行器。每输入一个脉冲信号&#xff0c;步进电动机前进一步&#xff0c;故又称脉冲电动机。步进电动机多用于数字式计算机的外部设备&…

vue的学习--day3

1、尝试使用json文件模拟增删改查 json server:准备一份自己的数据&#xff08;这里我用的是老师给的&#xff09;。 转到d盘&#xff0c;然后打开json文件&#xff1a; 下面模拟增删改查&#xff1a; 借助工具postman或apifox或apipost&#xff1a; 这里我下载了apifox&…

养老院生活管理系统

摘要 随着全球范围内人口老龄化趋势的日益加剧&#xff0c;养老院作为老年人生活的重要场所&#xff0c;其生活管理问题也显得愈发突出和重要。为了满足养老院在日常生活管理、老人健康监护、服务人员管理等多方面的需求&#xff0c;提高管理效率和服务质量。决定设计并实现了…