小程序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;
}