Component for SVG icon

SVGicon.js

import React from "react";

const getPath = (name, props) => {
  switch (name) {
    case "user":
      return (
        <path
          {...props}
          d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z"
        />
      );
    case "lock":
      return (
        <path
          {...props}
          d="M12,2C9.243,2,7,4.243,7,7v3H6c-1.103,0-2,0.897-2,2v8c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-8c0-1.103-0.897-2-2-2 h-1V7C17,4.243,14.757,2,12,2z M18,12l0.002,8H6v-8H18z M9,10V7c0-1.654,1.346-3,3-3s3,1.346,3,3v3H9z"
        />
      );
    case "eye":
      return (
        <path
          {...props}
          d="M11,0 C18.633,0 20.927,6.617 20.949,6.684 L20.949,6.684 L21.054,7 L20.9450416,7.32474737 C20.8490503,7.60172861 18.5057833,14 11,14 C3.367,14 1.073,7.383 1.051,7.316 L1.051,7.316 L0.946,7 L1.052,6.684 C1.073,6.617 3.367,0 11,0 Z M11,2 C5.652,2 3.578,5.842 3.074,7 C3.576,8.154 5.649,12 11,12 C16.348,12 18.422,8.158 18.926,7 C18.424,5.846 16.351,2 11,2 Z M11,4 C11.092,4 11.178,4.02 11.268,4.027 C11.103,4.317 11,4.646 11,5 C11,6.095 11.905,7 13,7 C13.354,7 13.683,6.897 13.973,6.732 C13.98,6.822 14,6.908 14,7 C14,8.642 12.641,10 11,10 C9.358,10 8,8.642 8,7 C8,5.359 9.358,4 11,4 Z"
        />
      );
    default:
      return <path />;
  }
};

const SVGIcon = ({
  name = "",
  style = {},
  fill = "#000",
  width = "24",
  className = "",
  height = "24"
}) => (
  <svg
    width={width}
    style={style}
    height={height}
    className={className}
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    {getPath(name, { fill })}
  </svg>
);

export default SVGIcon;