mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
update icon demo code
This commit is contained in:
HeskeyBaozi
parent
796de6390b
commit
3f9d5e949f
@ -5,7 +5,7 @@ import { IconProps } from './index';
|
||||
import { getComputedSvgStyle } from './utils';
|
||||
|
||||
export interface CustomIconProps extends Omit<IconProps, 'type'> {
|
||||
type?: string | SpriteSvgIcon;
|
||||
svgType?: string | SpriteSvgIcon;
|
||||
viewBox?: string;
|
||||
component?: React.ComponentType<CustomIconComponentProps>;
|
||||
}
|
||||
@ -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<CustomIconProps> = (props) => {
|
||||
const {
|
||||
type: spriteSvgIcon,
|
||||
svgType: spriteSvgIcon,
|
||||
className = '',
|
||||
spin,
|
||||
// ⬇️ Todo, what's the best default value?
|
||||
|
||||
@ -17,14 +17,19 @@ Use tag `<Icon />` to create an icon and set its type in the `type` prop.
|
||||
import { Icon } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div className="icons-list">
|
||||
<Icon type="home" />
|
||||
<Icon type="setting" />
|
||||
<Icon type="smile" />
|
||||
<Icon type="smile" rotate={45} />
|
||||
<Icon type="smile" flip="vertical" />
|
||||
<Icon type="smile" rotate={90} />
|
||||
<Icon type="reload" spin />
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
```css
|
||||
.icons-list > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -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 (
|
||||
<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" />
|
||||
<title>Cool Star</title>
|
||||
<path d={path} />
|
||||
</CustomIcon>
|
||||
);
|
||||
};
|
||||
|
||||
const CoolStarIcon = (props) => {
|
||||
const component = (svgProps) => {
|
||||
return (
|
||||
<svg {...svgProps}>
|
||||
<defs>
|
||||
<linearGradient id="Gradient-1">
|
||||
<stop offset="20%" stopColor="#39F" />
|
||||
<stop offset="90%" stopColor="#F3F" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{React.cloneElement(svgProps.children, { fill: 'url(#Gradient-1)' })}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
return <StarIcon {...props} component={component} />;
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div className="icons-list">
|
||||
<StarIcon />
|
||||
<CoolStarIcon />
|
||||
<StarIcon spin />
|
||||
<StarIcon
|
||||
component={svgProps => (
|
||||
<svg {...svgProps}>
|
||||
<defs>
|
||||
<linearGradient id="gradient">
|
||||
<stop offset="20%" stopColor="#39F" />
|
||||
<stop offset="90%" stopColor="#F3F" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{React.Children.map(
|
||||
svgProps.children,
|
||||
child => React.cloneElement(
|
||||
child,
|
||||
child.type === 'path' ? { fill: 'url(#gradient)' } : {}
|
||||
)
|
||||
)}
|
||||
</svg>
|
||||
)}
|
||||
/>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
```css
|
||||
.icons-list > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -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(
|
||||
<div>
|
||||
<div className="icons-list">
|
||||
<FooIcon type="tuichu" />
|
||||
<FooIcon type="facebook" />
|
||||
<FooIcon type="twitter" />
|
||||
@ -31,3 +31,9 @@ ReactDOM.render(
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
```css
|
||||
.icons-list > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: SVG Sprite
|
||||
en-US: SVG Sprite
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`Icon` 提供的 `<CustomIcon />` 组件也可以在页面导入图标符号后，进一步通过 `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 <CustomIcon {...props} viewBox="0 0 1024 1024" />;
|
||||
};
|
||||
|
||||
function importSvgSpritesWithDomApi() {
|
||||
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="icon-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 (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(
|
||||
<DemoIcon type="icon-message" />,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
@ -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(<IconSet className="icons" catigory="direction" />, mountNode);
|
||||
```
|
||||
|
||||
### Suggested Icons
|
||||
|
||||
```__react
|
||||
import IconSet from 'site/theme/template/IconSet';
|
||||
ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
|
||||
```
|
||||
|
||||
### Application Icons
|
||||
|
||||
```__react
|
||||
import IconSet from 'site/theme/template/IconSet';
|
||||
ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
|
||||
```
|
||||
|
||||
### Brand and Logos
|
||||
|
||||
```__react
|
||||
import IconSet from 'site/theme/template/IconSet';
|
||||
ReactDOM.render(<IconSet className="icons" catigory="logo" />, 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 | 控制如何渲染图标，通常是一个渲染为 `<svg>` 标签的 `React` 组件 | ComponentType<CustomIconComponentProps\> | - |
|
||||
| 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 <Icon.CustomIcon {...props} viewBox="0 0 1024 1024" />
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<DemoIcon type={MessageSvg} />,
|
||||
<DemoIcon svgType={MessageSvg} />,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
`component` 属性类似 `react-router v4` 中 `<Route />` 组件的 `component` 属性，描述了图标的如何渲染，对其渲染过程拥有很强的编程控制力。
|
||||
|
||||
#### SpriteSvgIcon
|
||||
|
||||
`Icon.CustomIcon` 中的 `type` 可传入的 `SpriteSvgIcon` 对象的部分属性如下：
|
||||
`Icon.CustomIcon` 中的 `svgType` 可传入的 `SpriteSvgIcon` 对象的部分属性如下：
|
||||
|
||||
| 字段 | 说明 | 类型 | 只读值 |
|
||||
| --- | --- | --- | --- |
|
||||
@ -141,10 +166,3 @@ ReactDOM.render(<MyIcon type="example" />, mountedNode);
|
||||
在 `namespace` 和 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
|
||||
|
||||
见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
|
||||
|
||||
<style>
|
||||
[id^="components-icon-demo-"] .code-box-demo .anticon {
|
||||
font-size: 18px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user