Skip to content

Commit

Permalink
docs: adjust the sample code to React 18 (ant-design#40372)
Browse files Browse the repository at this point in the history
* docs: Adjust the sample code to React 18

* fix
li-jia-nan authored and RedJue committed Apr 25, 2023
1 parent f062edc commit 841c078
Showing 4 changed files with 14 additions and 8 deletions.
9 changes: 6 additions & 3 deletions components/icon/index.en-US.md
Original file line number Diff line number Diff line change
@@ -106,13 +106,14 @@ We added a `createFromIconfontCN` function to help developer use their own icons
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
ReactDOM.createRoot(mountNode).render(<MyIcon type="icon-example" />);
```

It creates a component that uses SVG sprites in essence.
@@ -153,12 +154,14 @@ module.exports = {
```

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';

ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
```

The following properties are available for the component:
9 changes: 6 additions & 3 deletions components/icon/index.zh-CN.md
Original file line number Diff line number Diff line change
@@ -101,13 +101,14 @@ getTwoToneColor(); // #eb2f96

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
ReactDOM.createRoot(mountNode).render(<MyIcon type="icon-example" />);
```

其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
@@ -148,12 +149,14 @@ module.exports = {
```

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';

ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
```

`Icon` 中的 `component` 组件的接受的属性如下:
2 changes: 1 addition & 1 deletion docs/react/i18n.en-US.md
Original file line number Diff line number Diff line change
@@ -102,7 +102,7 @@ See more usage at [ConfigProvider](/components/config-provider).

## Adding new language

If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) language pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.ts) language pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.

Do it step by step:

2 changes: 1 addition & 1 deletion docs/react/i18n.zh-CN.md
Original file line number Diff line number Diff line change
@@ -99,7 +99,7 @@ return (

## 增加语言包

如果你找不到你需要的语言包,欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) 的基础上创建一个新的语言包,并给我们发一个 Pull Request,可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)
如果你找不到你需要的语言包,欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.ts) 的基础上创建一个新的语言包,并给我们发一个 Pull Request,可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)

基本步骤如下:

0 comments on commit 841c078

Please sign in to comment.