update custom demo

This commit is contained in:
HeskeyBaozi 2018-08-16 14:46:31 +08:00
parent f275f3090a
commit 6557917554

View File

@ -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;
}
```