使用步骤:

1、在app.json中设置

"useExtendedLib": {
        "weui": true
      },

2、icon代码

<text>1</text>
<view class="weui-icon-circle"></view>
<view class="weui-icon-download"></view>
<view class="weui-icon-info"></view>
<view class="weui-icon-safe-success"></view>
<view class="weui-icon-safe-warn"></view>
<view class="weui-icon-success"></view>
<view class="weui-icon-success-circle"></view>
<view class="weui-icon-success-no-circle"></view>
<view class="weui-icon-waiting"></view>
<view class="weui-icon-waiting-circle"></view>
<view class="weui-icon-warn"></view>
<view class="weui-icon-info-circle"></view>
<view class="weui-icon-cancel"></view>
<view class="weui-icon-search"></view>
<view class="weui-icon-clear"></view>
<text>2</text>
<view class="weui-icon-back"></view>
<view class="weui-icon-delete"></view>
<view class="weui-icon-success-no-circle-thin"></view>
<view class="weui-icon-arrow"></view>
<view class="weui-icon-arrow-bold"></view>
<view class="weui-icon-back-arrow"></view>
<view class="weui-icon-back-arrow-thin"></view>
<view class="weui-icon-close"></view>
<view class="weui-icon-close-thin"></view>
<view class="weui-icon-back-circle"></view>
<view class="weui-icon-success"></view>
<view class="weui-icon-waiting"></view>
<view class="weui-icon-warn"></view>
<view class="weui-icon-info"></view>
<view class="weui-icon-success-circle"></view>
<view class="weui-icon-success-no-circle"></view>
<view class="weui-icon-success-no-circle-thin"></view>
<text>3</text>
<view class="weui-icon-waiting-circle"></view>
<view class="weui-icon-circle"></view>
<view class="weui-icon-download"></view>
<view class="weui-icon-info-circle"></view>
<view class="weui-icon-safe-success"></view>
<view class="weui-icon-safe-warn"></view>
<view class="weui-icon-cancel"></view>
<view class="weui-icon-search"></view>
<view class="weui-icon-clear"></view><!--active-->
<view class="weui-icon-delete.weui-icon_gallery-delete"></view>
<view class="weui-icon-arrow"></view>
<view class="weui-icon-arrow-bold"></view>
<view class="weui-icon-back-arrow"></view>
<view class="weui-icon-back-arrow-thin"></view>
<view class="weui-icon-arrow"></view>
<view class="weui-icon-back-arrow"></view>
<view class="weui-icon-back-arrow-thin"></view>
<view class="weui-icon-back-circle"></view>
<view class="weui-icon-btn_goback"></view>
<text>4</text>
<view class="weui-icon-more"></view>
<view class="weui-icon-btn_close"></view>

效果如下:

可以通过color属性修改icon的颜色

<view class="weui-icon-back search-icon"></view>\

wxss

.search-icon {
  position: absolute;
  top: 8px;
  right: 20px;
  color: gray;
  transform: rotate(270deg);
}

效果如下:

 

posted on 2023-02-20 18:29  周文豪  阅读(741)  评论(0)    收藏  举报