微信小程序:图片转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;
}
相关推荐
shitian08111 小时前
用轻量云服务器搭建一个开源的商城系统,含小程序和pc端
服务器·小程序·开源
计算机-秋大田2 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
说私域9 小时前
私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
人工智能·小程序
亥时科技12 小时前
相亲小程序(源码+文档+部署+讲解)
java·小程序·开源·源代码管理
wayuncn12 小时前
网站小程序app怎么查有没有备案?
小程序
2401_8441379513 小时前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
iSee85716 小时前
美团代付微信小程序 read.php 任意文件读取漏洞复现
微信小程序·小程序·php
V+zmm1013416 小时前
小说实体书商城微信小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm·课程设计
V+zmm1013419 小时前
校园服务平台小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·课程设计·1024程序员节
xiaaaa.z21 小时前
【小程序】封装网络请求request模块
小程序