update icon chinese doc

6 years ago · 0db233ddb6
5 changed files with 172 additions and 1 deletions
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@ -0,0 +1,27 @@
+---
+order: 0
+title:
+  zh-CN: 基本用法
+  en-US: Basic
+---
+
+## zh-CN
+
+使用 `<Icon />` 标签声明组件，指定图标对应的 `type` 属性。
+
+## en-US
+
+Use tag `<Icon />` to create an icon and set its type in the `type` prop.
+
+````jsx
+import { Icon } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Icon type="home"/>
+    <Icon type="setting"/>
+    <Icon type="smile"/>
+  </div>,
+  mountNode
+);
+````
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@ -0,0 +1,50 @@
+---
+order: 1
+title:
+  zh-CN: 自定义图标
+  en-US: Custom Icon
+---
+
+## zh-CN
+
+利用 `Icon` 提供的 `<CustomIcon />` 组件封装一个可复用的自定义图标。可以进一步通过 `component` 属性传入一个组件来修饰 `<svg/>` 标签，以满足特定的需求。
+
+## en-US
+
+Todo, Please replace me.
+
+````jsx
+import { Icon } from 'antd';
+const CustomIcon = Icon.CustomIcon;
+
+const StarIcon = (props) => (
+  <CustomIcon {...props} viewBox="0 0 1024 1024">
+    <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" p-id="5827"></path>
+  </CustomIcon>
+);
+
+const CoolStarIcon = (props) => (
+  <StarIcon
+    component={(svgProps) => (
+      <svg {...svgProps}>
+        <defs>
+          <linearGradient id="Gradient01">
+            <stop offset="20%" stopColor="#39F" />
+            <stop offset="90%" stopColor="#F3F" />
+          </linearGradient>
+        </defs>
+        {React.cloneElement(svgProps.children, { fill: 'url(#Gradient01)' })}
+      </svg>
+    )}
+  />
+);
+
+ReactDOM.render(
+  <div>
+    <StarIcon />
+    <StarIcon style={{ color: 'pink' }} />
+    <CoolStarIcon />
+  </div>,
+  mountNode
+);
+````
--- a/components/icon/demo/iconfont.md
+++ b/components/icon/demo/iconfont.md
@ -0,0 +1,33 @@
+---
+order: 4
+title:
+  zh-CN: 使用 iconfont.cn
+  en-US: Use iconfont.cn
+---
+
+## zh-CN
+
+对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `create` 方法中的 `namespace` 和 `scriptLink` 字段， 即可轻松地使用已有项目中的图标。
+
+## en-US
+
+Todo, please replace me!
+
+````jsx
+import { Icon } from 'antd';
+
+const FooIcon = Icon.create({
+  namespace: 'foo',
+  scriptLink: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+  prefix: 'icon-'
+});
+
+ReactDOM.render(
+  <div>
+    <FooIcon type="tuichu" />
+    <FooIcon type="facebook" />
+    <FooIcon type="twitter" />
+  </div>,
+  mountNode
+);
+````
--- a/components/icon/demo/svg-sprite.md
+++ b/components/icon/demo/svg-sprite.md
@ -0,0 +1,55 @@
+---
+order: 3
+title:
+  zh-CN: SVG Sprite
+  en-US: SVG Sprite
+---
+
+## zh-CN
+
+利用 `Icon` 提供的 `create` 方法来创建一个只用来引用 `symbol` 的组件来实现 `SVG Sprite`。**但是必须提前引入SVG符号定义。**
+
+## en-US
+
+Todo, Please Replace me!
+
+```jsx
+import { Icon } from 'antd';
+
+const DemoIcon = Icon.create({
+  prefix: 'demo-',
+  viewBox: '0 0 1024 1024'
+});
+
+const svgSpriteRenderer = (nodeId, contents) => `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    id="${nodeId}"
+    style="display:none;"
+  >
+    <defs>${contents}</defs>
+  </svg>`;
+
+const messageSymbol = `
+<symbol id="demo-message">
+  <path fill="none" d="M775.1 248.9c-34.3-34.3-74.4-61.3-119-80C610.5 149.7 562 140 512 140h-1.7c-99.6.4-193 39.5-262.8 109.9-69.8 70.4-108 164.1-107.6 263.8.3 60.3 15.3 120.2 43.5 173.1l4.5 8.4V836h140.8l8.4 4.5c52.9 28.2 112.7 43.3 173.1 43.5h1.7c99 0 192-38.2 262-107.6 70.5-69.8 109.5-163.1 109.9-262.8.2-50.6-9.5-99.7-28.9-145.8-18.5-44.6-45.4-84.6-79.8-118.9zM312 560c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm200 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm200 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"></path><circle cx="512" cy="512" r="48"></circle><circle cx="712" cy="512" r="48"></circle><circle cx="312" cy="512" r="48"></circle><path d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+</symbol>`;
+
+// insert SVG symbols into document.body
+if(document) {
+  const nodeId = '__SVG_SPRITE_NODE__';
+  const spriteContent = svgSpriteRenderer(nodeId, messageSymbol);
+  const existing = document.getElementById(nodeId);
+  if (!existing) {
+    document.body.insertAdjacentHTML('afterbegin', spriteContent);
+  }
+}
+
+ReactDOM.render(
+  <div>
+    <DemoIcon type="message" />
+  </div>,
+  mountNode
+);
+```
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -27,7 +27,6 @@ toc: false
 <Icon type="link" />
 ```

-## 自定义图标

 ## 图标列表

@ -74,3 +73,10 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
 | spin | 是否有旋转动画 | boolean | false |
 | style | 设置图标的样式，例如 fontSize 和 color | object | - |
 | type | 图标类型 | string | - |
+
+<style>
+[id^="components-icon-demo-"] .code-box-demo .anticon {
+  font-size: 18px;
+  margin-right: 6px;
+}
+</style>