微信小程序圖標 icon組件

完整微信小程序(Java後端) 技術貼目錄清單頁面（必看）

圖標。組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。

屬性	類型	默認值	必填	說明	最低版本
type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的顏色，同css的color	1.0.0

示例代碼

在開發者工具中預覽效果

index.js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

index.wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>


<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

index.wxss

.intro {
  margin: 30px;
  text-align: center;
}

運行效果：

微信搜一搜【java1234】關注這個放蕩不羈的程序員，關注後回覆【資料】有我準備的一線大廠筆試面試資料以及簡歷模板