Tui

Icon 图标

用于项目中通用的图标展示, 推荐使用第三方图标库

基础用法

直接传入 name 属性即可显示对应图标。

ArrowLeftIcon

ArrowRightIcon

ArrowDownIcon

MorePointIcon

SelectIcon

PreviewIcon

CheckboxUnchecked

CheckboxSelected

CheckboxIndeterminate

DeleteIcon

CloseIcon

CircleCloseIcon

RotateLeftIcon

ZoomInIcon

ZoomOutIcon

EnterFullscreenIcon

ExitFullscreenIcon

LoadingIcon

VerifyingIcon

CheckCircleIcon

SignInIcon

ErrorCircleIcon

ExclamationCircleIcon

自定义大小

通过 fontSize 属性设置图标大小。

16px

32px

48px

示例代码

vue

<template>
  <TsIcon name="LoadingIcon" fontSize="16px" />
  <TsIcon name="LoadingIcon" fontSize="32px" />
  <TsIcon name="LoadingIcon" fontSize="48px" />
</template>

自定义颜色

可通过 style 或 class 自定义颜色。

#f56c6c

#67c23a

#409eff

示例代码

vue

<template>
  <TsIcon name="DeleteIcon" style="color: #f56c6c" fontSize="32px" />
  <TsIcon name="PreviewIcon" style="color: #67c23a" fontSize="32px" />
  <TsIcon name="CloseIcon" style="color: #409eff" fontSize="32px" />
</template>

name

图标名称（必填）

String

见支持的图标名

fontSize

图标大小，支持 px/em/rem/百分比等

String | Number

1em

class

自定义类名

String

style

自定义样式

Object | String