Skip to content

Instantly share code, notes, and snippets.

@jamiehaywood
Created May 13, 2020 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamiehaywood/7fc214e040c4bcf3f6d06618111a9771 to your computer and use it in GitHub Desktop.
Save jamiehaywood/7fc214e040c4bcf3f6d06618111a9771 to your computer and use it in GitHub Desktop.
Reusable SVG base TypeScript button. It includes types to make it easy to consume.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment