Reusable SVG base TypeScript button. It includes types to make it easy to consume.

SVGButton.tsx

import React from "react";
import "./Button.scss";
import * as SVG from "../../images";
import { Link } from "react-router-dom";

interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  width?: string;
  height?: string;
  buttonType: ButtonType;
  fill: string;
  link?: string;
}

type ButtonType =
  | "Delete"
  | "WhiteDelete"
  | "Previous"
  | "Next"
  | "Shutter"
  | "Photo"
  | "Pill"
  | "Trash"
  | "Exclamation";

const SVGButton: React.FC<ButtonProps> = (props) => {
  let button;
  switch (props.buttonType) {
    case "Delete":
      button = <SVG.Delete fill={props.fill} />;
      break;
    case "WhiteDelete":
      button = <SVG.WhiteDelete />;
      break;
    case "Next":
      button = <SVG.Next fill={props.fill} />;
      break;
    case "Photo":
      button = <SVG.Shutter fill={props.fill} />;
      break;
    case "Previous":
      button = <SVG.Previous fill={props.fill} />;
      break;
    case "Shutter":
      button = <SVG.Shutter fill={props.fill} />;
      break;
    case "Trash":
      button = <SVG.Trash fill={props.fill} />;
      break;
    case "Exclamation":
      button = <SVG.Exclamation fill={props.fill} />;
      break;
  }
  return (
    <button
      style={{
        height: props.height,
        width: props.width,
      }}
      onClick={props.link ? () => {} : props.onClick}
      className={props.className}
    >
      {props.link ? <Link to={props.link || "/"}>{button}</Link> : button}
    </button>
  );
};

export default SVGButton;