You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
kgdxpr e69712b1d2
'commit'
12 months ago
..
README.md 'commit' 12 months ago
icon.d.ts 'commit' 12 months ago
icon.js 'commit' 12 months ago
icon.json 'commit' 12 months ago
icon.wxml 'commit' 12 months ago
icon.wxss 'commit' 12 months ago
props.d.ts 'commit' 12 months ago
props.js 'commit' 12 months ago
type.d.ts 'commit' 12 months ago
type.js 'commit' 12 months ago

README.md

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-icon": "tdesign-miniprogram/icon/icon"
}

常见问题

控制台告警Faild 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 Familyicon

注:若是采用 下载至本地 方式,需关注 .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 属性值为自定义图标名称,如图标的 classNameicon-a-1h,则 name="a-1h"

图片链接

{{ iconImage }}

全部图标

API

Props

属性 值类型 默认值 必传 说明
name String - Y 图标名称或图片链接
size String - N 图标大小, 如 20, 20px, 48rpx, 默认单位是 px
color String - N 图标颜色
prefix String - N 自定义图标前缀
external-classes Array - 组件类名,分别用于设置 组件外层元素、图片图标、基础图标等元素类名。['t-class'] N

Events

事件 event.detail 说明
bind:click - 点击图标时触发