@fle-ui/next 1.0.0-alpha.12 → 1.0.0-alpha.13

package/docs-dist/components__icon__icon.md.js

@@ -1 +1,739 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[33],{hNwD:function(e,t,n){"use strict";n.r(t);var l=n("q1tI"),a=n.n(l),c=n("dEAq"),r=n("H1Ra");n("JjdP");t["default"]=e=>(a.a.useEffect((()=>{var t;null!==e&&void 0!==e&&null!==(t=e.location)&&void 0!==t&&t.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h1",{id:"icon-\u56fe\u6807"},a.a.createElement(c["AnchorLink"],{to:"#icon-\u56fe\u6807","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"Icon \u56fe\u6807"),a.a.createElement("p",null,"\u8bed\u4e49\u5316\u7684\u77e2\u91cf\u56fe\u5f62\u3002\u4f7f\u7528\u56fe\u6807\u7ec4\u4ef6\uff0c\u4f60\u9700\u8981\u5b89\u88c5 ",a.a.createElement("code",null,"@ant-design/icons")," \u56fe\u6807\u7ec4\u4ef6\u5305\uff1a"),a.a.createElement(r["a"],{code:"npm install --save @ant-design/icons",lang:"bash"}),a.a.createElement("h2",{id:"\u8bbe\u8ba1\u5e08\u4e13\u5c5e"},a.a.createElement(c["AnchorLink"],{to:"#\u8bbe\u8ba1\u5e08\u4e13\u5c5e","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u8bbe\u8ba1\u5e08\u4e13\u5c5e"),a.a.createElement("p",null,"\u5b89\u88c5 ",a.a.createElement(c["Link"],{to:"https://kitchen.alipay.com/"},"Kitchen Sketch \u63d2\u4ef6 \ud83d\udc8e"),"\uff0c\u5c31\u53ef\u4ee5\u4e00\u952e\u62d6\u62fd\u4f7f\u7528 Ant Design \u548c Iconfont \u7684\u6d77\u91cf\u56fe\u6807\uff0c\u8fd8\u53ef\u4ee5\u5173\u8054\u81ea\u6709\u9879\u76ee\u3002"),a.a.createElement("h2",{id:"\u56fe\u6807\u5217\u8868"},a.a.createElement(c["AnchorLink"],{to:"#\u56fe\u6807\u5217\u8868","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u56fe\u6807\u5217\u8868"),a.a.createElement("h3",{id:"\u7b80\u5355\u5217\u8868"},a.a.createElement(c["AnchorLink"],{to:"#\u7b80\u5355\u5217\u8868","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u7b80\u5355\u5217\u8868"),a.a.createElement("h2",{id:"api"},a.a.createElement(c["AnchorLink"],{to:"#api","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"API"),a.a.createElement("p",null,"\u4ece 4.0 \u5f00\u59cb\uff0cantd \u4e0d\u518d\u5185\u7f6e Icon \u7ec4\u4ef6\uff0c\u8bf7\u4f7f\u7528\u72ec\u7acb\u7684\u5305 ",a.a.createElement("code",null,"@ant-design/icons"),"\u3002"),a.a.createElement("h3",{id:"\u901a\u7528\u56fe\u6807"},a.a.createElement(c["AnchorLink"],{to:"#\u901a\u7528\u56fe\u6807","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u901a\u7528\u56fe\u6807"),a.a.createElement("table",null,a.a.createElement("thead",null,a.a.createElement("tr",null,a.a.createElement("th",null,"\u53c2\u6570"),a.a.createElement("th",null,"\u8bf4\u660e"),a.a.createElement("th",null,"\u7c7b\u578b"),a.a.createElement("th",null,"\u9ed8\u8ba4\u503c"),a.a.createElement("th",null,"\u7248\u672c"))),a.a.createElement("tbody",null,a.a.createElement("tr",null,a.a.createElement("td",null,"className"),a.a.createElement("td",null,"\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\u540d"),a.a.createElement("td",null,"string"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"rotate"),a.a.createElement("td",null,"\u56fe\u6807\u65cb\u8f6c\u89d2\u5ea6\uff08IE9 \u65e0\u6548\uff09"),a.a.createElement("td",null,"number"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"spin"),a.a.createElement("td",null,"\u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b"),a.a.createElement("td",null,"boolean"),a.a.createElement("td",null,"false"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"style"),a.a.createElement("td",null,"\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 ",a.a.createElement("code",null,"fontSize")," \u548c ",a.a.createElement("code",null,"color")),a.a.createElement("td",null,"CSSProperties"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"twoToneColor"),a.a.createElement("td",null,"\u4ec5\u9002\u7528\u53cc\u8272\u56fe\u6807\u3002\u8bbe\u7f6e\u53cc\u8272\u56fe\u6807\u7684\u4e3b\u8981\u989c\u8272"),a.a.createElement("td",null,"string (\u5341\u516d\u8fdb\u5236\u989c\u8272)"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)))),a.a.createElement("p",null,"\u5176\u4e2d\u6211\u4eec\u63d0\u4f9b\u4e86\u4e09\u79cd\u4e3b\u9898\u7684\u56fe\u6807\uff0c\u4e0d\u540c\u4e3b\u9898\u7684 Icon \u7ec4\u4ef6\u540d\u4e3a\u56fe\u6807\u540d\u52a0\u4e3b\u9898\u505a\u4e3a\u540e\u7f00\u3002"),a.a.createElement(r["a"],{code:"import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';\n\n<StarOutlined />\n<StarFilled />\n<StarTwoTone twoToneColor=\"#eb2f96\" />",lang:"bash"}),a.a.createElement("h3",{id:"\u81ea\u5b9a\u4e49-icon"},a.a.createElement(c["AnchorLink"],{to:"#\u81ea\u5b9a\u4e49-icon","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u81ea\u5b9a\u4e49 Icon"),a.a.createElement("table",null,a.a.createElement("thead",null,a.a.createElement("tr",null,a.a.createElement("th",null,"\u53c2\u6570"),a.a.createElement("th",null,"\u8bf4\u660e"),a.a.createElement("th",null,"\u7c7b\u578b"),a.a.createElement("th",null,"\u9ed8\u8ba4\u503c"),a.a.createElement("th",null,"\u7248\u672c"))),a.a.createElement("tbody",null,a.a.createElement("tr",null,a.a.createElement("td",null,"component"),a.a.createElement("td",null,"\u63a7\u5236\u5982\u4f55\u6e32\u67d3\u56fe\u6807\uff0c\u901a\u5e38\u662f\u4e00\u4e2a\u6e32\u67d3\u6839\u6807\u7b7e\u4e3a ",a.a.createElement("code",null,"<svg>")," \u7684 React \u7ec4\u4ef6"),a.a.createElement("td",null,"ComponentType<CustomIconComponentProps>"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"rotate"),a.a.createElement("td",null,"\u56fe\u6807\u65cb\u8f6c\u89d2\u5ea6\uff08IE9 \u65e0\u6548\uff09"),a.a.createElement("td",null,"number"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"spin"),a.a.createElement("td",null,"\u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b"),a.a.createElement("td",null,"boolean"),a.a.createElement("td",null,"false"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"style"),a.a.createElement("td",null,"\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 ",a.a.createElement("code",null,"fontSize")," \u548c ",a.a.createElement("code",null,"color")),a.a.createElement("td",null,"CSSProperties"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)))),a.a.createElement("h3",{id:"\u5173\u4e8e-svg-\u56fe\u6807"},a.a.createElement(c["AnchorLink"],{to:"#\u5173\u4e8e-svg-\u56fe\u6807","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u5173\u4e8e SVG \u56fe\u6807"),a.a.createElement("p",null,"\u5728 ",a.a.createElement("code",null,"3.9.0")," \u4e4b\u540e\uff0c\u6211\u4eec\u4f7f\u7528\u4e86 SVG \u56fe\u6807\u66ff\u6362\u4e86\u539f\u5148\u7684 font \u56fe\u6807\uff0c\u4ece\u800c\u5e26\u6765\u4e86\u4ee5\u4e0b\u4f18\u52bf\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u5b8c\u5168\u79bb\u7ebf\u5316\u4f7f\u7528\uff0c\u4e0d\u9700\u8981\u4ece CDN \u4e0b\u8f7d\u5b57\u4f53\u6587\u4ef6\uff0c\u56fe\u6807\u4e0d\u4f1a\u56e0\u4e3a\u7f51\u7edc\u95ee\u9898\u5448\u73b0\u65b9\u5757\uff0c\u4e5f\u65e0\u9700\u5b57\u4f53\u6587\u4ef6\u672c\u5730\u90e8\u7f72\u3002"),a.a.createElement("li",null,"\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a SVG \u6709\u66f4\u597d\u7684\u6e05\u6670\u5ea6\u3002"),a.a.createElement("li",null,"\u652f\u6301\u591a\u8272\u56fe\u6807\u3002"),a.a.createElement("li",null,"\u5bf9\u4e8e\u5185\u5efa\u56fe\u6807\u7684\u66f4\u6362\u53ef\u4ee5\u63d0\u4f9b\u66f4\u591a API\uff0c\u800c\u4e0d\u9700\u8981\u8fdb\u884c\u6837\u5f0f\u8986\u76d6\u3002")),a.a.createElement("p",null,"\u66f4\u591a\u8ba8\u8bba\u53ef\u53c2\u8003\uff1a",a.a.createElement(c["Link"],{to:"https://github.com/ant-design/ant-design/issues/10353"},"#10353"),"\u3002"),a.a.createElement("p",null,"\u6240\u6709\u7684\u56fe\u6807\u90fd\u4f1a\u4ee5 ",a.a.createElement("code",null,"<svg>")," \u6807\u7b7e\u6e32\u67d3\uff0c\u53ef\u4ee5\u4f7f\u7528 ",a.a.createElement("code",null,"style")," \u548c ",a.a.createElement("code",null,"className")," \u8bbe\u7f6e\u56fe\u6807\u7684\u5927\u5c0f\u548c\u5355\u8272\u56fe\u6807\u7684\u989c\u8272\u3002\u4f8b\u5982\uff1a"),a.a.createElement(r["a"],{code:"import { MessageOutlined } from '@ant-design/icons';\n\n<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;",lang:"bash"}),a.a.createElement("h3",{id:"\u53cc\u8272\u56fe\u6807\u4e3b\u8272"},a.a.createElement(c["AnchorLink"],{to:"#\u53cc\u8272\u56fe\u6807\u4e3b\u8272","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u53cc\u8272\u56fe\u6807\u4e3b\u8272"),a.a.createElement("p",null,"\u5bf9\u4e8e\u53cc\u8272\u56fe\u6807\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 ",a.a.createElement("code",null,"getTwoToneColor()")," \u548c ",a.a.createElement("code",null,"setTwoToneColor(colorString)")," \u6765\u5168\u5c40\u8bbe\u7f6e\u56fe\u6807\u4e3b\u8272\u3002"),a.a.createElement(r["a"],{code:"import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';\n\nsetTwoToneColor('#eb2f96');\ngetTwoToneColor(); // #eb2f96",lang:"bash"}),a.a.createElement("h3",{id:"\u81ea\u5b9a\u4e49-font-\u56fe\u6807"},a.a.createElement(c["AnchorLink"],{to:"#\u81ea\u5b9a\u4e49-font-\u56fe\u6807","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u81ea\u5b9a\u4e49 font \u56fe\u6807"),a.a.createElement("p",null,"\u5728 ",a.a.createElement("code",null,"3.9.0")," \u4e4b\u540e\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u4e00\u4e2a ",a.a.createElement("code",null,"createFromIconfontCN")," \u65b9\u6cd5\uff0c\u65b9\u4fbf\u5f00\u53d1\u8005\u8c03\u7528\u5728 ",a.a.createElement(c["Link"],{to:"http://iconfont.cn/"},"iconfont.cn")," \u4e0a\u81ea\u884c\u7ba1\u7406\u7684\u56fe\u6807\u3002"),a.a.createElement(r["a"],{code:"import { createFromIconfontCN } from '@ant-design/icons';\n\nconst MyIcon = createFromIconfontCN({\n  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // \u5728 iconfont.cn \u4e0a\u751f\u6210\n});\n\nReactDOM.render(<MyIcon type=\"icon-example\" />, mountedNode);",lang:"bash"}),a.a.createElement("p",null,"\u5176\u672c\u8d28\u4e0a\u662f\u521b\u5efa\u4e86\u4e00\u4e2a\u4f7f\u7528 ",a.a.createElement("code",null,"<use>")," \u6807\u7b7e\u6765\u6e32\u67d3\u56fe\u6807\u7684\u7ec4\u4ef6\u3002"),a.a.createElement("p",null,"options \u7684\u914d\u7f6e\u9879\u5982\u4e0b\uff1a"),a.a.createElement("table",null,a.a.createElement("thead",null,a.a.createElement("tr",null,a.a.createElement("th",null,"\u53c2\u6570"),a.a.createElement("th",null,"\u8bf4\u660e"),a.a.createElement("th",null,"\u7c7b\u578b"),a.a.createElement("th",null,"\u9ed8\u8ba4\u503c"),a.a.createElement("th",null,"\u7248\u672c"))),a.a.createElement("tbody",null,a.a.createElement("tr",null,a.a.createElement("td",null,"extraCommonProps"),a.a.createElement("td",null,"\u7ed9\u6240\u6709\u7684 ",a.a.createElement("code",null,"svg")," \u56fe\u6807 ",a.a.createElement("code",null,"<Icon />")," \u7ec4\u4ef6\u8bbe\u7f6e\u989d\u5916\u7684\u5c5e\u6027"),a.a.createElement("td",null,"{"," [key: string]: any ","}"),a.a.createElement("td",null,"{","}"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"scriptUrl"),a.a.createElement("td",null,a.a.createElement(c["Link"],{to:"http://iconfont.cn/"},"iconfont.cn")," \u9879\u76ee\u5728\u7ebf\u751f\u6210\u7684 js \u5730\u5740\uff0c",a.a.createElement("code",null,"@ant-design/icons@4.1.0")," \u4e4b\u540e\u652f\u6301 ",a.a.createElement("code",null,"string[]")," \u7c7b\u578b"),a.a.createElement("td",null,"string | string[]"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)))),a.a.createElement("p",null,"\u5728 ",a.a.createElement("code",null,"scriptUrl")," \u90fd\u8bbe\u7f6e\u6709\u6548\u7684\u60c5\u51b5\u4e0b\uff0c\u7ec4\u4ef6\u5728\u6e32\u67d3\u524d\u4f1a\u81ea\u52a8\u5f15\u5165 ",a.a.createElement(c["Link"],{to:"http://iconfont.cn/"},"iconfont.cn")," \u9879\u76ee\u4e2d\u7684\u56fe\u6807\u7b26\u53f7\u96c6\uff0c\u65e0\u9700\u624b\u52a8\u5f15\u5165\u3002"),a.a.createElement("p",null,"\u89c1 ",a.a.createElement(c["Link"],{to:"http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code"},"iconfont.cn \u4f7f\u7528\u5e2e\u52a9")," \u67e5\u770b\u5982\u4f55\u751f\u6210 js \u5730\u5740\u3002"),a.a.createElement("h3",{id:"\u81ea\u5b9a\u4e49-svg-\u56fe\u6807"},a.a.createElement(c["AnchorLink"],{to:"#\u81ea\u5b9a\u4e49-svg-\u56fe\u6807","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u81ea\u5b9a\u4e49 SVG \u56fe\u6807"),a.a.createElement("p",null,"\u5982\u679c\u4f7f\u7528 ",a.a.createElement("code",null,"webpack"),"\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e ",a.a.createElement(c["Link"],{to:"https://www.npmjs.com/package/@svgr/webpack"},"@svgr/webpack")," \u6765\u5c06 ",a.a.createElement("code",null,"svg")," \u56fe\u6807\u4f5c\u4e3a ",a.a.createElement("code",null,"React")," \u7ec4\u4ef6\u5bfc\u5165\u3002",a.a.createElement("code",null,"@svgr/webpack")," \u7684 ",a.a.createElement("code",null,"options")," \u9009\u9879\u8bf7\u53c2\u9605 ",a.a.createElement(c["Link"],{to:"https://github.com/smooth-code/svgr#options"},"svgr \u6587\u6863"),"\u3002"),a.a.createElement(r["a"],{code:"// webpack.config.js\n{\n  test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n  use: [\n    {\n      loader: 'babel-loader',\n    },\n    {\n      loader: '@svgr/webpack',\n      options: {\n        babel: false,\n        icon: true,\n      },\n    },\n  ],\n}",lang:"bash"}),a.a.createElement(r["a"],{code:"import Icon from '@ant-design/icons';\nimport MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.\n// in create-react-app:\n// import { ReactComponent as MessageSvg } from 'path/to/message.svg';\n\nReactDOM.render(<Icon component={MessageSvg} />, mountNode);",lang:"bash"}),a.a.createElement("p",null,a.a.createElement("code",null,"Icon")," \u4e2d\u7684 ",a.a.createElement("code",null,"component")," \u7ec4\u4ef6\u7684\u63a5\u53d7\u7684\u5c5e\u6027\u5982\u4e0b\uff1a"),a.a.createElement("table",null,a.a.createElement("thead",null,a.a.createElement("tr",null,a.a.createElement("th",null,"\u5b57\u6bb5"),a.a.createElement("th",null,"\u8bf4\u660e"),a.a.createElement("th",null,"\u7c7b\u578b"),a.a.createElement("th",null,"\u53ea\u8bfb\u503c"),a.a.createElement("th",null,"\u7248\u672c"))),a.a.createElement("tbody",null,a.a.createElement("tr",null,a.a.createElement("td",null,"className"),a.a.createElement("td",null,"\u8ba1\u7b97\u540e\u7684 ",a.a.createElement("code",null,"svg")," \u7c7b\u540d"),a.a.createElement("td",null,"string"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"fill"),a.a.createElement("td",null,a.a.createElement("code",null,"svg")," \u5143\u7d20\u586b\u5145\u7684\u989c\u8272"),a.a.createElement("td",null,"string"),a.a.createElement("td",null,a.a.createElement("code",null,"currentColor")),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"height"),a.a.createElement("td",null,a.a.createElement("code",null,"svg")," \u5143\u7d20\u9ad8\u5ea6"),a.a.createElement("td",null,"string | number"),a.a.createElement("td",null,a.a.createElement("code",null,"1em")),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"style"),a.a.createElement("td",null,"\u8ba1\u7b97\u540e\u7684 ",a.a.createElement("code",null,"svg")," \u5143\u7d20\u6837\u5f0f"),a.a.createElement("td",null,"CSSProperties"),a.a.createElement("td",null,"-"),a.a.createElement("td",null)),a.a.createElement("tr",null,a.a.createElement("td",null,"width"),a.a.createElement("td",null,a.a.createElement("code",null,"svg")," \u5143\u7d20\u5bbd\u5ea6"),a.a.createElement("td",null,"string | number"),a.a.createElement("td",null,a.a.createElement("code",null,"1em")),a.a.createElement("td",null)))))))}}]);
+(window['webpackJsonp'] = window['webpackJsonp'] || []).push([
+  [33],
+  {
+    hNwD: function (e, t, n) {
+      'use strict';
+      n.r(t);
+      var l = n('q1tI'),
+        a = n.n(l),
+        c = n('dEAq'),
+        r = n('H1Ra');
+      n('JjdP');
+      t['default'] = (e) => (
+        a.a.useEffect(() => {
+          var t;
+          null !== e &&
+            void 0 !== e &&
+            null !== (t = e.location) &&
+            void 0 !== t &&
+            t.hash &&
+            c['AnchorLink'].scrollToAnchor(
+              decodeURIComponent(e.location.hash.slice(1)),
+            );
+        }, []),
+        a.a.createElement(
+          a.a.Fragment,
+          null,
+          a.a.createElement(
+            'div',
+            { className: 'markdown' },
+            a.a.createElement(
+              'h1',
+              { id: 'icon-\u56fe\u6807' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#icon-\u56fe\u6807',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              'Icon \u56fe\u6807',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u8bed\u4e49\u5316\u7684\u77e2\u91cf\u56fe\u5f62\u3002\u4f7f\u7528\u56fe\u6807\u7ec4\u4ef6\uff0c\u4f60\u9700\u8981\u5b89\u88c5 ',
+              a.a.createElement('code', null, '@ant-design/icons'),
+              ' \u56fe\u6807\u7ec4\u4ef6\u5305\uff1a',
+            ),
+            a.a.createElement(r['a'], {
+              code: 'npm install --save @ant-design/icons',
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'h2',
+              { id: '\u8bbe\u8ba1\u5e08\u4e13\u5c5e' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u8bbe\u8ba1\u5e08\u4e13\u5c5e',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u8bbe\u8ba1\u5e08\u4e13\u5c5e',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5b89\u88c5 ',
+              a.a.createElement(
+                c['Link'],
+                { to: 'https://kitchen.alipay.com/' },
+                'Kitchen Sketch \u63d2\u4ef6 \ud83d\udc8e',
+              ),
+              '\uff0c\u5c31\u53ef\u4ee5\u4e00\u952e\u62d6\u62fd\u4f7f\u7528 Ant Design \u548c Iconfont \u7684\u6d77\u91cf\u56fe\u6807\uff0c\u8fd8\u53ef\u4ee5\u5173\u8054\u81ea\u6709\u9879\u76ee\u3002',
+            ),
+            a.a.createElement(
+              'h2',
+              { id: '\u56fe\u6807\u5217\u8868' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u56fe\u6807\u5217\u8868',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u56fe\u6807\u5217\u8868',
+            ),
+            a.a.createElement(
+              'h3',
+              { id: '\u7b80\u5355\u5217\u8868' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u7b80\u5355\u5217\u8868',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u7b80\u5355\u5217\u8868',
+            ),
+            a.a.createElement(
+              'h2',
+              { id: 'api' },
+              a.a.createElement(
+                c['AnchorLink'],
+                { to: '#api', 'aria-hidden': 'true', tabIndex: -1 },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              'API',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u4ece 4.0 \u5f00\u59cb\uff0cantd \u4e0d\u518d\u5185\u7f6e Icon \u7ec4\u4ef6\uff0c\u8bf7\u4f7f\u7528\u72ec\u7acb\u7684\u5305 ',
+              a.a.createElement('code', null, '@ant-design/icons'),
+              '\u3002',
+            ),
+            a.a.createElement(
+              'h3',
+              { id: '\u901a\u7528\u56fe\u6807' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u901a\u7528\u56fe\u6807',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u901a\u7528\u56fe\u6807',
+            ),
+            a.a.createElement(
+              'table',
+              null,
+              a.a.createElement(
+                'thead',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('th', null, '\u53c2\u6570'),
+                  a.a.createElement('th', null, '\u8bf4\u660e'),
+                  a.a.createElement('th', null, '\u7c7b\u578b'),
+                  a.a.createElement('th', null, '\u9ed8\u8ba4\u503c'),
+                  a.a.createElement('th', null, '\u7248\u672c'),
+                ),
+              ),
+              a.a.createElement(
+                'tbody',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'className'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\u540d',
+                  ),
+                  a.a.createElement('td', null, 'string'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'rotate'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u56fe\u6807\u65cb\u8f6c\u89d2\u5ea6\uff08IE9 \u65e0\u6548\uff09',
+                  ),
+                  a.a.createElement('td', null, 'number'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'spin'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b',
+                  ),
+                  a.a.createElement('td', null, 'boolean'),
+                  a.a.createElement('td', null, 'false'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'style'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 ',
+                    a.a.createElement('code', null, 'fontSize'),
+                    ' \u548c ',
+                    a.a.createElement('code', null, 'color'),
+                  ),
+                  a.a.createElement('td', null, 'CSSProperties'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'twoToneColor'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u4ec5\u9002\u7528\u53cc\u8272\u56fe\u6807\u3002\u8bbe\u7f6e\u53cc\u8272\u56fe\u6807\u7684\u4e3b\u8981\u989c\u8272',
+                  ),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    'string (\u5341\u516d\u8fdb\u5236\u989c\u8272)',
+                  ),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+              ),
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5176\u4e2d\u6211\u4eec\u63d0\u4f9b\u4e86\u4e09\u79cd\u4e3b\u9898\u7684\u56fe\u6807\uff0c\u4e0d\u540c\u4e3b\u9898\u7684 Icon \u7ec4\u4ef6\u540d\u4e3a\u56fe\u6807\u540d\u52a0\u4e3b\u9898\u505a\u4e3a\u540e\u7f00\u3002',
+            ),
+            a.a.createElement(r['a'], {
+              code: 'import { StarOutlined, StarFilled, StarTwoTone } from \'@ant-design/icons\';\n\n<StarOutlined />\n<StarFilled />\n<StarTwoTone twoToneColor="#eb2f96" />',
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'h3',
+              { id: '\u81ea\u5b9a\u4e49-icon' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u81ea\u5b9a\u4e49-icon',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u81ea\u5b9a\u4e49 Icon',
+            ),
+            a.a.createElement(
+              'table',
+              null,
+              a.a.createElement(
+                'thead',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('th', null, '\u53c2\u6570'),
+                  a.a.createElement('th', null, '\u8bf4\u660e'),
+                  a.a.createElement('th', null, '\u7c7b\u578b'),
+                  a.a.createElement('th', null, '\u9ed8\u8ba4\u503c'),
+                  a.a.createElement('th', null, '\u7248\u672c'),
+                ),
+              ),
+              a.a.createElement(
+                'tbody',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'component'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u63a7\u5236\u5982\u4f55\u6e32\u67d3\u56fe\u6807\uff0c\u901a\u5e38\u662f\u4e00\u4e2a\u6e32\u67d3\u6839\u6807\u7b7e\u4e3a ',
+                    a.a.createElement('code', null, '<svg>'),
+                    ' \u7684 React \u7ec4\u4ef6',
+                  ),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    'ComponentType<CustomIconComponentProps>',
+                  ),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'rotate'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u56fe\u6807\u65cb\u8f6c\u89d2\u5ea6\uff08IE9 \u65e0\u6548\uff09',
+                  ),
+                  a.a.createElement('td', null, 'number'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'spin'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b',
+                  ),
+                  a.a.createElement('td', null, 'boolean'),
+                  a.a.createElement('td', null, 'false'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'style'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 ',
+                    a.a.createElement('code', null, 'fontSize'),
+                    ' \u548c ',
+                    a.a.createElement('code', null, 'color'),
+                  ),
+                  a.a.createElement('td', null, 'CSSProperties'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+              ),
+            ),
+            a.a.createElement(
+              'h3',
+              { id: '\u5173\u4e8e-svg-\u56fe\u6807' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u5173\u4e8e-svg-\u56fe\u6807',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u5173\u4e8e SVG \u56fe\u6807',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5728 ',
+              a.a.createElement('code', null, '3.9.0'),
+              ' \u4e4b\u540e\uff0c\u6211\u4eec\u4f7f\u7528\u4e86 SVG \u56fe\u6807\u66ff\u6362\u4e86\u539f\u5148\u7684 font \u56fe\u6807\uff0c\u4ece\u800c\u5e26\u6765\u4e86\u4ee5\u4e0b\u4f18\u52bf\uff1a',
+            ),
+            a.a.createElement(
+              'ul',
+              null,
+              a.a.createElement(
+                'li',
+                null,
+                '\u5b8c\u5168\u79bb\u7ebf\u5316\u4f7f\u7528\uff0c\u4e0d\u9700\u8981\u4ece CDN \u4e0b\u8f7d\u5b57\u4f53\u6587\u4ef6\uff0c\u56fe\u6807\u4e0d\u4f1a\u56e0\u4e3a\u7f51\u7edc\u95ee\u9898\u5448\u73b0\u65b9\u5757\uff0c\u4e5f\u65e0\u9700\u5b57\u4f53\u6587\u4ef6\u672c\u5730\u90e8\u7f72\u3002',
+              ),
+              a.a.createElement(
+                'li',
+                null,
+                '\u5728\u4f4e\u7aef\u8bbe\u5907\u4e0a SVG \u6709\u66f4\u597d\u7684\u6e05\u6670\u5ea6\u3002',
+              ),
+              a.a.createElement(
+                'li',
+                null,
+                '\u652f\u6301\u591a\u8272\u56fe\u6807\u3002',
+              ),
+              a.a.createElement(
+                'li',
+                null,
+                '\u5bf9\u4e8e\u5185\u5efa\u56fe\u6807\u7684\u66f4\u6362\u53ef\u4ee5\u63d0\u4f9b\u66f4\u591a API\uff0c\u800c\u4e0d\u9700\u8981\u8fdb\u884c\u6837\u5f0f\u8986\u76d6\u3002',
+              ),
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u66f4\u591a\u8ba8\u8bba\u53ef\u53c2\u8003\uff1a',
+              a.a.createElement(
+                c['Link'],
+                { to: 'https://github.com/ant-design/ant-design/issues/10353' },
+                '#10353',
+              ),
+              '\u3002',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u6240\u6709\u7684\u56fe\u6807\u90fd\u4f1a\u4ee5 ',
+              a.a.createElement('code', null, '<svg>'),
+              ' \u6807\u7b7e\u6e32\u67d3\uff0c\u53ef\u4ee5\u4f7f\u7528 ',
+              a.a.createElement('code', null, 'style'),
+              ' \u548c ',
+              a.a.createElement('code', null, 'className'),
+              ' \u8bbe\u7f6e\u56fe\u6807\u7684\u5927\u5c0f\u548c\u5355\u8272\u56fe\u6807\u7684\u989c\u8272\u3002\u4f8b\u5982\uff1a',
+            ),
+            a.a.createElement(r['a'], {
+              code: "import { MessageOutlined } from '@ant-design/icons';\n\n<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;",
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'h3',
+              { id: '\u53cc\u8272\u56fe\u6807\u4e3b\u8272' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u53cc\u8272\u56fe\u6807\u4e3b\u8272',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u53cc\u8272\u56fe\u6807\u4e3b\u8272',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5bf9\u4e8e\u53cc\u8272\u56fe\u6807\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 ',
+              a.a.createElement('code', null, 'getTwoToneColor()'),
+              ' \u548c ',
+              a.a.createElement('code', null, 'setTwoToneColor(colorString)'),
+              ' \u6765\u5168\u5c40\u8bbe\u7f6e\u56fe\u6807\u4e3b\u8272\u3002',
+            ),
+            a.a.createElement(r['a'], {
+              code: "import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';\n\nsetTwoToneColor('#eb2f96');\ngetTwoToneColor(); // #eb2f96",
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'h3',
+              { id: '\u81ea\u5b9a\u4e49-font-\u56fe\u6807' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u81ea\u5b9a\u4e49-font-\u56fe\u6807',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u81ea\u5b9a\u4e49 font \u56fe\u6807',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5728 ',
+              a.a.createElement('code', null, '3.9.0'),
+              ' \u4e4b\u540e\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86\u4e00\u4e2a ',
+              a.a.createElement('code', null, 'createFromIconfontCN'),
+              ' \u65b9\u6cd5\uff0c\u65b9\u4fbf\u5f00\u53d1\u8005\u8c03\u7528\u5728 ',
+              a.a.createElement(
+                c['Link'],
+                { to: 'http://iconfont.cn/' },
+                'iconfont.cn',
+              ),
+              ' \u4e0a\u81ea\u884c\u7ba1\u7406\u7684\u56fe\u6807\u3002',
+            ),
+            a.a.createElement(r['a'], {
+              code: "import { createFromIconfontCN } from '@ant-design/icons';\n\nconst MyIcon = createFromIconfontCN({\n  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // \u5728 iconfont.cn \u4e0a\u751f\u6210\n});\n\nReactDOM.render(<MyIcon type=\"icon-example\" />, mountedNode);",
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5176\u672c\u8d28\u4e0a\u662f\u521b\u5efa\u4e86\u4e00\u4e2a\u4f7f\u7528 ',
+              a.a.createElement('code', null, '<use>'),
+              ' \u6807\u7b7e\u6765\u6e32\u67d3\u56fe\u6807\u7684\u7ec4\u4ef6\u3002',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              'options \u7684\u914d\u7f6e\u9879\u5982\u4e0b\uff1a',
+            ),
+            a.a.createElement(
+              'table',
+              null,
+              a.a.createElement(
+                'thead',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('th', null, '\u53c2\u6570'),
+                  a.a.createElement('th', null, '\u8bf4\u660e'),
+                  a.a.createElement('th', null, '\u7c7b\u578b'),
+                  a.a.createElement('th', null, '\u9ed8\u8ba4\u503c'),
+                  a.a.createElement('th', null, '\u7248\u672c'),
+                ),
+              ),
+              a.a.createElement(
+                'tbody',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'extraCommonProps'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u7ed9\u6240\u6709\u7684 ',
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u56fe\u6807 ',
+                    a.a.createElement('code', null, '<Icon />'),
+                    ' \u7ec4\u4ef6\u8bbe\u7f6e\u989d\u5916\u7684\u5c5e\u6027',
+                  ),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '{',
+                    ' [key: string]: any ',
+                    '}',
+                  ),
+                  a.a.createElement('td', null, '{', '}'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'scriptUrl'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement(
+                      c['Link'],
+                      { to: 'http://iconfont.cn/' },
+                      'iconfont.cn',
+                    ),
+                    ' \u9879\u76ee\u5728\u7ebf\u751f\u6210\u7684 js \u5730\u5740\uff0c',
+                    a.a.createElement('code', null, '@ant-design/icons@4.1.0'),
+                    ' \u4e4b\u540e\u652f\u6301 ',
+                    a.a.createElement('code', null, 'string[]'),
+                    ' \u7c7b\u578b',
+                  ),
+                  a.a.createElement('td', null, 'string | string[]'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+              ),
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5728 ',
+              a.a.createElement('code', null, 'scriptUrl'),
+              ' \u90fd\u8bbe\u7f6e\u6709\u6548\u7684\u60c5\u51b5\u4e0b\uff0c\u7ec4\u4ef6\u5728\u6e32\u67d3\u524d\u4f1a\u81ea\u52a8\u5f15\u5165 ',
+              a.a.createElement(
+                c['Link'],
+                { to: 'http://iconfont.cn/' },
+                'iconfont.cn',
+              ),
+              ' \u9879\u76ee\u4e2d\u7684\u56fe\u6807\u7b26\u53f7\u96c6\uff0c\u65e0\u9700\u624b\u52a8\u5f15\u5165\u3002',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u89c1 ',
+              a.a.createElement(
+                c['Link'],
+                {
+                  to: 'http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code',
+                },
+                'iconfont.cn \u4f7f\u7528\u5e2e\u52a9',
+              ),
+              ' \u67e5\u770b\u5982\u4f55\u751f\u6210 js \u5730\u5740\u3002',
+            ),
+            a.a.createElement(
+              'h3',
+              { id: '\u81ea\u5b9a\u4e49-svg-\u56fe\u6807' },
+              a.a.createElement(
+                c['AnchorLink'],
+                {
+                  to: '#\u81ea\u5b9a\u4e49-svg-\u56fe\u6807',
+                  'aria-hidden': 'true',
+                  tabIndex: -1,
+                },
+                a.a.createElement('span', { className: 'icon icon-link' }),
+              ),
+              '\u81ea\u5b9a\u4e49 SVG \u56fe\u6807',
+            ),
+            a.a.createElement(
+              'p',
+              null,
+              '\u5982\u679c\u4f7f\u7528 ',
+              a.a.createElement('code', null, 'webpack'),
+              '\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e ',
+              a.a.createElement(
+                c['Link'],
+                { to: 'https://www.npmjs.com/package/@svgr/webpack' },
+                '@svgr/webpack',
+              ),
+              ' \u6765\u5c06 ',
+              a.a.createElement('code', null, 'svg'),
+              ' \u56fe\u6807\u4f5c\u4e3a ',
+              a.a.createElement('code', null, 'React'),
+              ' \u7ec4\u4ef6\u5bfc\u5165\u3002',
+              a.a.createElement('code', null, '@svgr/webpack'),
+              ' \u7684 ',
+              a.a.createElement('code', null, 'options'),
+              ' \u9009\u9879\u8bf7\u53c2\u9605 ',
+              a.a.createElement(
+                c['Link'],
+                { to: 'https://github.com/smooth-code/svgr#options' },
+                'svgr \u6587\u6863',
+              ),
+              '\u3002',
+            ),
+            a.a.createElement(r['a'], {
+              code: "// webpack.config.js\n{\n  test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n  use: [\n    {\n      loader: 'babel-loader',\n    },\n    {\n      loader: '@svgr/webpack',\n      options: {\n        babel: false,\n        icon: true,\n      },\n    },\n  ],\n}",
+              lang: 'bash',
+            }),
+            a.a.createElement(r['a'], {
+              code: "import Icon from '@ant-design/icons';\nimport MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.\n// in create-react-app:\n// import { ReactComponent as MessageSvg } from 'path/to/message.svg';\n\nReactDOM.render(<Icon component={MessageSvg} />, mountNode);",
+              lang: 'bash',
+            }),
+            a.a.createElement(
+              'p',
+              null,
+              a.a.createElement('code', null, 'Icon'),
+              ' \u4e2d\u7684 ',
+              a.a.createElement('code', null, 'component'),
+              ' \u7ec4\u4ef6\u7684\u63a5\u53d7\u7684\u5c5e\u6027\u5982\u4e0b\uff1a',
+            ),
+            a.a.createElement(
+              'table',
+              null,
+              a.a.createElement(
+                'thead',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('th', null, '\u5b57\u6bb5'),
+                  a.a.createElement('th', null, '\u8bf4\u660e'),
+                  a.a.createElement('th', null, '\u7c7b\u578b'),
+                  a.a.createElement('th', null, '\u53ea\u8bfb\u503c'),
+                  a.a.createElement('th', null, '\u7248\u672c'),
+                ),
+              ),
+              a.a.createElement(
+                'tbody',
+                null,
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'className'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u8ba1\u7b97\u540e\u7684 ',
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u7c7b\u540d',
+                  ),
+                  a.a.createElement('td', null, 'string'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'fill'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u5143\u7d20\u586b\u5145\u7684\u989c\u8272',
+                  ),
+                  a.a.createElement('td', null, 'string'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, 'currentColor'),
+                  ),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'height'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u5143\u7d20\u9ad8\u5ea6',
+                  ),
+                  a.a.createElement('td', null, 'string | number'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, '1em'),
+                  ),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'style'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    '\u8ba1\u7b97\u540e\u7684 ',
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u5143\u7d20\u6837\u5f0f',
+                  ),
+                  a.a.createElement('td', null, 'CSSProperties'),
+                  a.a.createElement('td', null, '-'),
+                  a.a.createElement('td', null),
+                ),
+                a.a.createElement(
+                  'tr',
+                  null,
+                  a.a.createElement('td', null, 'width'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, 'svg'),
+                    ' \u5143\u7d20\u5bbd\u5ea6',
+                  ),
+                  a.a.createElement('td', null, 'string | number'),
+                  a.a.createElement(
+                    'td',
+                    null,
+                    a.a.createElement('code', null, '1em'),
+                  ),
+                  a.a.createElement('td', null),
+                ),
+              ),
+            ),
+          ),
+        )
+      );
+    },
+  },
+]);