Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Icon): new version #1639

Merged
merged 3 commits into from
Nov 19, 2024
Merged

feat(Icon): new version #1639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0e2f7b7
chore: new icon v3
liweijie0812 Nov 13, 2024
b288d27
docs(icon): update doc
liweijie0812 Nov 13, 2024
c045469
chore: fix format
liweijie0812 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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",
Expand Down
11 changes: 6 additions & 5 deletions src/icon/icon.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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？
Expand All @@ -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
Expand All @@ -79,6 +79,7 @@ name | params | description
-- | -- | --
click | `(context: { e: MouseEvent })` | \-


### Iconfont Props

name | type | default | description | required
Expand Down
20 changes: 10 additions & 10 deletions src/icon/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
### 安装独立 Icon 包

图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-vue-next`。 同时 `tdesign-mobile-vue` 也内置了 `icon`, 支持直接通过 `t-icon` 来使用。
图标库中共包含超过 **25** 类，**1200+** 个图标，推荐您按需引用图标，减少产物的体积。
图标库中共包含超过 **25** 类，**2100+** 个图标，推荐您按需引用图标，减少产物的体积。

### 按需引入使用图标

Expand Down Expand Up @@ -35,7 +35,6 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon

{{ enhanced }}


### iconfont 高级用法

可以传入 url 加入新的 iconfont 图标。
Expand All @@ -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 />`。

Expand All @@ -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
Expand All @@ -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
Expand Down
Loading