add-icon.js

import React from 'react';
import { G, Path, Polygon } from 'react-native-svg';

export default {
  svg: (
    <G>
      <Path d="M22.5,0A22.5,22.5,0,1,0,45,22.5,22.49986,22.49986,0,0,0,22.5,0Zm0,44A21.5,21.5,0,1,1,44,22.5,21.52424,21.52424,0,0,1,22.5,44Z" />
      <Polygon points="23,15,22,15,22,22,15,22,15,23,22,23,22,30,23,30,23,23,30,23,30,22,23,22,23,15" />
    </G>
  ),
  viewBox: '0 0 45 45',
}

// All of this goes into an index file, which gives things names. The whole file looks something like this for easier import

export { default as Add } from './add-icon';

Icon.js

import React from 'react';
import Svg from 'react-native-svg';
import * as Icons from './icons';

const Icon = (props) => {
  const {
    icon
  } = props;
  
  if (!icon) {
    return null;
  }

  const svg = Icons[icon];

  if (svg) {
    const width = props.width || "24";
    const height = props.height || "24";
    const fill = props.fill || 'transparent'; 
    const stroke = props.stroke || 'transparent'; 

    return (
      <Svg viewBox={svg.viewBox} width={width} height={height}>
        {React.cloneElement(svg.svg, {
          fill: fill,
          stroke: stroke
        })}
      </Svg>
    )
  }

  return null;
};

export default Icon;