微信小程序:图片转icon

svg方式

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

实现代码如下

c 复制代码
<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

c 复制代码
<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方法

c 复制代码
<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;
}
相关推荐
00后程序员张18 分钟前
混合 App 怎么加密?分析混合架构下常见的安全风险
android·安全·小程序·https·uni-app·iphone·webview
qq_124987075334 分钟前
校园失物招领微信小程序设计与实现(源码+论文+部署+安装)
spring boot·微信小程序·小程序·毕业设计·毕设
梦想要有37 分钟前
盲盒小程序有哪些比较不错的功能推荐
小程序
kdniao11 小时前
小程序和电商商家物流查询监控解决方案
大数据·小程序
imooos1 小时前
使用小程序AI推理能力识别车牌号
人工智能·小程序
天呐草莓1 小时前
微信小程序应用开发
python·微信小程序·小程序
2501_915921432 小时前
Flutter App 到底该怎么测试?如何在 iOS 上进行测试
android·flutter·ios·小程序·uni-app·cocoa·iphone
Slow菜鸟2 小时前
微信小程序(TypeScript)开发指南
微信小程序·小程序·typescript
2501_915909062 小时前
如何在 Windows 上上架 iOS App,分析上架流程哪些是不用mac的
android·macos·ios·小程序·uni-app·iphone·webview
说私域2 小时前
链动2+1模式、AI智能名片与S2B2C商城小程序在直播营销中的规范化应用研究
人工智能·小程序