mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
update custom demo
This commit is contained in:
parent
f275f3090a
commit
6557917554
@ -28,57 +28,9 @@ const AntDesignIcon = props => (
|
||||
<Icon component={AntDesignSvg} {...props} />
|
||||
);
|
||||
|
||||
const SvgDefinitions = () => (
|
||||
<svg className="svg-common-definitions">
|
||||
<defs>
|
||||
<linearGradient id="gradient-demo">
|
||||
<stop offset="20%" stopColor="#39F" />
|
||||
<stop offset="90%" stopColor="#F3F" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const MaterialHomeIcon = props => (
|
||||
<Icon viewBox="0 0 24 24" {...props}>
|
||||
{/* you should pass SVG paths */}
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</Icon>
|
||||
);
|
||||
|
||||
const MaterialColorfulHomeIcon = props => (
|
||||
<MaterialHomeIcon
|
||||
{...props}
|
||||
component={svgProps => (
|
||||
<svg {...svgProps}>
|
||||
<defs>
|
||||
<linearGradient id="gradient">
|
||||
<stop offset="30%" stopColor="#8360c3" />
|
||||
<stop offset="70%" stopColor="#2ebf91" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{React.Children.map(
|
||||
svgProps.children,
|
||||
child => React.cloneElement(
|
||||
child,
|
||||
child.type === 'path' ? { fill: 'url(#gradient)' } : {}
|
||||
)
|
||||
)}
|
||||
</svg>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="custom-icons-list">
|
||||
<HeartIcon style={{ color: 'hotpink' }} />
|
||||
<SvgDefinitions />
|
||||
<HeartIcon
|
||||
style={{ fontSize: '18px' }}
|
||||
svgStyle={{ fill: 'url(#gradient-demo)' }}
|
||||
/>
|
||||
<MaterialHomeIcon style={{ color: '#8360c3' }} />
|
||||
<MaterialColorfulHomeIcon style={{ fontSize: '18px' }} />
|
||||
<AntDesignIcon style={{ fontSize: '32px' }} />
|
||||
</div>,
|
||||
mountNode
|
||||
@ -89,10 +41,4 @@ ReactDOM.render(
|
||||
.custom-icons-list > .anticon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.custom-icons-list > .svg-common-definitions {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user