2019-09-19 12:57:40 +00:00
|
|
|
import React from 'react';
|
2019-06-05 08:54:09 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled, { css } from 'styled-components';
|
2019-11-25 08:49:29 +00:00
|
|
|
import ReactDOMServer from 'react-dom/server';
|
|
|
|
import {Parser} from 'html-to-react'
|
2019-06-05 08:54:09 +00:00
|
|
|
|
|
|
|
const iconSizes = {
|
|
|
|
small: 12,
|
|
|
|
medium: 16,
|
|
|
|
big: 24,
|
|
|
|
};
|
|
|
|
|
|
|
|
const getSizeStyle = size => {
|
|
|
|
switch (size) {
|
|
|
|
case 'scale':
|
|
|
|
return `
|
|
|
|
&:not(:root) {
|
|
|
|
width: 100%;
|
2019-11-18 11:29:38 +00:00
|
|
|
height: 100%;
|
2019-06-05 08:54:09 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
case 'small':
|
|
|
|
case 'medium':
|
|
|
|
case 'big':
|
|
|
|
return `
|
|
|
|
width: ${iconSizes[size]}px;
|
2019-07-10 09:48:36 +00:00
|
|
|
min-width: ${iconSizes[size]}px;
|
2019-06-05 08:54:09 +00:00
|
|
|
height: ${iconSizes[size]}px;
|
2019-07-10 09:48:36 +00:00
|
|
|
min-height: ${iconSizes[size]}px;
|
2019-06-05 08:54:09 +00:00
|
|
|
`;
|
|
|
|
default:
|
|
|
|
return `
|
|
|
|
width: ${iconSizes.big}px;
|
2019-07-10 09:48:36 +00:00
|
|
|
min-width: ${iconSizes.big}px;
|
2019-06-05 08:54:09 +00:00
|
|
|
height: ${iconSizes.big}px;
|
2019-07-10 09:48:36 +00:00
|
|
|
min-height: ${iconSizes.big}px;
|
2019-06-05 08:54:09 +00:00
|
|
|
`;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-08-05 10:25:18 +00:00
|
|
|
export default function createStyledIcon(Component, displayName, fillPath="*", strokePath="*") {
|
2019-06-27 13:23:32 +00:00
|
|
|
|
2019-11-25 08:49:29 +00:00
|
|
|
class Icon extends React.Component {
|
|
|
|
|
|
|
|
render_xml(id, xml_string){
|
|
|
|
var doc = new DOMParser().parseFromString(xml_string, 'application/xml');
|
|
|
|
var el = document.getElementById(id)
|
|
|
|
el.appendChild(
|
|
|
|
el.ownerDocument.importNode(doc.documentElement, true)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
render() {
|
2019-11-25 11:07:50 +00:00
|
|
|
const { isfill, isStroke, color, stroke, fillPath, strokePath, ...props } = this.props;
|
2019-11-25 08:49:29 +00:00
|
|
|
|
2019-11-25 11:07:50 +00:00
|
|
|
var svg = ReactDOMServer.renderToString(<Component {...props}></Component>);
|
2019-11-25 08:49:29 +00:00
|
|
|
const matchResult = svg.match(/\s*mask id="(\w*)"\s/);
|
2019-09-19 12:57:40 +00:00
|
|
|
|
2019-11-25 08:49:29 +00:00
|
|
|
if(matchResult != null){
|
|
|
|
if(matchResult.length > 1){
|
|
|
|
svg = svg.replace(new RegExp(matchResult[1],'g'), Math.random().toString(36).substring(2, 5) + Math.random().toString(36).substring(2, 5))
|
|
|
|
var htmlToReactParser = new Parser();
|
|
|
|
var reactComponent = htmlToReactParser.parse(svg);
|
|
|
|
return reactComponent;
|
|
|
|
}
|
|
|
|
}
|
2019-11-25 11:07:50 +00:00
|
|
|
return (<Component {...props}></Component>);
|
2019-11-25 08:49:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-31 13:35:46 +00:00
|
|
|
const StyledIcon = styled(Icon)(
|
2019-06-05 08:54:09 +00:00
|
|
|
props => `
|
2019-07-31 13:35:46 +00:00
|
|
|
${props.fillPath} {
|
2019-06-27 13:23:32 +00:00
|
|
|
${props.isfill ? 'fill:' + props.color : ''};
|
2019-06-05 08:54:09 +00:00
|
|
|
}
|
2019-07-31 13:35:46 +00:00
|
|
|
${props.strokePath} {
|
|
|
|
${props.isStroke ? 'stroke:' + props.stroke : ''};
|
|
|
|
}
|
2019-12-05 12:13:04 +00:00
|
|
|
overflow: hidden;
|
|
|
|
vertical-align: middle;
|
2019-06-05 08:54:09 +00:00
|
|
|
${getSizeStyle(props.size)}
|
|
|
|
`
|
|
|
|
);
|
2019-07-31 13:35:46 +00:00
|
|
|
|
|
|
|
StyledIcon.displayName = displayName;
|
|
|
|
StyledIcon.propTypes = {
|
2019-06-05 08:54:09 +00:00
|
|
|
color: PropTypes.string,
|
2019-07-31 13:35:46 +00:00
|
|
|
stroke: PropTypes.string,
|
2019-06-05 08:54:09 +00:00
|
|
|
size: PropTypes.oneOf(['small', 'medium', 'big', 'scale']),
|
2019-07-30 14:58:48 +00:00
|
|
|
isfill: PropTypes.bool,
|
2019-07-31 13:35:46 +00:00
|
|
|
isStroke: PropTypes.bool,
|
|
|
|
fillPath: PropTypes.string,
|
|
|
|
strokePath: PropTypes.string
|
2019-06-05 08:54:09 +00:00
|
|
|
};
|
2019-07-30 14:58:48 +00:00
|
|
|
|
2019-07-31 13:35:46 +00:00
|
|
|
StyledIcon.defaultProps = {
|
|
|
|
fillPath: fillPath,
|
|
|
|
strokePath: strokePath
|
2019-07-30 14:58:48 +00:00
|
|
|
}
|
|
|
|
|
2019-07-31 13:35:46 +00:00
|
|
|
return StyledIcon;
|
2019-06-05 08:54:09 +00:00
|
|
|
}
|