enable the custom ClassName

This commit is contained in:
diro
2017-06-06 21:08:42 +08:00
parent da64cac414
commit fe8527e72e
+25 -8
View File
@@ -1,21 +1,38 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './iconfont.less'
const Iconfont = ({ type, colorful }) => {
const Iconfont = ({ type, colorful, className }) => {
const propsClassName = className;
const csSvg = classnames(
{ 'colorful-icon': true },
{ [`${propsClassName}`]: className !== undefined },
);
if (colorful) {
return (<span
dangerouslySetInnerHTML={{
__html: `<svg class="colorful-icon" aria-hidden="true"><use xlink:href="#${type.startsWith('#') ? type.replace(/#/, '') : type}"></use></svg>`,
}}
/>)
return (
<svg className={csSvg} aria-hidden="true">
<use xlinkHref={`#${type.startsWith('#') ? type.replace(/#/, '') : type}`} />
</svg>
);
}
return <i className={`antdadmin icon-${type}`} />
const csFont = classnames(
{ antdadmin: true },
{ [`icon-${type}`]: true },
{ [`${propsClassName}`]: className !== undefined },
);
return <i className={csFont} />;
}
Iconfont.propTypes = {
type: PropTypes.string,
type: PropTypes.string.isRequired,
colorful: PropTypes.bool,
}
Iconfont.defaultProps = {
colorful: false,
}
export default Iconfont