grid and style adjustments - new rarity component for rarity symbol svgs

src/components/RarityIcon.astro

@@ -0,0 +1,35 @@
+---
+import common from "/src/svg/rarity/common.svg?raw";
+import uncommon from "/src/svg/rarity/uncommon.svg?raw";
+import rare from "/src/svg/rarity/rare.svg?raw";
+import rareHolo from "/src/svg/rarity/rare_holo.svg?raw";
+import amazingRare from "/src/svg/rarity/amazing_rare.svg?raw";
+import illustrationRare from "/src/svg/rarity/illustration_rare.svg?raw";
+import megaAttackRare from "/src/svg/rarity/mega_attack_rare.svg?raw";
+import megaHyperRare from "/src/svg/rarity/mega_hyper_rare.svg?raw";
+import doubleRare from "/src/svg/rarity/double_rare.svg?raw";
+import promo from "/src/svg/rarity/promo.svg?raw";
+import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
+import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
+
+const { rarity } = Astro.props;
+
+const rarityMap = {
+  "Common": common,
+  "Uncommon": uncommon,
+  "Rare": rare,
+  "Holo Rare": rareHolo,
+  "Amazing Rare": amazingRare,
+  "Illustration Rare": illustrationRare,
+  "Mega Attack Rare": megaAttackRare,
+  "Mega Hyper Rare": megaHyperRare,
+  "Double Rare": doubleRare,
+  "Promo": promo,
+  "Special Illustration Rare": specialIllusRare,
+  "Ultra Rare": ultrarare, // Ultra Rare and Holo Rare use the same icon
+};
+
+const svg = rarityMap[rarity] ?? "";
+---
+
+<span class="rarity-icon h-100" set:html={svg}></span>