feat(Icon): new version (#1639)

* chore: new icon v3 * docs(icon): update doc * chore: fix format
Tencent · Nov 19, 2024 · 5301977 · 5301977
1 parent 5b3d2cc
commit 5301977
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "@vueuse/core": "10.7.0",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.2.6",
+    "tdesign-icons-vue-next": "^0.3.3",
     "validator": "^13.5.1"
   },
   "peerDependencies": {
@@ -171,7 +171,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
-    "tdesign-icons-view": "^0.2.2",
+    "tdesign-icons-view": "^0.3.2",
     "tdesign-publish-cli": "^0.0.10",
     "tdesign-site-components": "^0.15.2",
     "tslib": "^2.3.1",

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,18 +47,21 @@ 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
@@ -79,6 +79,7 @@ name | params | description
 -- | -- | --
 click | `(context: { e: MouseEvent })` | \-
 
+
 ### Iconfont Props
 
 name | type | default | description | required

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,16 +65,17 @@ 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
@@ -91,9 +90,10 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | --
 click | `(context: { e: MouseEvent })` | 点击时触发
 
+
 ### Iconfont Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N
 name | String | - | 必需。图标名称 | Y