# 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 值
# 特别说明
# 线上程序扫码预览
 |  |  |
|---|---|---|
| ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |
← FAQ tui-button 按钮 →