wxc-icon

wxc-icon

MinUI 小程序组件 - 图标

Install

$ min install @minui/wxc-icon

Demos

示例名称

示例描述

<template>
  <view class="icon_list">
    <view wx:for="{{icons}}" wx:for-item="icon" wx:key="index" class="icon_item_demo">
      <wxc-icon size="50" type="{{icon}}"></wxc-icon>
      <text class="icon_type">{{icon}}</text>
    </view>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-icon': '@minui/wxc-icon'
    }
  },
  data: {
    icons: [
      'yes', 'check', 'help', 'no', 'warning',
      'add', 'close', 'star', 'star-active', 'more',
      'right', 'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
      'minus', 'cart', 'home', 'search', 'search-square',
      'camera', 'scan', 'corcer-l', 'corcer-r', 'alipay',
      'yen', 'mogujie', 'group', 'pintuan', 'share',
      'notice', 'shop', 'delete', 'comment', 'edit',
      'feedback', 'location', 'address', 'after-sales', 'footprint',
      'weixin', 'top', 'purse', 'unreceived', 'truck',
      'rate', 'coupon', 'message','clear'
    ]
  },
  methods: {}
}
</script>
<style>
  .icon_list {
    width: 100%;
    overflow: hidden;
    text-align: center;
  }
  .icon_item_demo {
    width: 20%;
    float: left;
    margin-bottom: 10rpx;
  }
  .icon_type {
    display: block;
    font-size: 22rpx;
  }
</style>

API

Icon【props】

属性	描述
type	[必填] icon 类型
size	[可选] icon 字号，默认值 22（单位 rpx）
color	[可选] icon 颜色，默认 #333

Link

	地址
	icon 组件文档 https://meili.github.io/min/docs/minui/index.html#icon
	icon 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-icon
	MinUI 组件库 https://github.com/meili/minui