实现效果

1.打开阿里巴巴矢量库，找到想要的图标，赋值SVN代码

iconfont-阿里巴巴矢量图标库

2.打开下方网址，将复制的svn代码赋值到网址指定位置，即可得到uniapp和小程序需要的SVN代码

https://codepen.io/jakob-e/pen/doMoML

3.代码

<template>
 <view class="display ">
            <view class="display justifybetween">
                <view class="contentbox1item " v-for="(item,index) in list1" :key="index">
                    <view @click="golink(item.url)">
                        <view class="justifycenter display ">
                            <view class="images">
                                <view :class="item.src"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
</template>

<script>
    export default {
        data() {     

           return {
                list1: [{

                      //对应style中的class名
                        src: 'recycling',

                       //url对应自己的界面路径
                        url: '/pages/recycling/recycling'
                    },
                    {
                        src: 'integral',
                        url: '/pages/integral/integral'
                    },
                ], 
               },

        },
        methods: {
         golink(url) {
   uni.navigateTo({
                    url: url
                })
            },
        }
    }
</script>

<style>

    .recycling {
        background-size: 50upx 50upx;
        width: 50upx;
        height: 50upx;

       //svn代码块
        background-image: url("data:image/svg+xml,%3Csvg t='1641898778587' class='icon' viewBox='0 0 1241 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2667' width='16' height='16'%3E%3Cpath d='M194.333316 827.233078a130.501274 130.501274 0 0 1-130.501274-130.501274v-204.016992q0-8.796753 0.77334-17.40017H63.832042l0.918342-1.933352a194.930237 194.930237 0 0 1 60.610592-123.106203l93.525913-189.903521h470.481261v136.833003h356.220146a130.501274 130.501274 0 0 1 130.501274 130.501274v399.672237z' fill='%23333333' p-id='2668'%3E%3C/path%3E%3Cpath d='M194.333316 891.227037A194.543567 194.543567 0 0 1 0.031418 696.876805v-204.161993c0-3.866704 0-7.781743 0.241669-11.648447a64.042292 64.042292 0 0 1 1.981687-22.523554 258.875861 258.875861 0 0 1 70.664023-146.209761l88.740867-180.23676a63.993958 63.993958 0 0 1 57.42056-35.718682h470.481261a63.993958 63.993958 0 0 1 63.993959 63.993958v72.839045h292.226187a194.543567 194.543567 0 0 1 194.301897 194.301897v399.672237a63.993958 63.993958 0 0 1-63.993958 63.993958z m-65.782309-410.837346v0.676674q-0.531672 5.84839-0.531672 11.745114v204.161994a66.410649 66.410649 0 0 0 66.313981 66.313981h917.762296V427.560842a66.410649 66.410649 0 0 0-66.313981-66.313981h-356.220146a63.993958 63.993958 0 0 1-63.993958-63.993958V224.413858h-366.853582l-75.932409 154.184839a63.993958 63.993958 0 0 1-13.630133 18.41518 130.936279 130.936279 0 0 0-40.745398 82.699141z' fill='%23333333' p-id='2669'%3E%3C/path%3E%3Cpath d='M564.280262 0h531.381856a145.581422 145.581422 0 0 1 145.581422 145.581422v368.786934H564.280262A145.581422 145.581422 0 0 1 418.69884 368.786935V145.581422A145.581422 145.581422 0 0 1 564.280262 0zM344.699784 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.716227 125.667893z' fill='%23FFFFFF' p-id='2670'%3E%3C/path%3E%3Cpath d='M344.651451 772.954215a77.334089 77.334089 0 1 0 77.334088 77.334089 77.575758 77.575758 0 0 0-77.334088-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470028 173.470027 173.470027 173.470027 0 0 1 173.470028-173.470027z' fill='%23333333' p-id='2671'%3E%3C/path%3E%3Cpath d='M917.310376 975.956197a125.667894 125.667894 0 1 1 125.667894-125.667893 125.667894 125.667894 0 0 1-125.667894 125.667893z' fill='%23F8FAF9' p-id='2672'%3E%3C/path%3E%3Cpath d='M917.310376 772.954215a77.334089 77.334089 0 1 0 77.334089 77.334089 77.575758 77.575758 0 0 0-77.334089-77.334089m0-95.990937a173.470027 173.470027 0 1 1-173.470027 173.470027 173.470027 173.470027 0 0 1 173.470027-173.470027z' fill='%23333333' p-id='2673'%3E%3C/path%3E%3Cpath d='M328.121289 307.258001L248.418844 470.867932a48.527141 48.527141 0 0 1-87.242519-42.533749l79.702445-163.609931a48.527141 48.527141 0 1 1 87.242519 42.485415z' fill='%23FFFFFF' p-id='2674'%3E%3C/path%3E%3C/svg%3E");      
    }

    .integral {
        background-size: 50upx 50upx;
        width: 50upx;
        height: 50upx;
        background-image: url("data:image/svg+xml,%3Csvg t='1641898802211' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2813' width='16' height='16'%3E%3Cpath d='M312.178738 41.30972h402.177994a13.782633 13.782633 0 0 1 13.782633 13.782633v443.487715a13.782633 13.782633 0 0 1-13.782633 13.782633H312.178738a13.782633 13.782633 0 0 1-13.782633-13.782633V55.092353a13.782633 13.782633 0 0 1 13.782633-13.782633z' fill='%23FFFFFF' p-id='2814'%3E%3C/path%3E%3Cpath d='M714.318553 553.596063H312.140559a55.168711 55.168711 0 0 1-55.092353-55.015995V55.092353A55.168711 55.168711 0 0 1 312.140559 0h402.177994a55.168711 55.168711 0 0 1 55.092353 55.092353v443.487715a55.168711 55.168711 0 0 1-55.092353 55.015995z m-374.612728-82.61944h347.085641V82.61944H339.705825z' fill='%23FFFFFF' p-id='2815'%3E%3C/path%3E%3Cpath d='M507.159089 220.713023a5.497782 5.497782 0 0 1 9.888371 0l119.767645 245.185788c0.80176 1.641699 2.405279 2.78707 277.027105 39.858916a5.497782 5.497782 0 0 1 3.054323 9.468402l-198.760076 188.184482a5.535961 5.535961 0 0 0-1.641698 5.001454l48.869169 267.787778a5.497782 5.497782 0 0 1-7.979419 5.841393l-242.742329-128.777898a5.497782 5.497782 0 0 0-5.15417 0l-242.742329 128.777898a5.497782 5.497782 0 0 1-7.979419-5.841393l48.86917-267.787778a5.535961 5.535961 0 0 0-1.641699-5.001454l-198.760076-188.184482a5.497782 5.497782 0 0 1 3.054323-9.468402c274.660005-37.071847 276.225346-38.179039 277.027106-39.858916z' fill='%23333333' p-id='2816'%3E%3C/path%3E%3Cpath d='M264.225865 1023.923642a46.807502 46.807502 0 0 1-46.0821-55.168711l45.394877-248.736438-184.672011-174.859998a46.807502 46.807502 0 0 1 25.923568-80.405056c143.438649-19.356773 222.43108-30.275978 254.272398-35.162894l110.910108-227.050744a46.807502 46.807502 0 0 1 83.993885 0l110.910108 227.050744c31.879497 4.886917 110.719213 15.806122 254.310578 35.162894a46.807502 46.807502 0 0 1 25.923567 80.405056l-184.672011 174.859998 45.394877 248.698259a46.807502 46.807502 0 0 1-37.759069 54.481488 47.571082 47.571082 0 0 1-30.123262-4.619664l-226.096267-119.958539-225.981731 119.882181a47.074755 47.074755 0 0 1-21.647515 5.421424zM190.043992 536.606391l144.393125 136.757317a46.692964 46.692964 0 0 1 13.858991 42.378733l-35.582864 195.094888 177.456173-94.14951a47.609261 47.609261 0 0 1 43.867715 0l177.456173 94.14951-35.621044-195.094888a46.692964 46.692964 0 0 1 13.858991-42.378733l144.431304-136.757317c-85.062898-11.453712-137.940867-18.898624-167.529622-23.251035a712.611759 712.611759 0 0 1-32.98669-5.306887 44.974908 44.974908 0 0 1-33.941165-24.090973l-87.620894-179.441482-87.582715 179.441482a44.974908 44.974908 0 0 1-33.979345 24.090973c-5.841393 1.18355-15.997017 2.825249-32.986689 5.306887-29.512397 4.390589-82.390366 11.720965-167.491444 23.289214z' fill='%23333333' p-id='2817'%3E%3C/path%3E%3Cpath d='M383.764435 698.29462a41.157004 41.157004 0 0 1-29.206964-12.102755l-90.904292-90.904292a41.347899 41.347899 0 1 1 58.452109-58.452108l90.904291 90.904291a41.30972 41.30972 0 0 1-29.206965 70.516685z' fill='%23FFFFFF' p-id='2818'%3E%3C/path%3E%3C/svg%3E");
    }

.display {
        display: flex;
    }

    .justifycenter {
        justify-content: center;
    }

    .justifybetween {
        justify-content: space-between;
    }

    .contentbox1item {
        width: 23%;
        padding: 40upx 0upx;
    }

      .images image {
        height: 50upx;
        width: 50upx;
    }

</style>