From 3f9d5e949fbc3f3dacd78062b607b8db5ddc6f9c Mon Sep 17 00:00:00 2001 From: HeskeyBaozi Date: Tue, 14 Aug 2018 17:17:51 +0800 Subject: [PATCH] update icon demo code --- components/icon/CustomIcon.tsx | 5 ++- components/icon/demo/basic.md | 11 ++++-- components/icon/demo/custom.md | 54 +++++++++++++++++----------- components/icon/demo/iconfont.md | 10 ++++-- components/icon/demo/svg-sprite.md | 58 ------------------------------ components/icon/index.zh-CN.md | 50 +++++++++++++++++--------- 6 files changed, 86 insertions(+), 102 deletions(-) delete mode 100644 components/icon/demo/svg-sprite.md diff --git a/components/icon/CustomIcon.tsx b/components/icon/CustomIcon.tsx index 21da7fb8e8..a0617a63f7 100644 --- a/components/icon/CustomIcon.tsx +++ b/components/icon/CustomIcon.tsx @@ -5,7 +5,7 @@ import { IconProps } from './index'; import { getComputedSvgStyle } from './utils'; export interface CustomIconProps extends Omit { - type?: string | SpriteSvgIcon; + svgType?: string | SpriteSvgIcon; viewBox?: string; component?: React.ComponentType; } @@ -22,7 +22,6 @@ export interface CustomIconComponentProps { export interface SpriteSvgIcon { id: string; viewBox?: string; - [key: string]: any; } @@ -37,7 +36,7 @@ export const svgBaseProps = { const CustomIcon: React.SFC = (props) => { const { - type: spriteSvgIcon, + svgType: spriteSvgIcon, className = '', spin, // ⬇️ Todo, what's the best default value? diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md index 382ece65ad..e65cd4c818 100644 --- a/components/icon/demo/basic.md +++ b/components/icon/demo/basic.md @@ -17,14 +17,19 @@ Use tag `` to create an icon and set its type in the `type` prop. import { Icon } from 'antd'; ReactDOM.render( -
+
- - +
, mountNode ); ```` + +```css +.icons-list > .anticon { + margin-right: 6px; +} +``` diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md index 1dea55b2b8..73953c7a2a 100644 --- a/components/icon/demo/custom.md +++ b/components/icon/demo/custom.md @@ -18,35 +18,49 @@ import { Icon } from 'antd'; const CustomIcon = Icon.CustomIcon; const StarIcon = (props) => { + const path = 'M908 353l-254-37L541 86c-3-6-8-11-15' + + '-14-16-8-35-2-43 14L370 316l-254 37a32 32 0 0 0' + + '-18 55l184 179-44 253c-1 7 0 14 4 20 8 16 27 22' + + ' 43 13l227-119 227 119c6 4 14 5 20 4 18-3 29-20' + + ' 26-37l-43-253 184-179a32 32 0 0 0-18-55z'; return ( - + Cool Star + ); }; -const CoolStarIcon = (props) => { - const component = (svgProps) => { - return ( - - - - - - - - {React.cloneElement(svgProps.children, { fill: 'url(#Gradient-1)' })} - - ); - }; - return ; -}; - ReactDOM.render( -
+
- + + ( + + + + + + + + {React.Children.map( + svgProps.children, + child => React.cloneElement( + child, + child.type === 'path' ? { fill: 'url(#gradient)' } : {} + ) + )} + + )} + />
, mountNode ); ```` + +```css +.icons-list > .anticon { + margin-right: 6px; +} +``` diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md index b13b8c87bd..8688d8cdf9 100644 --- a/components/icon/demo/iconfont.md +++ b/components/icon/demo/iconfont.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 3 title: zh-CN: 使用 iconfont.cn en-US: Use iconfont.cn @@ -23,7 +23,7 @@ const FooIcon = Icon.create({ }); ReactDOM.render( -
+
@@ -31,3 +31,9 @@ ReactDOM.render( mountNode ); ```` + +```css +.icons-list > .anticon { + margin-right: 6px; +} +``` diff --git a/components/icon/demo/svg-sprite.md b/components/icon/demo/svg-sprite.md deleted file mode 100644 index f145ae7407..0000000000 --- a/components/icon/demo/svg-sprite.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -order: 3 -title: - zh-CN: SVG Sprite - en-US: SVG Sprite ---- - -## zh-CN - -`Icon` 提供的 `` 组件也可以在页面导入图标符号后，进一步通过 `type` 属性来声明使用自定义图标。可以通过配置 [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) 来简化导入。 - -## en-US - -Todo, Please Replace me! - -```jsx -import { Icon } from 'antd'; -const CustomIcon = Icon.CustomIcon; - -const DemoIcon = (props) => { - return ; -}; - -function importSvgSpritesWithDomApi() { - const svgSpriteRenderer = (nodeId, contents) => ` - `; - - const messageSymbol = ` - - - `; - - // insert SVG symbols into document.body - if (typeof document !== 'undefined') { - const nodeId = '__SVG_ANT_ICON_DEMO_SPRITE_NODE__'; - const spriteContent = svgSpriteRenderer(nodeId, messageSymbol); - const existing = document.getElementById(nodeId); - if (!existing) { - document.body.insertAdjacentHTML('afterbegin', spriteContent); - } - } -} - -// import svg sprites -importSvgSpritesWithDomApi(); - -ReactDOM.render( - , - mountNode -); -``` diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 3815ba43b8..acc91e29c4 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -21,7 +21,35 @@ toc: false ## 图标列表 -请参阅 [Ant Design 图标库](#)。 +> Click the icon and copy the code。 + +### Directional Icons + +```__react +import IconSet from 'site/theme/template/IconSet'; +ReactDOM.render(, mountNode); +``` + +### Suggested Icons + +```__react +import IconSet from 'site/theme/template/IconSet'; +ReactDOM.render(, mountNode); +``` + +### Application Icons + +```__react +import IconSet from 'site/theme/template/IconSet'; +ReactDOM.render(, mountNode); +``` + +### Brand and Logos + +```__react +import IconSet from 'site/theme/template/IconSet'; +ReactDOM.render(, mountNode); +``` ## API @@ -48,7 +76,7 @@ toc: false | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 图标类型，可以是图标符号的 `id` 或者是一个包含图标符号信息的对象 | string \| SpriteSvgIcon | - | +| svgType | 图标类型，可以是图标符号的 `id` 或者是一个包含图标符号信息的对象 | string \| SpriteSvgIcon | - | | viewBox | 设置图标[视图容器盒](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox)的大小 | string | '0 0 1024 1024' | | component | 控制如何渲染图标，通常是一个渲染为 `` 标签的 `React` 组件 | ComponentType | - | | rotate | 设置图标顺时针旋转的角度，使用角度制 | number | - | @@ -66,7 +94,7 @@ toc: false { test: /\.svg$/, use: [ - { loader: 'svg-sprite-loader', options: { ... } }, + { loader: 'svg-sprite-loader' }, ] } ``` @@ -76,24 +104,21 @@ toc: false ```jsx import { Icon } from 'antd'; -import MessageSvg from './assets/message.svg'; // path to your '*.svg' file. +import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file. const DemoIcon = (props) => { return }; ReactDOM.render( - , + , mountNode ); ``` - -`component` 属性类似 `react-router v4` 中 `` 组件的 `component` 属性，描述了图标的如何渲染，对其渲染过程拥有很强的编程控制力。 - #### SpriteSvgIcon -`Icon.CustomIcon` 中的 `type` 可传入的 `SpriteSvgIcon` 对象的部分属性如下： +`Icon.CustomIcon` 中的 `svgType` 可传入的 `SpriteSvgIcon` 对象的部分属性如下： | 字段 | 说明 | 类型 | 只读值 | | --- | --- | --- | --- | @@ -141,10 +166,3 @@ ReactDOM.render(, mountedNode); 在 `namespace` 和 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。 见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。 - -