WeChat applet icon component usage details, icon Usage Details

Details on the use of mini-program icon components and how to use icons

The implementation of the applet icon component is as follows:

Native icon component attributes

WXML

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

JS

Page({ data: { typeList: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'] },})

Introduce icon Library

Method

Applet-introduce the iconfont icon of the External library

WXML

<View class = "icon-group"> mini-program External library import icon </view> <view class = "icon-group"> <icon class = "iconfont icon-zhiding"> </icon> <icon class = "iconfont icon-zuojiantou"> </icon> <icon class = "iconfont icon-youjiantou"> </icon> <icon class =" iconfont icon-shangjiantou "> </icon> <icon class =" iconfont icon-xiajiantou1 "> </icon> <icon class =" iconfont icon-xiajiantou "> </icon> </ view> <view class = "icon-group"> <icon class = "iconfont icon-gengduotianchong"> </icon> <icon class = "iconfont icon-erweima"> </ icon> <icon class = "iconfont icon-fenleiorguangchangorqita"> </icon> <icon class = "iconfont icon-dibiao"> </icon> <icon class = "iconfont icon- bangzhu "> </icon> <icon class =" iconfont icon-xinfeng "> </icon> </view> <view class =" icon-group "> <icon class = "iconfont icon-duihuaxinxi"> </icon> <icon class = "iconfont icon-sousuo"> </icon> <icon class = "iconfont icon-shouye"> </icon> <icon class = "iconfont icon-shezhi"> </icon> <icon class = "iconfont icon-shanchu"> </icon> <icon class = "iconfont icon-dianhua "> </icon> </view>

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.