react-native-ui-lib/src/components/icon/index.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import _pt from "prop-types";
import isUndefined from 'lodash/isUndefined';
import React, { useMemo } from 'react';
import { Image, StyleSheet } from 'react-native';
import { asBaseComponent, Constants } from "../../commons/new";
import { getAsset, isSvg } from "../../utils/imageUtils";
import SvgImage from "../svgImage";

const Icon = props => {
  const {
    size,
    tintColor,
    style,
    supportRTL,
    source,
    assetGroup,
    assetName,
    modifiers,
    ...others
  } = props;
  const {
    margins
  } = modifiers;
  const iconSize = size ? {
    width: size,
    height: size
  } : undefined;
  const shouldFlipRTL = supportRTL && Constants.isRTL;
  const iconSource = useMemo(() => {
    if (!isUndefined(assetName)) {
      return getAsset(assetName, assetGroup);
    }

    return source;
  }, [source, assetGroup, assetName]);
  return isSvg(source) ? <SvgImage data={source} {...props} /> : <Image {...others} source={iconSource} style={[style, margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
    tintColor
  }]} />;
};

Icon.propTypes = {
  /**
       * if provided icon source will be driven from asset name
       */
  assetName: _pt.string,

  /**
       * the asset group, default is "icons"
       */
  assetGroup: _pt.string,

  /**
       * the icon tint
       */
  tintColor: _pt.string,

  /**
       * the icon size
       */
  size: _pt.number,

  /**
       * whether the icon should flip horizontally on RTL
       */
  supportRTL: _pt.bool
};
Icon.displayName = 'Icon';
Icon.defaultProps = {
  assetGroup: 'icons'
};
export default asBaseComponent(Icon);
const styles = StyleSheet.create({
  rtlFlipped: {
    transform: [{
      scaleX: -1
    }]
  }
});