# tui-icon 字体图标开源组件

介绍

常用字体图标，支持基本样式设置。

图标扩展

ThorUI提供了图标的SVG文件 (opens new window)，可以下载文件然后自行扩展图标。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
export default {
	components:{
		tuiIcon
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
✓	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-icon": "/components/thorui/tui-icon/tui-icon"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础用法

传入tui-icon的 name 属性即可展示对应的图标。

<tui-icon name="about"></tui-icon>
<tui-icon name="about-fill"></tui-icon>

图标颜色

tui-icon的 color 属性用来设置图标的颜色。

<tui-icon name="about" color="#19be6b"></tui-icon>
<tui-icon name="about-fill" color="#19be6b"></tui-icon>

图标大小

tui-icon 的 size 属性用来设置图标的尺寸大小，默认单位为 px，可使用 unit 属性设置单位。

<!--uni-app-->
<tui-icon name="about" :size="32" ></tui-icon>
<tui-icon name="about-fill" :size="48" unit="rpx"></tui-icon>

<!--微信小程序-->
<tui-icon name="about" size="{{32}}" ></tui-icon>
<tui-icon name="about-fill" size="{{48}}" unit="rpx"></tui-icon>

# 扩展图标 V2.1.0+

目前仅做了非Nvue端扩展图标示例，以下为操作步骤。Nvue端建议新增扩展组件使用，便于复用。

操作步骤

1、准备字体文件，可从 iconfont (opens new window) 下载，获取所需ttf文件和css文件；

2、如果ttf文件比较小，可直接引入使用，如果文件比较大，可能开发工具无法自动将ttf文件转换为base64，可通过网站transfonter (opens new window)手动转换；

3、将css修改调整，并放置项目中，可参考示例中文件，示例项目位置在 /static/fonts/icon-extend.css（wxss），部分内容如下：

@font-face {
	font-family: tuiExtend;
	src: url(data:font/ttf;base64,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) format("truetype");
}
.tui-icon__extend {
  font-family: "tuiExtend" !important;
  text-align: center;
  text-decoration: none;
}

.icon-forbidden:before {
  content: "\e653";
}

.icon-forbidden-fill:before {
  content: "\e654";
}

4、将css文件全局引入，uni-app可在App.vue中引入，小程序中可在app.wxss中引入

/* uni-app */
@import './static/fonts/icon-extend.css';

/* 微信小程序 */
@import './static/fonts/icon-extend.wxss';

5、使用 custom-prefix 和 name 属性自定义图标，取值对应css文件中值，其他props属性使用参考下方文档。

<tui-icon custom-prefix="tui-icon__extend" name="icon-forbidden"></tui-icon>
<tui-icon custom-prefix="tui-icon__extend" name="icon-forbidden-fill"></tui-icon>

# Slots

插槽名称	插槽说明
-	-

# Props

属性名	类型	说明	默认值
name	String	图标名称	-
customPrefix V2.1.0+	String	自定义图标，所定义字体class名称	-
size	[Number,String]	图标大小	32
unit	String	大小单位	px
color	String	图标颜色	-
bold	Boolean	是否加粗	false
margin	String	margin值设置，调整间距	0
index	Number	索引	0

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击事件，点击图标时触发	{index: Number}

# 预览

点击图标可复制 name 值

# 特别说明

该组件为 开源组件，uni-app版所有用户均可免费使用。
微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

# 线上程序扫码预览


ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码

← FAQ tui-button 按钮 →