微信小程序:图片转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;
}
  • 8
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值