SVG icon react class

icon.js

import React from 'react';

import {View} from 'react-native';

function Icon(props: {size: number, color: string, name: string, style?: any}) {
  const SVGIcon = Icon.SVGS[props.name];
  if (!SVGIcon) {
    throw new Error(`Unknown icon ${props.name}`);
  }
  const {style, ...rest} = props;
  return (
    <View style={{width: props.size, height: props.size, ...style}}>
      <SVGIcon {...rest} />
    </View>
  );
}

Icon.SVGS = {
  comment_o: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 28 28">
      <path
        style={{fill: color}}
        d="M14 6c-6.5 0-12 3.656-12 8 0 2.328 1.563 4.547 4.266 6.078l1.359 0.781-0.422 1.5c-0.297 1.109-0.688 1.969-1.094 2.688 1.578-0.656 3.016-1.547 4.297-2.672l0.672-0.594 0.891 0.094c0.672 0.078 1.359 0.125 2.031 0.125 6.5 0 12-3.656 12-8s-5.5-8-12-8zM28 14c0 5.531-6.266 10-14 10-0.766 0-1.531-0.047-2.266-0.125-2.047 1.813-4.484 3.094-7.187 3.781-0.562 0.156-1.172 0.266-1.781 0.344h-0.078c-0.313 0-0.594-0.25-0.672-0.594v-0.016c-0.078-0.391 0.187-0.625 0.422-0.906 0.984-1.109 2.109-2.047 2.844-4.656-3.219-1.828-5.281-4.656-5.281-7.828 0-5.531 6.266-10 14-10v0c7.734 0 14 4.469 14 10z"
      />
    </svg>
  ),

  heart_o: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 28 28">
      <path
        style={{fill: color}}
        d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"
      />
    </svg>
  ),

  location_o: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 32 32">
      <path
        style={{fill: color}}
        d="M16.002 17.746c3.309 0 6-2.692 6-6s-2.691-6-6-6c-3.309 0-6 2.691-6 6s2.691 6 6 6zM16.002 6.746c2.758 0 5 2.242 5 5s-2.242 5-5 5c-2.758 0-5-2.242-5-5s2.242-5 5-5zM16 0c-6.618 0-12 5.316-12 12.001 0 7 6.001 14.161 10.376 19.194 0.016 0.020 0.718 0.805 1.586 0.805 0.002 0 0.073 0 0.077 0 0.867 0 1.57-0.785 1.586-0.805 4.377-5.033 10.377-12.193 10.377-19.194 0-6.685-5.383-12.001-12.002-12.001zM16.117 29.883c-0.021 0.020-0.082 0.064-0.135 0.098-0.010-0.027-0.084-0.086-0.129-0.133-3.665-4.217-9.853-11.334-9.853-17.847 0-5.514 4.487-10.001 10-10.001 5.516 0 10.002 4.487 10.002 10.002 0 6.512-6.188 13.629-9.885 17.881z"
      />
    </svg>
  ),

  list: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 20 20">
      <path
        style={{fill: color}}
        d="M14.4 9h-5.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h5.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM16.4 14h-7.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h7.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM8.6 6h7.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1h-7.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1zM5.4 9h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM5.4 14h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM5.4 4h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1z"
      />
    </svg>
  ),

  pin: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 20 20">
      <path
        style={{fill: color}}
        d="M4.774 15.287l-2.105 3.25 0.224 1.063 1.060-0.227 2.104-3.248c-0.224-0.12-0.446-0.248-0.661-0.39-0.218-0.141-0.426-0.292-0.622-0.448zM13.686 14.152c0.014-0.029 0.023-0.061 0.036-0.092 0.053-0.117 0.1-0.234 0.138-0.357 0.006-0.022 0.009-0.044 0.016-0.064 0.039-0.136 0.072-0.27 0.098-0.408 0-0.007 0-0.012 0-0.021 0.195-1.169-0.145-2.473-0.923-3.651l1.11-1.714c1.279 0.163 2.385-0.159 2.917-0.982 0.923-1.423-0.2-3.792-2.505-5.293-2.307-1.502-4.923-1.565-5.844-0.144-0.534 0.824-0.378 1.967 0.293 3.073l-1.112 1.714c-1.389-0.233-2.716-0.016-3.703 0.64-0.006 0.002-0.013 0.004-0.017 0.008-0.115 0.078-0.227 0.164-0.332 0.254-0.017 0.014-0.037 0.027-0.051 0.041-0.098 0.084-0.186 0.178-0.271 0.272-0.020 0.024-0.048 0.045-0.067 0.070-0.106 0.121-0.204 0.249-0.29 0.385-1.384 2.133-0.203 5.361 2.633 7.209 2.838 1.848 6.26 1.614 7.641-0.519 0.087-0.135 0.167-0.276 0.233-0.421zM12.871 4.194c-0.887-0.577-1.32-1.487-0.965-2.036 0.354-0.547 1.361-0.522 2.246 0.055 0.889 0.577 1.318 1.489 0.965 2.036s-1.358 0.522-2.246-0.055z"
      />
    </svg>
  ),

  globe: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 24 24">
      <path
        style={{fill: color}}
        d="M23 12c0-6.006-4.844-10.906-10.831-11-0.106-0.019-0.213-0.019-0.319 0-5.994 0.081-10.85 4.981-10.85 11 0 6.006 4.844 10.906 10.831 11 0.050 0.006 0.106 0.012 0.156 0.012v0c0.050 0 0.106-0.006 0.156-0.012 6-0.081 10.856-4.981 10.856-11zM20.944 11h-3.994c-0.225-2.763-1.144-5.419-2.669-7.706 3.55 0.931 6.25 3.975 6.663 7.706zM11.994 20.456c-1.669-2.156-2.688-4.744-2.937-7.456h5.881c-0.25 2.725-1.275 5.313-2.944 7.456zM9.063 11c0.256-2.719 1.275-5.306 2.944-7.45 1.669 2.15 2.694 4.731 2.944 7.45h-5.887zM9.725 3.294c-1.525 2.287-2.444 4.944-2.675 7.706h-3.994c0.412-3.731 3.119-6.781 6.669-7.706zM3.056 13h3.994c0.225 2.756 1.144 5.406 2.662 7.706-3.544-0.931-6.244-3.981-6.656-7.706zM14.275 20.706c1.525-2.288 2.444-4.944 2.675-7.706h3.994c-0.413 3.731-3.119 6.781-6.669 7.706z"
      />
    </svg>
  ),

  phone: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 24 24">
      <path
        style={{fill: color}}
        d="M6.609 10.781c1.453 2.813 3.797 5.156 6.609 6.609l2.203-2.203c0.281-0.281 0.703-0.375 1.031-0.234 1.125 0.375 2.344 0.563 3.563 0.563 0.563 0 0.984 0.422 0.984 0.984v3.516c0 0.563-0.422 0.984-0.984 0.984-9.375 0-17.016-7.641-17.016-17.016 0-0.563 0.422-0.984 0.984-0.984h3.516c0.563 0 0.984 0.422 0.984 0.984 0 1.266 0.188 2.438 0.563 3.563 0.094 0.328 0.047 0.75-0.234 1.031z"
      />
    </svg>
  ),

  directions: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 24 24">
      <path
        style={{fill: color}}
        d="M14.016 14.484l3.469-3.469-3.469-3.516v2.484h-5.016c-0.563 0-0.984 0.469-0.984 1.031v3.984h1.969v-3h4.031v2.484zM21.703 11.297c0.375 0.422 0.375 1.031 0 1.406l-9 9c-0.375 0.375-1.031 0.375-1.406 0l-9-9c-0.375-0.375-0.375-1.031 0-1.406l9-9c0.375-0.375 1.031-0.375 1.406 0z"
      />
    </svg>
  ),

  chevron_right: ({size, color, ...rest}) => (
    <svg width={size} height={size} {...rest} viewBox="0 0 24 24">
      <path
        style={{fill: color}}
        d="M15.706 11.294l-6-6c-0.387-0.387-1.025-0.387-1.413 0s-0.387 1.025 0 1.413l5.294 5.294-5.294 5.294c-0.387 0.387-0.387 1.025 0 1.413 0.194 0.194 0.45 0.294 0.706 0.294s0.513-0.1 0.706-0.294l6-6c0.394-0.387 0.394-1.025 0-1.413z"
      />
    </svg>
  ),

  'chevron-down': ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  ),

  'chevron-left': ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="15 18 9 12 15 6" />
    </svg>
  ),

  close: ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill={color}
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),

  check: ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14" />
      <polyline points="23 3 12 14 9 11" />
    </svg>
  ),

  user: ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
      <circle cx="12" cy="7" r="4" />
    </svg>
  ),

  'fa-user-circle': ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 1792 1792"
      fill={color}
      stroke="none"
    >
      <path d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z" />
    </svg>
  ),

  'feather-share': ({size, color, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
      <polyline points="16 6 12 2 8 6" />
      <line x1="12" y1="2" x2="12" y2="15" />
    </svg>
  ),

  'feather-bookmark': ({size, color, stroke, fill, ...rest}) => (
    <svg
      width={size}
      height={size}
      {...rest}
      viewBox="0 0 24 24"
      fill={fill || 'none'}
      stroke={color || stroke || 'none'}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
    </svg>
  ),
};

export default Icon;