# 字体图标

icon:常用字体图标,支持基本样式设置,支持nvue(使用组件库thorui-nvue文件夹下组件)。

# 组件结构

<template>
	<text class="tui-icon-class tui-icon" :class="'tui-icon-' + name" :style="{ color: color, fontSize: size + unit, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
	 @tap="handleClick"></text>

</template>

# 组件脚本

<script>
	export default {
		name: 'tuiIcon',
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: Number,
				default: 32
			},
			//px或者rpx
			unit:{
				type: String,
				default: 'px'
			},
			color: {
				type: String,
				default: '#999'
			},
			bold: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: "0"
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
name String 图标名称 ""
size Number 图标大小 32
unit String 大小单位 px
color String 图标颜色 ""
bold Boolean 是否加粗 false
margin String margin值设置,调整间距 0
index Number 索引 0

# methods

名称 描述
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/icon/icon

# H5二维码

# 小程序二维码