Source: assets/icons/SettingsIcon.js

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

const SvgComponent = props => (
  <Svg viewBox="0 0 100 100" fill="currentColor" {...props}>
    <G strokeWidth={4} fill="white">
      <Path d="M50.5 69.436c-10.493 0-19-8.507-19-19 0-10.494 8.507-19 19-19s19 8.506 19 19c0 10.493-8.507 19-19 19z" />
      <Path d="M60.676 7.653c4.829 1.083 9.542 3.06 13.647 5.833-2.651 4.654-5.853 10.582-3.37 15.964.173.374.507.649.76.974 4.909 3.888 12.002.185 16.62-2.43 2.593 4.225 4.257 8.881 5.246 13.717-5.092 1.432-12.323 3.784-13.079 9.926.738 5.935 7.629 8.416 12.614 9.797-1.222 4.671-3.16 9.117-5.863 13.119-3.741-2.116-7.825-3.12-12.089-3.294-2.866.962-1.789.295-3.449 1.591-.253.324-.587.599-.76.973-.364.79-.709 1.614-.831 2.476-.569 4.025 1.293 8.354 3.217 11.751-4.118 2.473-8.58 4.333-13.292 5.297-1.39-4.736-3.957-11.022-9.547-11.71-5.538.657-8.239 6.99-9.547 11.71-4.783-.801-9.087-3.01-13.292-5.297 2.318-4.192 4.553-9.53 2.386-14.227-.173-.374-.507-.649-.76-.973-1.66-1.296-.583-.629-3.449-1.591l-1.546-.025-1.538.07c-3.28.335-6.107 1.816-9.043 3.192-2.86-3.914-4.405-8.493-5.825-13.062 4.977-1.413 11.881-3.841 12.614-9.797-.779-6.131-7.966-8.51-13.079-9.926.753-4.922 2.897-9.392 5.246-13.717 4.57 2.599 10.387 5.616 15.647 3.189.373-.172.648-.506.973-.759 3.968-5.022.047-12.247-2.61-16.938 4.125-2.7 8.796-4.841 13.647-5.833 1.479 5.296 3.681 13.184 10.176 13.984 6.492-.855 8.697-8.644 10.176-13.984z" />
    </G>
  </Svg>
);

/**
 * Settings icon created from SVG from Fixrate.
 * Used on the headerNavigator
 * Imported in MainNavigator.js.
 * Code is generated through https://react-svgr.com/playground/?native=true
 * @param {styleObject} props
 * @memberof module:Components
 */
const SettingsIcon = props => {
  const { style } = props;
  const component = SvgComponent(style);

  return <View style={style}>{component}</View>;
};

export default SettingsIcon;