首先准备一段svg代码如下:
<svg t="1670404434181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" width="200" height="200"><path d="M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z" p-id="1770"></path></svg>
然后打开下面的网址,
https://codepen.io/jakob-e/pen/doMoML
将svg代码贴到下图中红线圈起来的位置,会自动转成base64,
然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果.
最后在小程序里面使用,如下
<view class="back"><text class="image"></text>支付</view>
.back .image{
width:19rpx;height:34rpx;display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg t='1670404434181' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1769' width='200' height='200'%3E%3Cpath d='M393.085 511.99l335.4 341.997c17.911 18.288 17.9 47.923-0.033 66.196-17.932 18.267-46.991 18.256-64.907-0.033L295.71 545.133c-8.712-8.75-13.619-20.701-13.619-33.173 0-12.476 4.907-24.427 13.619-33.177l367.835-374.954c11.591-11.818 28.482-16.434 44.311-12.11 15.832 4.326 28.196 16.939 32.44 33.082 4.242 16.147-0.285 33.373-11.872 45.194L393.086 512.052v-0.063z' p-id='1770'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}
结果:
