source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update icon component import code and documentation warnings (#55594)

Browse Source
This commit is contained in:
afc163
2025-11-04 23:00:52 +08:00
committed by GitHub
parent 51949965ce
commit 39843ae9b2
3 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.dumi/theme/builtins/ComponentMeta/index.tsx
View File

@@ -139,7 +139,10 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
}, [component, repo, source]);
// ======================== Render ========================
const importList = `import { ${transformComponentName(component)} } from "antd";`;
const importCode =
component === 'Icon'
? `import { AntDesignOutlined } from '@ant-design/icons';`
: `import { ${transformComponentName(component)} } from 'antd';`;
return (
<Descriptions
@@ -153,14 +156,14 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
{
label: locale.import,
children: (
<CopyToClipboard text={`import { ${component} } from "antd";`} onCopy={onCopy}>
<CopyToClipboard text={importCode} onCopy={onCopy}>
<Tooltip
placement="right"
title={copied ? locale.copied : locale.copy}
onOpenChange={onOpenChange}
>
<Typography.Text className={styles.code} onClick={onCopy}>
{importList}
{importCode}
</Typography.Text>
</Tooltip>
</CopyToClipboard>

8
components/icon/index.en-US.md
View File

@@ -3,11 +3,8 @@ category: Components
group: General
title: Icon
description: Semantic vector graphics.
showImport: false
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
## How to use
@@ -15,10 +12,9 @@ demo:
Before using icons, you need to install the [@ant-design/icons](https://github.com/ant-design/ant-design-icons) package:
<InstallDependencies npm='npm install @ant-design/icons@5.x --save' yarn='yarn add @ant-design/icons@5.x' pnpm='pnpm install @ant-design/icons@5.x --save' bun='bun add @ant-design/icons@5.x'></InstallDependencies>
<!-- prettier-ignore -->
:::warning{title=Tips}
Remember to use @ant-design/icons v5 with antd v5. See: [#53275](https://github.com/ant-design/ant-design/issues/53275#issuecomment-2747448317)
:::info{title=Tips}
Remember to use `@ant-design/icons@5.x` with `antd@5.x`, see: [#53275](https://github.com/ant-design/ant-design/issues/53275#issuecomment-2747448317)
:::
## List of icons

7
components/icon/index.zh-CN.md
View File

@@ -4,11 +4,8 @@ subtitle: 图标
description: 语义化的矢量图形。
group: 通用
title: Icon
showImport: false
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
## 使用方法 {#how-to-use}
@@ -18,8 +15,8 @@ demo:
<InstallDependencies npm='npm install @ant-design/icons@5.x --save' yarn='yarn add @ant-design/icons@5.x' pnpm='pnpm install @ant-design/icons@5.x --save' bun='bun add @ant-design/icons@5.x'></InstallDependencies>
<!-- prettier-ignore -->
:::warning{title=温馨提示}
使用 antd v5 时, 请确保安装配套的 @ant-design/icons v5 版本。详见 [#53275](https://github.com/ant-design/ant-design/issues/53275#issuecomment-2747448317)
:::info{title=温馨提示}
使用 antd@5.x 版本时, 请确保安装配套的 `@ant-design/icons@5.x` 版本，避免版本不匹配带来的 Context 问题。详见 [#53275](https://github.com/ant-design/ant-design/issues/53275#issuecomment-2747448317)
:::
## 设计师专属 {#designers-exclusive}