当前位置: 首页 > news >正文

微信小程序:图片转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;
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Zabbix钉钉机器人告警
  • 微信小程序订单发货管理接入
  • 跨越语言的界限:Vue I18n 国际化指南
  • 在x86/amd64的机器上使用Docker运行arm64v8/ubuntu并安装ROS1
  • Unity游戏帧率查看软件Fraps
  • taoCMS v3.0.2 任意文件读取漏洞(CVE-2022-23316)
  • 绝区贰--及时优化降低 LLM 成本和延迟
  • 计算机网络面试常见题目(一)
  • vue3使用pinia中的actions,需要调用接口的话
  • 第三十章 方法大全(Python)
  • SpringBoot | 大新闻项目后端(redis优化登录)
  • 第三方商城对接重构(HF202407)
  • 【第20章】MyBatis-Plus逻辑删除支持
  • Linux查看文件的行数,字数,字节数
  • 207 课程表
  • [笔记] php常见简单功能及函数
  • 【附node操作实例】redis简明入门系列—字符串类型
  • Centos6.8 使用rpm安装mysql5.7
  • Docker下部署自己的LNMP工作环境
  • JavaScript新鲜事·第5期
  • jquery ajax学习笔记
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • Next.js之基础概念(二)
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • PAT A1120
  • Python学习之路16-使用API
  • Spring Boot快速入门(一):Hello Spring Boot
  • vue脚手架vue-cli
  • 观察者模式实现非直接耦合
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 如何使用 JavaScript 解析 URL
  • 学习笔记:对象,原型和继承(1)
  • ​MySQL主从复制一致性检测
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • #微信小程序:微信小程序常见的配置传值
  • (1)SpringCloud 整合Python
  • (C++二叉树05) 合并二叉树 二叉搜索树中的搜索 验证二叉搜索树
  • (java)关于Thread的挂起和恢复
  • (k8s)Kubernetes 从0到1容器编排之旅
  • (k8s)Kubernetes本地存储接入
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (离散数学)逻辑连接词
  • (四)鸿鹄云架构一服务注册中心
  • (新)网络工程师考点串讲与真题详解
  • (学习日记)2024.01.19
  • (转)C#调用WebService 基础
  • *p=a是把a的值赋给p,p=a是把a的地址赋给p。
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .net dataexcel winform控件 更新 日志
  • .Net 基于MiniExcel的导入功能接口示例
  • .net操作Excel出错解决
  • .NET值类型变量“活”在哪?
  • @RequestMapping 和 @GetMapping等子注解的区别及其用法