docs(icon): update doc

Tencent · Nov 13, 2024 · b288d27 · b288d27
1 parent 0e2f7b7
commit b288d27
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 59 deletions.
diff --git a/src/icon/icon.en-US.md b/src/icon/icon.en-US.md
@@ -4,7 +4,6 @@
 
 Icons are published and managed as a separate npm package. If you want to use it directly in your project, please install `tdesign-icons-vue-next`. At the same time, `tdesign-vue-next` also includes icons and supports direct use through `t-icon`.
 
-
 ### Import on-demand
 
 SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand.
@@ -37,10 +36,8 @@ New iconfont icons can be added by passing in the URL.
 
 The component will import default iconfont icons. If you want to disable the loading of default iconfont icons, set `loadDefaultIcons` to `false`.
 
-
 {{ iconfont-enhanced }}
 
-
 ### FAQ
 
 #### How to get all the names of icons？
@@ -50,49 +47,52 @@ You can get all the name of icon by import manifest from the bundle `import { ma
 #### the usage of full import needs network. What if my project is in a no-network scenario?
 
 if your project is in a no-network scenario, please use on-demand loading of icons. For example,`<t-icon name="add" />` should be changed to `<AddIcon />`
+
 ### All Icons
 
 <div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65;margin:16px 0">
   <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
     <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
   </svg>
-  Most icons were added to the icon library after version 0.2.0. If you find that the icon cannot be displayed normally after being imported, please check the version of tdesign-icons-vue-next you have installed</div>
+  <p style="flex:1">Most icons were added to the icon library after version 0.3.0. If you find that the icon cannot be displayed normally after being imported, please check the version of tdesign-icons-vue-next you have installed. Supports Chinese and English search. If you think other keyword prompts can be added, feel free to submit a Pull Request to <a href="https://github.com/Tencent/tdesign-icons/blob/develop/packages/view/src/manifest.js" target="_blank"> the Icon Repository</a> to help us complete it together. 
+  </p>
+</div>
 
 <td-icons-view />
 
-
 ## API
+
 ### IconSVG Props
 
-name | type | default | description | required
--- | -- | -- | -- | --
-loadDefaultIcons | Boolean | true | \- | N
-name | String | - | required | Y
-size | String | undefined | \- | N
-style | String | - | html attribute | N
-url | String / Array | - | Typescript：`string \| Array<string>` | N
-onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+| name             | type           | default   | description                                             | required |
+| ---------------- | -------------- | --------- | ------------------------------------------------------- | -------- |
+| loadDefaultIcons | Boolean        | true      | \-                                                      | N        |
+| name             | String         | -         | required                                                | Y        |
+| size             | String         | undefined | \-                                                      | N        |
+| style            | String         | -         | html attribute                                          | N        |
+| url              | String / Array | -         | Typescript：`string \| Array<string>`                   | N        |
+| onClick          | Function       |           | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N        |
 
 ### IconSVG Events
 
-name | params | description
--- | -- | --
-click | `(context: { e: MouseEvent })` | \-
+| name  | params                         | description |
+| ----- | ------------------------------ | ----------- |
+| click | `(context: { e: MouseEvent })` | \-          |
 
 ### Iconfont Props
 
-name | type | default | description | required
--- | -- | -- | -- | --
-loadDefaultIcons | Boolean | true | \- | N
-name | String | - | required | Y
-size | String | undefined | \- | N
-style | String | - | html attribute | N
-tag | String | i | \- | N
-url | String / Array | - | Typescript：`string \| Array<string>` | N
-onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+| name             | type           | default   | description                                             | required |
+| ---------------- | -------------- | --------- | ------------------------------------------------------- | -------- |
+| loadDefaultIcons | Boolean        | true      | \-                                                      | N        |
+| name             | String         | -         | required                                                | Y        |
+| size             | String         | undefined | \-                                                      | N        |
+| style            | String         | -         | html attribute                                          | N        |
+| tag              | String         | i         | \-                                                      | N        |
+| url              | String / Array | -         | Typescript：`string \| Array<string>`                   | N        |
+| onClick          | Function       |           | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N        |
 
 ### Iconfont Events
 
-name | params | description
--- | -- | --
-click | `(context: { e: MouseEvent })` | \-
+| name  | params                         | description |
+| ----- | ------------------------------ | ----------- |
+| click | `(context: { e: MouseEvent })` | \-          |
diff --git a/src/icon/icon.md b/src/icon/icon.md
@@ -3,7 +3,7 @@
 ### 安装独立 Icon 包
 
 图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-vue-next`。 同时 `tdesign-mobile-vue` 也内置了 `icon`, 支持直接通过 `t-icon` 来使用。
-图标库中共包含超过 **25** 类，**1200+** 个图标，推荐您按需引用图标，减少产物的体积。
+图标库中共包含超过 **25** 类，**2100+** 个图标，推荐您按需引用图标，减少产物的体积。
 
 ### 按需引入使用图标
 
