DocSpace-buildtools/packages/asc-web-components/src/components/icons/svg/create-styled-icon.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import ReactDOMServer from "react-dom/server";
import { Parser } from "html-to-react";

const iconSizes = {
  small: 12,
  medium: 16,
  big: 24,
};

const getSizeStyle = (size) => {
  switch (size) {
    case "scale":
      return `
        &:not(:root) {
          width: 100%;
          height: 100%;
        }
      `;
    case "small":
    case "medium":
    case "big":
      return `
        width: ${iconSizes[size]}px;
        min-width: ${iconSizes[size]}px;
        height: ${iconSizes[size]}px;
        min-height: ${iconSizes[size]}px;
      `;
    default:
      return `
        width: ${iconSizes.big}px;
        min-width: ${iconSizes.big}px;
        height: ${iconSizes.big}px;
        min-height: ${iconSizes.big}px;
      `;
  }
};

export default function createStyledIcon(
  Component,
  displayName,
  fillPath = "*",
  strokePath = "*"
) {
  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() {
      // eslint-disable-next-line react/prop-types, no-unused-vars
      const {
        isfill,
        isStroke,
        color,
        stroke,
        fillPath,
        strokePath,
        ...props
      } = this.props;

      let svg = ReactDOMServer.renderToString(
        <Component {...props}></Component>
      );
      const matchResult = svg.match(/\s*mask id="(\w*)"\s/);
      const newId =
        Math.random().toString(36).substring(2, 5) +
        Math.random().toString(36).substring(2, 5);

      if (matchResult != null) {
        if (matchResult.length > 1) {
          svg = svg.replace(new RegExp(matchResult[1], "g"), newId);

          const htmlToReactParser = new Parser();
          const reactComponent = htmlToReactParser.parse(svg);
          return reactComponent;
        }
      }
      return <Component {...props}></Component>;
    }
  }

  const StyledIcon = styled(Icon)(
    (props) => `
    ${props.fillPath} {
      ${props.isfill ? "fill:" + props.color : ""};
    }
    ${props.strokePath} {
      ${props.isStroke ? "stroke:" + props.stroke : ""};
    }
    overflow: hidden;
    vertical-align: middle;
    ${getSizeStyle(props.size)}
  `
  );

  StyledIcon.displayName = displayName;

  StyledIcon.propTypes = {
    color: PropTypes.string,
    stroke: PropTypes.string,
    size: PropTypes.oneOf(["small", "medium", "big", "scale"]),
    isfill: PropTypes.bool,
    isStroke: PropTypes.bool,
    fillPath: PropTypes.string,
    strokePath: PropTypes.string,
  };

  StyledIcon.defaultProps = {
    fillPath: fillPath,
    strokePath: strokePath,
  };

  return StyledIcon;
}