Skip to main content

icon

Icon.

Props#

PropertyTypeDefault ValueRequiredDescription
typeStringyesType of icon, valid value: circle,download,info,safe-success, safe-warn,success,success-circle,success-no-circle,waiting,waiting-circle,warn,info-circle,cancel,search,clear, back,delete,success-no-circle-thin,arrow,arrow-bold,back-arrow,back-arrow-thin,close,close-thin,back-circle.
sizenumber/string23noThe size of the icon.
colorStringnoIcon color, with css color.

Example

js

Page({  data: {    iconSize: [20, 30, 40, 50, 60, 70],    iconColor: [      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'    ],    iconType: [        "circle",        "download",        "info",        "safe-success",        "safe-warn",        "success",        "success-circle",        "success-no-circle",        "waiting",        "waiting-circle",        "warn",        "info-circle",        "cancel",        "search",        "clear",        "back",        " delete",        "success-no-circle-thin",        "arrow",        "arrow-bold",        "back-arrow",        "back-arrow-thin",        "close",        "close-thin",        "back-circle",    ]  }})

bxml

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

bxss

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

Props#

NameTypeDescriptionDefault
type requiredstring
sizestring | number23
colorstring"black"