@@ -35,7 +35,6 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon
 
 {{ enhanced }}
 
-
 ### iconfont 高级用法
 
 可以传入 url 加入新的 iconfont 图标。
@@ -46,18 +45,17 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon
 
 {{ iconfont-enhanced }}
 
-
 ### FAQ
 
 #### 如何获取全部图标的名称列表？
 
 可以通过`import { manifest } from 'tdesign-icons-vue-next'` 获取全部图标的名称列表。
 
-### t-icon、iconfont和icon使用时都会发起网络请求，我的项目是无网络场景，如何使用？
+### t-icon、iconfont 和 icon 使用时都会发起网络请求，我的项目是无网络场景，如何使用？
 
-首先明确`t-icon`、`iconfont`和`icon`三者的关系。如上面的示例所示，`iconfont`和`icon`都是从icon独立包中引入，而`t-icon`只是为了方便用户习惯，对`icon`的一个简单封装。
+首先明确`t-icon`、`iconfont`和`icon`三者的关系。如上面的示例所示，`iconfont`和`icon`都是从 icon 独立包中引入，而`t-icon`只是为了方便用户习惯，对`icon`的一个简单封装。
 
-`iconfont`需要加载图标的字体资源，而`icon`需要加载图标的svgsprite资源，这些资源都是相对来说比较大的，所以没有直接放在包里（当然不排除未来会做改动），所以会发起网络请求。
+`iconfont`需要加载图标的字体资源，而`icon`需要加载图标的 svgsprite 资源，这些资源都是相对来说比较大的，所以没有直接放在包里（当然不排除未来会做改动），所以会发起网络请求。
 
 所以如果你的项目是无网络场景，请使用按需加载的图标，如`<t-icon name="add" />`请改为`<AddIcon />`。
 
@@ -67,44 +65,45 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon
   <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
     <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
   </svg>
- 大部分图标在 0.2.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-vue-next`的版本。
+  <p style="flex: 1">大部分图标在 0.3.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-vue-next`的版本。支持中文英文搜索，如果觉得可以再增加其他关键词提示，欢迎到 <a href="https://github.com/Tencent/tdesign-icons/blob/develop/packages/view/src/manifest.js" target="_blank" > 图标仓库</a> 提交PR，帮我们一起补充。
+  </p>
 </div>
 
-
 <td-icons-view />
 
 ## API
+
 ### IconSVG Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N
-name | String | - | 必需。图标名称 | Y
-size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N
-style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N
-url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js)。TS 类型：`string \| Array<string>` | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
+| 名称             | 类型           | 默认值    | 说明                                                                                                                          | 必传 |
+| ---------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- | ---- |
+| loadDefaultIcons | Boolean        | true      | 是否加载组件库内置图标                                                                                                        | N    |
+| name             | String         | -         | 必需。图标名称                                                                                                                | Y    |
+| size             | String         | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等                                                                   | N    |
+| style            | String         | -         | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\"                                                                   | N    |
+| url              | String / Array | -         | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js)。TS 类型：`string \| Array<string>` | N    |
+| onClick          | Function       |           | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发                                                                | N    |
 
 ### IconSVG Events
 
-名称 | 参数 | 描述
--- | -- | --
-click | `(context: { e: MouseEvent })` | 点击时触发
+| 名称  | 参数                           | 描述       |
+| ----- | ------------------------------ | ---------- |
+| click | `(context: { e: MouseEvent })` | 点击时触发 |
 
 ### Iconfont Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N
-name | String | - | 必需。图标名称 | Y
-size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N
-style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N
-tag | String | i | 图标 DOM 元素，可选值：i/span/div/... | N
-url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址。TS 类型：`string \| Array<string>` | N
-onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
+| 名称             | 类型           | 默认值    | 说明                                                                                                                                                               | 必传 |
+| ---------------- | -------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- |
+| loadDefaultIcons | Boolean        | true      | 是否加载组件库内置图标                                                                                                                                             | N    |
+| name             | String         | -         | 必需。图标名称                                                                                                                                                     | Y    |
+| size             | String         | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等                                                                                                        | N    |
+| style            | String         | -         | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\"                                                                                                        | N    |
+| tag              | String         | i         | 图标 DOM 元素，可选值：i/span/div/...                                                                                                                              | N    |
+| url              | String / Array | -         | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址。TS 类型：`string \| Array<string>` | N    |
+| onClick          | Function       |           | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发                                                                                                     | N    |
 
 ### Iconfont Events
 
-名称 | 参数 | 描述
--- | -- | --
-click | `(context: { e: MouseEvent })` | 点击时触发
+| 名称  | 参数                           | 描述       |
+| ----- | ------------------------------ | ---------- |
+| click | `(context: { e: MouseEvent })` | 点击时触发 |