Skip to content

Instantly share code, notes, and snippets.

@beheh
Created November 10, 2022 16:54
Show Gist options
  • Save beheh/b49bee1004e411499562798e83c3b8bb to your computer and use it in GitHub Desktop.
Save beheh/b49bee1004e411499562798e83c3b8bb to your computer and use it in GitHub Desktop.
import React, { memo } from "react";
import styled from "styled-components";
export type Size = "2x" | "3x" | "4x" | "5x" | "6x";
type BasicMana = "w" | "u" | "b" | "r" | "g" | "c" | "s";
type HybridMana =
| "wu"
| "wb"
| "ub"
| "ur"
| "br"
| "bg"
| "rg"
| "rw"
| "gw"
| "gu"
| "2w"
| "2u"
| "2b"
| "2r"
| "2g";
type PhyrexianMana = "p" | "wp" | "up" | "bp" | "rp" | "gp";
type GenericMana =
| "0"
| "1"
| "2"
| "3"
| "4"
| "5"
| "6"
| "7"
| "8"
| "9"
| "10"
| "11"
| "12"
| "13"
| "14"
| "15"
| "16"
| "17"
| "18"
| "19"
| "20"
| "x"
| "y"
| "z"
| "1-2"
| "infinity"
| "100"
| "1000000"
| "e";
type CardSymbol =
| "tap"
| "untap"
| "tap-alt"
| "chaos"
| "artifact"
| "creature"
| "enchantment"
| "instant"
| "land"
| "planeswalker"
| "sorcery"
| "multiple"
| "flashback"
| "loyalty-up"
| "loyalty-down"
| "loyalty-zero"
| "loyalty-start"
| "dfc-day"
| "dfc-night"
| "dfc-spark"
| "dfc-ignite"
| "dfc-moon"
| "dfc-emrakul"
| "dfc-enchantment"
| "power"
| "toughness"
| "artist-brush"
| "artist-nib";
type GuildSymbol =
| "guild-azorius"
| "guild-boros"
| "guild-dimir"
| "guild-golgari"
| "guild-gruul"
| "guild-izzet"
| "guild-orzhov"
| "guild-rakdos"
| "guild-selesnya"
| "guild-simic";
type ClanSymbol =
| "clan-abzan"
| "clan-jeskai"
| "clan-mardu"
| "clan-sultai"
| "clan-temur"
| "clan-atarka"
| "clan-dromoka"
| "clan-kolaghan"
| "clan-ojutai"
| "clan-silumgar";
type PolisSymbol = "polis-setessa" | "polis-akros" | "polis-meletis";
type AbilitySymbol = "ability-adventure";
export type IconType =
| BasicMana
| HybridMana
| PhyrexianMana
| GenericMana
| CardSymbol
| GuildSymbol
| ClanSymbol
| PolisSymbol
| AbilitySymbol;
const DEFAULT_LABELS = {
w: "white",
u: "blue",
b: "black",
r: "red",
g: "green",
c: "colorless",
};
interface Props {
type: IconType;
cost?: boolean;
shadow?: boolean;
half?: boolean;
size?: Size;
fixedWidth?: boolean;
role?: string;
"aria-label"?: string;
}
const Icon = styled.i``;
const MtgIcon: React.FC<Props> = ({
type,
cost,
shadow,
half,
size,
fixedWidth,
role = "img",
"aria-label": ariaLabel,
}) => {
const className = ["ms ms-" + type];
if (cost !== false) {
className.push("ms-cost");
}
if (shadow) {
className.push("ms-shadow");
}
if (half) {
className.push("ms-half");
}
if (size) {
className.push("ms-" + size);
}
if (fixedWidth) {
className.push("ms-fw");
}
return (
<Icon
className={className.join(" ")}
role={role}
aria-label={ariaLabel ?? DEFAULT_LABELS[type] ?? type}
/>
);
};
export default memo(MtgIcon);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment