2-6 icon组件

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中查看名字

输出结果：