How to reduce the icon size in WeChat mini program

How to reduce the icon size in the WeChat mini program

The icon in the WeChat mini program uses the icon component, and the attribute values ​​​​are type, size, and color. The size attribute controls the size of the icon. If you want to shrink the icon, you only need to set the size value smaller.

Recommended learning: Small program development

The icon component parameters are as follows:

##typeStringType of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizeNumber 23The size of the icon in pxcolorColor## Reference code:

Attribute name	Type	Default value	Description
		## The color of #icon is the same as the color of css

1, 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>

2, 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'
    ]
  }
})

3. Rendering:

PHP Chinese website, a large number of jquery video tutorials

, welcome to learn!

The above is the detailed content of How to reduce the icon size in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!