mini-yu/uni_modules/tdesign-uniapp/components/icon/README.md

title, description, spline, isComponent

title	description	spline	isComponent
Icon 图标	图标。	base	true

引入

可在 main.ts 或在需要使用的页面或组件中引入。

import TIcon from '@tdesign/uniapp/icon/icon.vue';

常见问题

控制台告警：Failed to load font 👇

告警属于开发者工具的 bug，可以忽略，具体可以看 官网文档

基础组件图标

{{ base }}

自定义组件图标

{{ custom }}

自定义图标用法，下面以 iconfont 为例

准备图标文件

文件后缀应为.wxss，如下方代码块所示：

@font-face {
  font-family: 'icon';  // 使用自定义的字体名称
  ···
}

.icon {
  font-family: 'icon' !important;  // 字体名称
  ···
}

.icon-a-0:before {  // icon 图标。注意 FontClass 前缀与 font-family 保持一致
  content: '\e64d';
}

• 添加所需图标，下载图标。图标库一般会提供 在线链接 或者 下载至本地 等使用方式。在线链接 方式会指向一个 .css 文件，可以下载或复制其内容，将其修改成后缀名为 .wxss 的文件
• 将 .wxss 文件中的 FontClass/Symbol前缀 与 Font Family 两项内容保持一致，如: FontClass/Symbol 前缀为 icon-，则 Font Family 为 icon。

注：若是采用 下载至本地 方式，需关注 .css 和 .ttf 文件。由于微信小程序不支持处理 ttf、woff、eot 等文件，但支持 base64，所以需要将 .ttf 文件转换为 base64 (可借助转换工具，如 transfonter.org，会得到一个 stylesheet.css 文件)，然后将 .css 文件中的 @font-face {} 内容替换为 stylesheet.css 中的 base64 内容，最后将 .css 文件修改后缀为 .wxss

引入自定义图标

• 全局引入：在项目 app.wxss，使用 @import 引入上述的 .wxss 文件
• 局部引入：在 page 对应的 .wxss 中，使用 @import 引入上述的 .wxss 文件

自定义图标的使用

<t-icon> 组件中的 prefix 属性值与前面设置的 Font Family 保持一致，即 prefix="icon"，name 属性值为自定义图标名称，如图标的 className 为 icon-a-1h，则 name="a-1h"。

图片链接

{{ iconImage }}

API

Icon Props

名称	类型	默认值	描述	必传
custom-style	Object	-	自定义样式	N
color	String	-	图标颜色	N
name	String	-	必需。图标名称或图片链接	Y
prefix	String	-	自定义图标前缀	N
size	String / Number	''	图标大小, 如 20, 20px, 48rpx, 默认单位是 px	N

Icon Events

名称	参数	描述
click	-	点击图标时触发

Icon External Classes

类名	描述
t-class	根节点样式类

CSS Variables

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值	描述
ant: norma	ant: norma	-