React Native SVGR Usage

README.MD

SVG file (./src/images/ic_youtube.svg):

<?xml version="1.0" ?>
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M21.582,6.186c-0.23,-0.86 -0.908,-1.538 -1.768,-1.768C18.254,4 12,4 12,4S5.746,4 4.186,4.418c-0.86,0.23 -1.538,0.908 -1.768,1.768C2,7.746 2,12 2,12s0,4.254 0.418,5.814c0.23,0.86 0.908,1.538 1.768,1.768C5.746,20 12,20 12,20s6.254,0 7.814,-0.418c0.861,-0.23 1.538,-0.908 1.768,-1.768C22,16.254 22,12 22,12S22,7.746 21.582,6.186zM10,15.464V8.536L16,12L10,15.464z" fill="#000000FF"/>
</svg>

CLI usage:

svgr ./src/images -d ./src/svg --native --icon --svg-props "width=24,height=24"

Generates IcYoutube.js:

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

function SvgIcYoutube(props) {
  return (
    <Svg height="100" viewBox="0 0 24 24" width="100" {...props}>
      <Path
      fill={props.fill}
        d="M21.582 6.186a2.506 2.506 0 00-1.768-1.768C18.254 4 12 4 12 4s-6.254 0-7.814.418c-.86.23-1.538.908-1.768 1.768C2 7.746 2 12 2 12s0 4.254.418 5.814c.23.86.908 1.538 1.768 1.768C5.746 20 12 20 12 20s6.254 0 7.814-.418a2.504 2.504 0 001.768-1.768C22 16.254 22 12 22 12s0-4.254-.418-5.814zM10 15.464V8.536L16 12l-6 3.464z"
      />
    </Svg>
  );
}

export default SvgIcYoutube;

Usage:

import React from 'react';
import IcYoutube from './src/svg/IcYoutube';

const App = () => {
  return (
    <IcYoutube fill={'#d00'} />
  );
};

export default App;