微信小程序:图片转icon-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;
}
上一篇:Spring的三种注入方式的优缺点分析