convert Icon component from enum input to string type

components/Icon.tsx

@@ -1,16 +1,15 @@
-enum IconSet {
+type iconselection =
-	Menu,
+	| "Menu"
-	Users,
+	| "Users"
-	Link2,
+	| "Link2"
-	ExternalLink,
+	| "ExternalLink"
-	Twitter,
+	| "Twitter"
-	GitHub,
+	| "GitHub"
-	YouTube,
+	| "YouTube"
-	Discord,
+	| "Discord";
-}
 
 type iconprops = {
-	icon: IconSet;
+	icon: iconselection;
 	width?: number;
 	height?: number;
 } & React.SVGProps<SVGSVGElement>;
@@ -21,7 +20,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 		// - add {width || ogWidth}
 		// - add {height || ogHeight}
 		// - add {...props}
-		case IconSet.Menu:
+		case "Menu":
 			return (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +40,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			);
-		case IconSet.Users:
+		case "Users":
 			return (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +61,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M16 3.13a4 4 0 0 1 0 7.75" />
 				</svg>
 			);
-		case IconSet.Link2:
+		case "Link2":
 			return (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -81,7 +80,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="8" y1="12" x2="16" y2="12" />
 				</svg>
 			);
-		case IconSet.ExternalLink:
+		case "ExternalLink":
 			return (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -101,7 +100,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="10" y1="14" x2="21" y2="3" />
 				</svg>
 			);
-		case IconSet.Twitter:
+		case "Twitter":
 			// twitter icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -117,7 +116,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
 				</svg>
 			);
-		case IconSet.GitHub:
+		case "GitHub":
 			// github icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -133,7 +132,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 				</svg>
 			);
-		case IconSet.YouTube:
+		case "YouTube":
 			// youtube icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -149,7 +148,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
 				</svg>
 			);
-		case IconSet.Discord:
+		case "Discord":
 			// discord icon courtesy of simpleicons.org
 			return (
 				<svg
@@ -168,4 +167,4 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 	}
 };
 
-export { Icon, IconSet };
+export { Icon };

components/Navigation/Navigation.tsx

@@ -1,6 +1,6 @@
 import styles from "./Navigation.module.scss";
 import { GractwoLogo } from "../Logo";
-import { Icon, IconSet } from "../Icon";
+import { Icon } from "../Icon";
 
 import navigation from "../../data/navigation.json";
 import Link from "next/link";
@@ -26,7 +26,7 @@ const Navigation = () => {
 					);
 				})}
 				<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
-					<Icon icon={IconSet.Menu} />
+					<Icon icon="Menu" />
 					{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
 					<div className={styles.innerdropdown}>
 						{navigation.map((navlink) => {

pages/index.tsx

@@ -1,7 +1,7 @@
 import styles from "../styles/Index.module.scss";
 import { useEffect, useState } from "react";
 import { SEO } from "../components/SEO";
-import { Icon, IconSet } from "../components/Icon";
+import { Icon } from "../components/Icon";
 import splashes from "../data/splashes.json";
 import Link from "next/link";
 import { IndexGallery } from "../components/IndexGallery/IndexGallery";
@@ -64,16 +64,16 @@ const PageIndex = () => {
 			</div>
 			<main className="chips">
 				<Link href="/discord" className="chip">
-					discord <Icon icon={IconSet.Discord} />
+					discord <Icon icon="Discord" />
 				</Link>
 				<Link href="/youtube" className="chip">
-					youtube <Icon icon={IconSet.YouTube} />
+					youtube <Icon icon="YouTube" />
 				</Link>
 				<Link href="/twitter" className="chip">
-					twitter <Icon icon={IconSet.Twitter} />
+					twitter <Icon icon="Twitter" />
 				</Link>
 				<Link href="/github" className="chip">
-					github <Icon icon={IconSet.GitHub} />
+					github <Icon icon="GitHub" />
 				</Link>
 			</main>
 			<IndexGallery />

pages/o-gractwie.tsx

@@ -2,7 +2,7 @@ import { GractwoLogo } from "../components/Logo";
 import { SEO } from "../components/SEO";
 import styles from "../styles/oGractwie.module.scss";
 import Link from "next/link";
-import { Icon, IconSet } from "../components/Icon";
+import { Icon } from "../components/Icon";
 import administracja from "../data/administracja.json";
 import links from "../data/links.json";
 
@@ -36,11 +36,11 @@ const PageInfo = () => {
 				<div className="chips">
 					<Link href="#sklad-administracji" className="chip">
 						skład administracji
-						<Icon icon={IconSet.Users} />
+						<Icon icon="Users" />
 					</Link>
 					<Link href="#linki" className="chip">
 						linki i przekierowania
-						<Icon icon={IconSet.Link2} />
+						<Icon icon="Link2" />
 					</Link>
 				</div>
 			</main>