@wines/icon v1.5.0

@wines/icon

Icon 图标

Wux Weapp 的图标使用开源项目 ionicons 4.3.0 版本。

在 page.json 中引入组件

{
  "navigationBarTitleText": "Icon",
  "usingComponents": {
    "wux-row": "@wines/row",
    "wux-col": "@wines/row/col",
    "wux-icon": "@wines/icon"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Icon</view>
		<view class="page__desc">图标</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">App icons</view>
		<wux-row>
			<block wx:for="{{ icons }}" wx:key="index">
				<wux-col span="3">
					<view class="cell">
						<wux-icon type="{{ style + '-' + item }}" />
						<view class="title">{{ style + '-' + item }}</view>
					</view>
				</wux-col>
			</block>
		</wux-row>
	</view>
</view>

export const icons = [
  'add-circle-outline',
  'add-circle',
  'add',
  'airplane',
  'alarm',
  'albums',
  'alert',
  'american-football',
  'analytics',
  'aperture',
  'apps',
  'appstore',
  'archive',
  'arrow-back',
  'arrow-down',
  'arrow-dropdown-circle',
  'arrow-dropdown',
  'arrow-dropleft-circle',
  'arrow-dropleft',
  'arrow-dropright-circle',
  'arrow-dropright',
  'arrow-dropup-circle',
  'arrow-dropup',
  'arrow-forward',
  'arrow-round-back',
  'arrow-round-down',
  'arrow-round-forward',
  'arrow-round-up',
  'arrow-up',
  'at',
  'attach',
  'backspace',
  'barcode',
  'basket',
  'basketball',
  'battery-charging',
  'battery-dead',
  'battery-full',
  'beaker',
  'bed',
  'beer',
  'bicycle',
  'bluetooth',
  'boat',
  'body',
  'bonfire',
  'book',
  'bookmark',
  'bookmarks',
  'bowtie',
  'briefcase',
  'browsers',
  'brush',
  'bug',
  'build',
  'bulb',
  'bus',
  'business',
  'cafe',
  'calculator',
  'calendar',
  'call',
  'camera',
  'car',
  'card',
  'cart',
  'cash',
  'cellular',
  'chatboxes',
  'chatbubbles',
  'checkbox-outline',
  'checkbox',
  'checkmark-circle-outline',
  'checkmark-circle',
  'checkmark',
  'clipboard',
  'clock',
  'close-circle-outline',
  'close-circle',
  'close',
  'cloud-circle',
  'cloud-done',
  'cloud-download',
  'cloud-outline',
  'cloud-upload',
  'cloud',
  'cloudy-night',
  'cloudy',
  'code-download',
  'code-working',
  'code',
  'cog',
  'color-fill',
  'color-palette',
  'color-wand',
  'compass',
  'construct',
  'contact',
  'contacts',
  'contract',
  'contrast',
  'copy',
  'create',
  'crop',
  'cube',
  'cut',
  'desktop',
  'disc',
  'document',
  'done-all',
  'download',
  'easel',
  'egg',
  'exit',
  'expand',
  'eye-off',
  'eye',
  'fastforward',
  'female',
  'filing',
  'film',
  'finger-print',
  'fitness',
  'flag',
  'flame',
  'flash-off',
  'flash',
  'flashlight',
  'flask',
  'flower',
  'folder-open',
  'folder',
  'funnel',
  'gift',
  'git-branch',
  'git-commit',
  'git-compare',
  'git-merge',
  'git-network',
  'git-pull-request',
  'glasses',
  'globe',
  'grid',
  'hammer',
  'hand',
  'happy',
  'headset',
  'heart',
  'heart-dislike',
  'heart-empty',
  'heart-half',
  'help-buoy',
  'help-circle-outline',
  'help-circle',
  'help',
  'home',
  'hourglass',
  'image',
  'infinite',
  'information-circle-outline',
  'information-circle',
  'information',
  'jet',
  'journal',
  'key',
  'keypad',
  'laptop',
  'leaf',
  'link',
  'list-box',
  'list',
  'locate',
  'lock',
  'log-in',
  'log-out',
  'magnet',
  'mail-open',
  'mail-unread',
  'mail',
  'male',
  'man',
  'map',
  'medal',
  'medical',
  'medkit',
  'megaphone',
  'menu',
  'mic-off',
  'mic',
  'microphone',
  'moon',
  'more',
  'move',
  'musical-note',
  'musical-notes',
  'navigate',
  'notifications-off',
  'notifications-outline',
  'notifications',
  'nuclear',
  'nutrition',
  'open',
  'options',
  'outlet',
  'paper-plane',
  'paper',
  'partly-sunny',
  'pause',
  'paw',
  'people',
  'person-add',
  'person',
  'phone-landscape',
  'phone-portrait',
  'photos',
  'pie',
  'pin',
  'pint',
  'pizza',
  'planet',
  'play-circle',
  'play',
  'podium',
  'power',
  'pricetag',
  'pricetags',
  'print',
  'pulse',
  'qr-scanner',
  'quote',
  'radio-button-off',
  'radio-button-on',
  'radio',
  'rainy',
  'recording',
  'redo',
  'refresh-circle',
  'refresh',
  'remove-circle-outline',
  'remove-circle',
  'remove',
  'reorder',
  'repeat',
  'resize',
  'restaurant',
  'return-left',
  'return-right',
  'reverse-camera',
  'rewind',
  'ribbon',
  'rocket',
  'rose',
  'sad',
  'save',
  'school',
  'search',
  'send',
  'settings',
  'share-alt',
  'share',
  'shirt',
  'shuffle',
  'skip-backward',
  'skip-forward',
  'snow',
  'speedometer',
  'square-outline',
  'square',
  'star-half',
  'star-outline',
  'star',
  'stats',
  'stopwatch',
  'subway',
  'sunny',
  'swap',
  'switch',
  'sync',
  'tablet-landscape',
  'tablet-portrait',
  'tennisball',
  'text',
  'thermometer',
  'thumbs-down',
  'thumbs-up',
  'thunderstorm',
  'time',
  'timer',
  'today',
  'train',
  'transgender',
  'trash',
  'trending-down',
  'trending-up',
  'trophy',
  'tv',
  'umbrella',
  'undo',
  'unlock',
  'videocam',
  'volume-high',
  'volume-low',
  'volume-mute',
  'volume-off',
  'wallet',
  'walk',
  'warning',
  'watch',
  'water',
  'wifi',
  'wine',
  'woman',
];

## API

### Icon props

| 参数 | 类型 | 描述 | 默认值 |
| --- | --- | --- | --- |
| type | `string` | 图标名称，可选值参考 [ionicons](https://ionicons.com/) 4.3.0 版本 | - |
| size | `number` | 图标大小 | 32 |
| color | `string` | 图标颜色 | - |

### Icon externalClasses

| 名称 | 描述 |
| --- | --- |
| wux-class | 根节点样式类 |