Dingdong_client/components/SvgIcon.js

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

function Icon(props) {
  const { name, type, theme, fillAll, Flip, style, badge } = 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 || 1024) / 2} ${
      (svgInfo.defaultWidth || 1024) / 2
    })`;
  }
  const pathComList = () => {
    return pathList.map((item, index) => {
      const pathProps = { ...item };
      if ((fillAll || item.changeFill) && color) {
        pathProps.fill = color;
      }

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

  return (
    <View>
      <Svg width={width} height={height} viewBox={viewBox} style={style}>
        <Defs>
          <LinearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="90%">
            <Stop offset="0%" style={{ stopColor: '#000', stopOpacity: 1 }} />
            <Stop
              offset="50%"
              style={{ stopColor: 'rgb(255, 216, 0)', stopOpacity: 1 }}
            />
          </LinearGradient>
        </Defs>
        {pathComList()}
      </Svg>

      {badge > 0 && (
        <Badge size={15} style={{ position: 'absolute', right: 0, top: -5 }}>
          {badge}
        </Badge>
      )}
    </View>
  );
}

export default withTheme(Icon);