css图标绘制

图标示例：

<view class="IcoPhoto" :style="{'--color':'#f00','--size':1}"></view>

.IcoPhoto{
    position: relative;
    width:calc(var(--size) * 100rpx);
    height:calc(var(--size) * 70rpx);
    background: var(--color);
    border-radius: calc(var(--size) * 16rpx);
    display: flex;align-items: center;justify-content: center;
    &::before,&::after{
        position: absolute;content: '';z-index: 1;
    }
    &::before{
        width: calc(var(--size) * 30rpx);height: 0;
        border-bottom: calc(var(--size) * 9rpx) solid var(--color);
        border-left: calc(var(--size) * 8rpx) solid transparent;
        border-right: calc(var(--size) * 8rpx) solid transparent;
        top: calc(var(--size) * -9rpx);
    }
    &::after{
        width: calc(var(--size) * 36rpx);
        height: calc(var(--size) * 36rpx);
        border-radius: 100%;
        border: calc(var(--size) * 8rpx) solid #fff;
    }
}

坐标图标

图标示例：

<view class='IcoLoaction' :style="{'--color':'#00f','--size':1.5}"></view>

.IcoLoaction{
    position: relative;
    width: calc(var(--size) * 80rpx);
    height: calc(var(--size) * 100rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    &::before{
        position: relative;
        content: '';
        width: calc(var(--size) * 60rpx);
        height: calc(var(--size) * 60rpx);
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        border: calc(var(--size) * 20rpx) solid var(--color);
        box-sizing: border-box;
        top: calc(var(--size) * -10rpx);
        z-index: 1;
    }
    &::after{
        position: absolute;
        content: '';
        width: calc(var(--size) * 50rpx);
        height: calc(var(--size) * 16rpx);
        background: var(--color);
        border-radius: 100%;
        bottom: calc(var(--size) * 6rpx);
        opacity: .16;
    }
}

图标拐弯

图标示例：

<view class="IcoCc"></view>

.IcoCc{
    width: 100px;
    height: 50px;
    border-top:30px solid red;
    border-top-left-radius: 80px 80px;
}

图标录音

图标示例：

<view class="IcoRecord" :style="{'--color':'#f00','--size':1}"></view>

.IcoRecord{
    position:relative;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    width:calc(var(--size) * 80rpx);
    height:calc(var(--size) * 100rpx);
    box-sizing: border-box;
    border-bottom: calc(var(--size) * 6rpx) solid var(--color);
    &::before{
        content:"";
        position:absolute;
        bottom:calc(var(--size) * 12rpx);
        width:calc(var(--size) * 40rpx);
        height:calc(var(--size) * 80rpx);
        border: calc(var(--size) * 6rpx) solid var(--color);
        border-radius: calc(var(--size) * 20rpx);
        box-sizing: border-box;
    }
    &::after{
        content:"";
        position:absolute;
        bottom:0;
        width:calc(var(--size) * 50rpx);
        height:calc(var(--size) * 44rpx);
        border:calc(var(--size) * 6rpx) solid var(--color);
        border-top:0;
        border-radius:0 0 calc(var(--size) * 40rpx) calc(var(--size) * 40rpx);
    }
}

图标刷新

图标示例：

<view class="IcoRefresh" :style="{'--color':'#f00','--size':1.8}">
    <text></text><text></text>
</view>

.IcoRefresh{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    width: calc(var(--size) * 100rpx);
    height: calc(var(--size) * 100rpx);
    transform:rotate(-20deg);
    // animation: ref-rotate 2s infinite linear;//开启旋转动画
    &::before,&::after{
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        z-index: 1;
        border: calc(var(--size) * 15rpx) solid red;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
    }
    &::before{
        left: calc(var(--size) * 4rpx);
        top: calc(var(--size) * 40rpx);
    }
    &::after{
        right: calc(var(--size) * 4rpx);
        bottom: calc(var(--size) * 40rpx);
        transform:rotate(180deg);
    }
    text{
        position: relative;
        display: inline-flex;
        width: calc(var(--size) * 100rpx);
        height: calc(var(--size) * 42rpx);
        overflow: hidden;
        &:last-child{
            transform:rotate(180deg);
        }
        &::before{
            position: relative;
            content: '';
            margin: calc(var(--size) * 10rpx) auto 0;
            width: calc(var(--size) * 80rpx);
            height: calc(var(--size) * 80rpx);
            border: calc(var(--size) * 12rpx) solid #f00;
            border-radius: 100%;
            box-sizing: border-box;
        }
    }
}

@keyframes ref-rotate {
  0% {transform:rotate(-20deg);}
  100% {transform:rotate(-380deg);}
}