react-native-svg-icon | A simple , but flexible SVG icon component for React Native | Icon library

Ensure sure you've installed react-native-svg
npm i react-native-svg-icon --save
Create an object of your SVG icons. To conform to React/JSX standards, we need to convert SVG elements to begin with a capital letter, and convert hyphenated attributes to camelCase. For example. <path> becomes <Path> and stop-color becomes stopColor. Create an <Icon /> component as a bridge between react-native-svg-icon's <SvgIcon /> which imports the above SVGs.
Create an object of your SVG icons import React from 'react'; import { G, Path } from 'react-native-svg'; // Each nameValuePair can be: // * Name: <Svg />; or // * Name: { svg: <Svg />, viewBox: '0 0 50 50' } export default { SortArrows: <G><Path d="M0 45h90L45 0 0 45z"/><Path d="M0 55h90l-45 45L0 55z"/></G>, Tick: { svg: <Path d="M38.729 75.688a4.48 4.48 0 0 1-3.21-1.356L16.558 55.004c-1.774-1.807-1.774-4.736-.001-6.543a4.48 4.48 0 0 1 6.42 0l15.753 16.056 37.749-38.474a4.478 4.478 0 0 1 6.419 0c1.773 1.806 1.773 4.736 0 6.543L41.939 74.332a4.48 4.48 0 0 1-3.21 1.356z"/>, viewBox: '0 0 50 50', }, } To conform to React/JSX standards, we need to convert SVG elements to begin with a capital letter, and convert hyphenated attributes to camelCase. For example. <path> becomes <Path> and stop-color becomes stopColor.
Create an <Icon /> component as a bridge between react-native-svg-icon's <SvgIcon /> which imports the above SVGs import React from 'react'; import SvgIcon from 'react-native-svg-icon'; import svgs from './assets/svgs'; const Icon = (props) => <SvgIcon {...props} svgs={svgs} />; export default Icon;