## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
}
```
## 常见问题
告警属于开发者工具的 bug，可以忽略，具体可以看 官网文档
### 基础组件图标 {{ base }} ### 自定义组件图标 {{ custom }} 自定义图标用法，下面以 `iconfont` 为例 #### 准备图标文件 文件后缀应为`.wxss`，如下方代码块所示： ```css @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](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss` #### 引入自定义图标 - 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件 - 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件 #### 自定义图标的使用 `Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
大部分图标在 1.8.0 版本中新增，如果发现引入组件库后，部分图标无法使用，请检查安装的组件库`tdesign-miniprogram`的版本。支持中文英文搜索，如果觉得可以再增加其他关键词提示，欢迎到 图标仓库 提交PR，帮我们一起补充。