HowToUse.js

import React, { PureComponent } from 'react';
import Icon from 'Icon'; // Impordi Icon.js kust iganes ta sul on

class HowToUse extends PureComponent {
  render() {
    // icon on nimi, mis sa svgs.js's panid talle ja siis lihtsalt saada fill või stroke edasi talle ja works out of the box
    <Icon icon="ActivityCheckmark" fill="#333DDD" />
  }
}

export default AttachButton

Icon.js

// SVG ikooni component, mis tegeleb render logikaga

import React from 'react';
import Svg, { G, Path, Polygon, Circle, Rect, Line, Polyline, Ellipse } from 'react-native-svg'; // Should be the same as in svgs.js file
import svgs from './svgs';

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

  const svg = svgs[icon];

  if (svg) {
    const width = props.width || "24"; // sest peaaegu kõik mu ikoonid on 24x24 ja siis on vähem kirjutamist
    const height = props.height || "24"; // sest peaaegu kõik mu ikoonid on 24x24 ja siis on vähem kirjutamist
    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;

svgs.js

// Siin kinda impordin kõik svg'd, veidi tuleb jamada sellega ja parsida neid asju
// worry not, ma olen ehitanud parseri selleks - https://codepen.io/iremlopsum/full/EEoEKp/
// vali sealt mobile ja kui tahad fillid ja strokid alles jätta, siis vali keep colors ka

// On olemas ka librareid, mis võtavad .svg faili ja sa ise ei pea midagi tegema, aga they have always failed me, sellepärast otsustasin selle kasuks


import React from 'react';
import { G, Path, Polygon } from 'react-native-svg'; // Import what you use

const DEF_VIEWBOX = '0 0 24 24';

export default {
  ActivityCheckmark: {
    svg: <Polygon points="11.768,14.268,7.438,11.768,6.438,13.5,12.5,17,18,7.474,16.268,6.474,11.768,14.268" />,
    viewBox: DEF_VIEWBOX,
  },
  Add: {
    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',
  }
}