Dingdong_client/components/SvgIcon.js

/* eslint-disable no-underscore-dangle */
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
import { withTheme } from 'react-native-paper';
import svgMap from '../Utils/SvgUtilsNew';

function Icon(props) {
  const { name, type, theme, fillAll, Flip } = props;
  let { color, width, height } = props;
  const { colors } = theme;
  if (type) {
    color = colors[type];
  }
  if (!width) {
    width = 32;
  }
  if (!height) {
    height = 32;
  }
  const svgInfo = svgMap.get(name);
  const viewBox = svgInfo
    ? svgInfo.viewBox || '0 0 1024 1024'
    : '0 0 1024 1024';
  const pathList = svgInfo
    ? svgInfo.pathList || [
        {
          ...svgInfo,
        },
      ]
    : [];
  let transform = '';
  if (Flip) {
    transform = `rotate(180 ${svgInfo.defaultWidth / 2} ${
      svgInfo.defaultWidth / 2
    })`;
  }
  const pathComList = () => {
    return pathList.map((item, index) => {
      const pathProps = { ...item };
      if ((fillAll || !item.strokeWidth) && color) {
        pathProps.fill = color;
      }

      if (item.strokeWidth && color) {
        pathProps.stroke = color;
      }
      delete pathProps.viewBox;
      delete pathProps.defaultWidth;
      return <Path {...pathProps} key={index} transform={transform} />;
    });
  };

  return (
    <Svg width={width} height={height} viewBox={viewBox}>
      {pathComList()}
    </Svg>
  );
}

export default withTheme(Icon);