diff --git a/src/icon/icon.en-US.md b/src/icon/icon.en-US.md index f357aaf77..29d15bddd 100644 --- 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,`` should be changed to `` + ### All Icons
- 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
+

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 the Icon Repository to help us complete it together. +

+ - ## 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` | N -onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| 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` | N | +| onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| 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` | N -onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| 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` | N | +| onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| 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 index 28487f186..70aed961f 100644 --- 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 资源，这些资源都是相对来说比较大的，所以没有直接放在包里（当然不排除未来会做改动），所以会发起网络请求。 所以如果你的项目是无网络场景，请使用按需加载的图标，如``请改为``。 @@ -67,44 +65,45 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon - 大部分图标在 0.2.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-vue-next`的版本。 +

大部分图标在 0.3.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-vue-next`的版本。支持中文英文搜索，如果觉得可以再增加其他关键词提示，欢迎到 图标仓库 提交PR，帮我们一起补充。 +

- ## 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` | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | 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` | N | +| onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | 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` | N -onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | 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` | N | +| onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N | ### Iconfont Events -名称 | 参数 | 描述 --- | -- | -- -click | `(context: { e: MouseEvent })` | 点击时触发 +| 名称 | 参数 | 描述 | +| ----- | ------------------------------ | ---------- | +| click | `(context: { e: MouseEvent })` | 点击时触发 |