Icon 图标

基于字体的图标集，包含了大多数常见场景的图标。

• 支持图片；图片支持预览
• 大量规范的图标；
• 图标详细列表
• Tui开发有字体编辑工具，可自行扩展图标。 编辑我的字体

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='图标'>
		<t-card class="mltr.30" title='Icon 图标' sub-title="200余款内置图标，支持字体编辑工具添加删除定义自己喜欢的图标,支持图片."></t-card>
		<introduction title="基础功能+主题展示">
			<t-row>
				<t-icon class="mr.30-s.50" name="setting"></t-icon>
				<t-icon class="mr.30-s.50" :hover="true" name="phone-fill" type="success"></t-icon>
				<t-icon class="mr.30-s.50" name="map-fill" type="error"></t-icon>
				<t-icon class="mr.30-s.50" name="eye-fill" type="primary"></t-icon>
				<t-icon class="mr.30-s.50" name="photo-fill" type="warning"></t-icon>
				<t-icon class="mr.30-s.50" name="cube" type="primary"></t-icon>
			</t-row>
		</introduction>
		<introduction title="主题尺寸">
			<t-row>
				<t-row class="mr.30-faic">
					<t-text type="primary" class="mr.5" size="large">大</t-text>
					<t-icon size="large" type="primary" name="mic"></t-icon>
				</t-row>
				<t-row class="mr.30-faic">
					<t-text type="success" class="mr.5" size="large">中</t-text>
					<t-icon class="mr.15" size="medium" :disabled="true" name="phone-fill" type="success"></t-icon>
				</t-row>
				<t-row class="mr.30-faic">
					<t-text type="error" class="mr.5" size="large">小</t-text>
					<t-icon class="mr.15" size="small" name="map-fill" type="error"></t-icon>
				</t-row>
				<t-row class="mr.30-faic">
					<t-text type="primary" class="mr.5" size="large">迷你</t-text>
					<t-icon class="mr.15" size="mini" name="eye-fill" type="primary"></t-icon>
				</t-row>
			</t-row>
		</introduction>
		<introduction title="样式设置">
			<t-icon name="volume-fill" class="bg.#f56c6c-r.200-w.80-h.80-c.#fff-s.50-sta-slh.80"
				type="primary"></t-icon>
		</introduction>
		<introduction title="使用图片">
			<t-icon class="s.150" name="/static/image/logo.png"></t-icon>
		</introduction>
		<introduction title="使用图片" class="mb.50">
			<t-icon name="/static/image/logo.png" class="s.250" :preview="false"></t-icon>
		</introduction>
	</t-page>
</template>

Props

名称	描述	类型	默认值	可选值
name	图标名称	String	'photo'	-
size	按钮尺寸	String	'medium'	'large', 'medium', 'small', 'mini'
type	组件场景	String	''	'info', 'primary', 'error', 'warning', 'success'
disabled	是否禁用	Boolean	false	true, false
stop	是否阻止事件冒泡	Boolean	false	true, false
hover	是否有鼠标悬停效果	Boolean	false	true, false
effect	主题效果	String	''	'normal', 'dark', 'light', 'plain'

Events

事件名	描述	回调参数
click	图标被点击时触发	MouseEvent

Methods

方法名	说明	参数
setValue	设置图标值	-

Slots

名称	描述
default	TIcon 组件提供了一个默认插槽，用于放置自定义内容。