微信小程序自带的图标使用

539 阅读1分钟

highlight: a11y-dark

最近经常会使用到一些小的图标,自己制作又相当的麻烦所幸微信小程序有自带的图标也基本上够用了,我今天就打算整理一下微信小程序的图标,把自己常用的一些图标给罗列出来。

下面我举个例子吧这是我今天弄的一些小图标 选中和未选中的一个状态话不多说直接上图片吧: 1681374006034.png 1681374017947.png 这里就是代码的使用的方式:

        <view>
          <icon wx:if="{{true}}" type="circle" size="38rpx"></icon>
          <icon wx:else  type="success" size="38rpx"></icon>
        </view>
        <view class="tt">我已清楚规则,下次不用再提醒</view>

他的核心代码就是使用了微信小程序icon标签

 <icon wx:else  type="success" size="38rpx"></icon>
 

下面我介绍一下icon标签里面的一些属性都是干什么的怎么去用

  • 先是type属性 它是图标显示的类型属性 可以取值有: success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size属性 它是图标显示的大小 默认单位是 px 也可以自定义单位入rpx等等
  • 还有一个是color属性 他是控制图标的颜色

基本上图标就是这些内容了,下面我罗列一下图标出来大家可以看看:

这个就是标识的错误图标 提示错误或者其他表示错误的地方可以使用这个图标。

 <icon  type="cancel" size="38rpx"></icon>

1681375168128.png

这个图标就可以在下载东西到时候显示这个图标。

 <icon  type="download" size="38rpx"></icon>

1681375199382.png

可以用在提示

 <icon  type="info" size="38rpx"></icon>

1681440208556(1).png

 <icon  type="warn" size="38rpx"></icon>

1681440238211.png

 <icon  type="warn" size="38rpx" color="#cccccc"></icon>

1681440328820(1).png

 <icon  type="waiting" size="38rpx"></icon>

1681440407013.png

 <icon  type="success_no_circle" size="38rpx"></icon>

1681440433656.png

 <icon  type="search" size="38rpx"></icon>

1681440481627.png

 <icon  type="cancel" size="38rpx"></icon>

1681440529715.png

 <icon  type="circle" size="38rpx"></icon>
 <icon  type="success" size="38rpx"></icon>
 <icon  type="...." size="38rpx"></icon>

大概基本上就是这些东西了,用的多的就整理在这里了,如果需要其他的可以在官网上看一下了。