icon
基础库 1.0.0 开始支持,低版本需做兼容处理。
图标。组件属性的长度单位默认为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 |
示例代码
<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>
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'
]
}
})
以上内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
在日常开发中这些图标肯定是无法满足要求的
在这里引入iconfont阿里矢量图标
1、百度搜索iconfont进入网址并注册
2、点击想要的图标上购物车按钮
3、进入购物车点击添加到项目
4、点击下载到本地
5、得到文件将iconfont.css改为iconfont.wxss文件并导入到项目中
6、引用css文件,并在wxml中调用(我在本地创建了一个文件夹名字为iconfontFile,并将文件放入该文件下)
@import "../iconfontFile/iconfont.wxss";
<icon class="iconfont icon-shouye"></icon>
<text class="iconfont icon-yaopin"></text>
调用格式 组件内class="iconfont icon-font的名字"可以在下载的文件中的.html中查看名字
输出结果: