README.md 3.9 KB


title: Icon 图标 description: 图标。 spline: base

isComponent: true

引入

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

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

代码演示

基础图标

{{ 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 inherit N 图标大小, 如 20, 20px, 48rpx, 默认单位是 px
color String initial N 图标颜色
prefix String - N 自定义图标前缀
customStyle String - N 自定义样式
external-classes Array - 组件类名,分别用于设置 组件外层元素、图片图标、基础图标等元素类名。['t-class'] N

Events

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