# Icon (图标)

支持字体编辑工具添加删除定义自己喜欢的图标，

• 支持图片；图片支持预览
• 灵活扩展图标
• Tui开发有字体编辑工具，可自行扩展图标。 扩展和修改我的图标

• TuiPlus扩展图标预览

如何扩展图标

扩展图标配置目录

将TTF字体文件放在编译器tui-compiler目录下font目录中

注意

编译器会自动将多个TTF合并为一个TTF，解决IOS端多个字体文件导致的图标显示问题。合并后会自动注入到ICON组件中，无需手动配置。合并后的字体文件在编译器tui-compiler目录下merged.ttf可用字体编辑工具查看预览合并后的图标配置

Icon (图标) 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

Icon (图标) 基础用法

基础用法参考 demo/icon/icon.uvue，通过 name 属性设置图标名称。

<template>
	<view>
		<t-card class="mltr-15"
			title='Icon 图标'
			sub-title="200余款内置图标，支持字体编辑工具添加删除定义自己喜欢的图标,支持图片-"></t-card>
		<introduction title="基础功能+主题展示">
			<t-row :class="[`tvg trm tpm`]">
				<t-icon class="mr-15"
					size="large"
					name="setting"
					:disabled="true"></t-icon>
				<t-icon class="mr-15"
					size="large"
					:hover="true"
					:disabled="true"
					name="phone-fill"
					type="success"></t-icon>
				<t-icon class="mr-15"
					size="large"
					name="map-fill"
					type="error"
					:hover="true"
					@click="test"></t-icon>
				<t-icon class="mr-15"
					size="large"
					name="eye-fill"
					type="primary"></t-icon>
				<t-icon class="mr-15"
					size="large"
					name="photo-fill"
					type="warning"></t-icon>
				<t-icon class="mr-15"
					size="large"
					name="cube"
					type="primary"></t-icon>
			</t-row>
		</introduction>
		<introduction title="主题尺寸">
			<t-row :class="[`tvg trm tpm`]">
				<t-row class="mr-15 faic">
					<t-text type="primary"
						class="mr-2"
						size="large">大</t-text>
					<t-icon size="large"
						type="primary"
						name="mic"></t-icon>
				</t-row>
				<t-row class="mr-15 faic">
					<t-text type="success"
						class="mr-2"
						size="medium">中</t-text>
					<t-icon class="mr-8"
						size="medium"
						:disabled="true"
						name="mic"
						type="success"></t-icon>
				</t-row>
				<t-row class="mr-15 faic">
					<t-text type="error"
						class="mr-2"
						size="small">小</t-text>
					<t-icon class="mr-8"
						size="small"
						name="mic"
						type="error"></t-icon>
				</t-row>
				<t-row class="mr-15 faic">
					<t-text type="primary"
						class="mr-2"
						size="mini">迷你</t-text>
					<t-icon class="mr-8"
						size="mini"
						name="mic"
						type="primary"></t-icon>
				</t-row>
			</t-row>
		</introduction>
	</view>
</template>
<script setup>
	function test() {
		console.log(123)
	}
</script>

Icon (图标) Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
name	图标名称	string	''

Icon (图标) Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-