feat: install heroicons (#57)

* chore: installed heroicons

* chore: reorganized icons

Author: hussedev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitcoin-ui",
-  "version": "0.0.10",
+  "version": "0.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -106,6 +106,7 @@
     ]
   },
   "dependencies": {
+    "@heroicons/react": "1.0.6",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
@@ -159,4 +160,4 @@
     "vite-plugin-wasm": "^3.3.0",
     "zod": "^3.23.8"
   }
-}
+}

pnpm-lock.yaml

@@ -0,0 +1,27 @@
+import CheckerIcon from "./checker.svg?react";
+import ExplorerIcon from "./explorer.svg?react";
+import ShineIcon from "./shine.svg?react";
+import UserIcon from "./user.svg?react";
+import VerifiedBadgeIcon from "./verifiedBadge.svg?react";
+
+enum CustomIconType {
+  CHECKER = "checker",
+  EXPLORER = "explorer",
+  SHINE = "shine",
+  USER = "user",
+  VERIFIEDBADGE = "verifiedBadge",
+}
+
+const customIconComponents: Record<CustomIconType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+  checker: CheckerIcon,
+  explorer: ExplorerIcon,
+  shine: ShineIcon,
+  user: UserIcon,
+  verifiedBadge: VerifiedBadgeIcon,
+};
+const customIcons = Object.keys(customIconComponents).sort((a, b) =>
+  a.localeCompare(b),
+) as CustomIconType[];
+
+export { CheckerIcon, ExplorerIcon, ShineIcon, UserIcon, VerifiedBadgeIcon };
+export { CustomIconType, customIconComponents, customIcons };

src/assets/icons/calendar.svg

@@ -0,0 +1,80 @@
+// Status Icons
+import { InformationCircleIcon } from "@heroicons/react/outline";
+import {
+  CalendarIcon,
+  CheckCircleIcon as CheckSolidIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardListIcon,
+  ClockIcon,
+  ExclamationCircleIcon,
+  GlobeAltIcon as GlobeIcon,
+  LinkIcon,
+  QuestionMarkCircleIcon as SolidQuestionMarkCircleIcon,
+  SparklesIcon,
+  StarIcon,
+  XCircleIcon as XSolidIcon,
+  XIcon,
+} from "@heroicons/react/solid";
+
+enum HeroiconsType {
+  CALENDAR = "calendar",
+  CHECK = "check",
+  CHEVRON_LEFT = "chevron-left",
+  CLIPBOARD_LIST = "clipboardList",
+  CLOCK = "clock",
+  EXCLAMATION_CIRCLE = "exclamation-circle",
+  LINK = "link",
+  GLOBE = "globe",
+  INFORMATION_CIRCLE = "informationCircle",
+  SOLID_CHECK = "solid-check",
+  SOLID_QUESTION_MARK_CIRCLE = "questionMarkCircle",
+  SOLID_X = "solid-x",
+  SPARKLES = "sparkles",
+  STAR = "star",
+  X = "x",
+}
+
+const heroiconsComponents: Record<HeroiconsType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+  calendar: CalendarIcon,
+  check: CheckIcon,
+  "chevron-left": ChevronLeftIcon,
+  clipboardList: ClipboardListIcon,
+  clock: ClockIcon,
+  "exclamation-circle": ExclamationCircleIcon,
+  informationCircle: InformationCircleIcon,
+  globe: GlobeIcon,
+  link: LinkIcon,
+  questionMarkCircle: SolidQuestionMarkCircleIcon,
+  "solid-check": CheckSolidIcon,
+  sparkles: SparklesIcon,
+  star: StarIcon,
+  "solid-x": XSolidIcon,
+  x: XIcon,
+};
+
+const heroIcons = Object.keys(heroiconsComponents).sort((a, b) =>
+  a.localeCompare(b),
+) as HeroiconsType[];
+
+export {
+  CalendarIcon,
+  CheckSolidIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardListIcon,
+  ClockIcon,
+  ExclamationCircleIcon,
+  InformationCircleIcon,
+  GlobeIcon,
+  LinkIcon,
+  SolidQuestionMarkCircleIcon,
+  SparklesIcon,
+  StarIcon,
+  XSolidIcon,
+  XIcon,
+};
+
+export { heroiconsComponents, HeroiconsType, heroIcons };

src/assets/icons/check.svg

@@ -1,40 +1,10 @@
-// Status Icons
-export { default as CheckIcon } from "./check.svg?react";
-// Solid Check Icon
-export { default as CheckSolidIcon } from "./solid/check.svg?react";
-export { default as ExclamationCircleIcon } from "./exclamationCircle.svg?react";
-export { default as XIcon } from "./x.svg?react";
-export { default as LinkIcon } from "./link.svg?react";
-export { default as clipboardListIcon } from "./clipboardList.svg?react";
-export { default as StarIcon } from "./star.svg?react";
-export { default as InformationCircleIcon } from "./information_circle.svg?react";
-
-// Solid X Icon
-export { default as XSolidIcon } from "./solid/x.svg?react";
-export { default as SolidQuestionMarkCircleIcon } from "./solid/questionMarkCircle.svg?react";
-export { default as ChevronLeftIcon } from "./solid/chevron-left.svg?react";
-
-// Time Icons
-export { default as ClockIcon } from "./clock.svg?react";
-export { default as CalendarIcon } from "./calendar.svg?react";
-
-// Miscellaneous Icons
-export { default as SparklesIcon } from "./sparkles.svg?react";
-export { default as ShineIcon } from "./shine.svg?react";
-export { default as UserIcon } from "./user.svg?react";
-export { default as VerifiedBadgeIcon } from "./verifiedBadge.svg?react";
-export { default as GlobeIcon } from "./globe.svg?react";
-export { default as ExplorerIcon } from "./explorer.svg?react";
-export { default as CheckerIcon } from "./checker.svg?react";
+export * from "./heroicons";
 
 // Social Media Icons
-export { default as GithubIcon } from "./github.svg?react";
-export { default as TwitterIcon } from "./twitter.svg?react";
+export * from "./socialMedia";
 
 // Cryptocurrency Icons
-export { default as ETHIcon } from "./networks/eth.svg?react";
-export { default as PolygonIcon } from "./networks/polygon.svg?react";
-export { default as ArbitrumIcon } from "./networks/arbitrum.svg?react";
-export { default as AvaxIcon } from "./networks/avax.svg?react";
-export { default as BaseIcon } from "./networks/base.svg?react";
-export { default as OptimismIcon } from "./networks/optimism.svg?react";
+export * from "./networks";
+
+// Custom Icons
+export * from "./custom";

src/assets/icons/clipboardList.svg

@@ -0,0 +1,31 @@
+import ArbitrumIcon from "./arbitrum.svg?react";
+import AvaxIcon from "./avax.svg?react";
+import BaseIcon from "./base.svg?react";
+import ETHIcon from "./eth.svg?react";
+import OptimismIcon from "./optimism.svg?react";
+import PolygonIcon from "./polygon.svg?react";
+
+enum NetworkIconType {
+  ETH = "eth",
+  OPTIMISM = "optimism",
+  POLYGON = "polygon",
+  ARBITRUM = "arbitrum",
+  AVAX = "avax",
+  BASE = "base",
+}
+
+const networkIconComponents: Record<NetworkIconType, React.FC<React.SVGProps<SVGSVGElement>>> = {
+  arbitrum: ArbitrumIcon,
+  avax: AvaxIcon,
+  base: BaseIcon,
+  eth: ETHIcon,
+  optimism: OptimismIcon,
+  polygon: PolygonIcon,
+};
+
+const networkIcons = Object.keys(networkIconComponents).sort((a, b) =>
+  a.localeCompare(b),
+) as NetworkIconType[];
+
+export { ArbitrumIcon, AvaxIcon, BaseIcon, ETHIcon, OptimismIcon, PolygonIcon };
+export { NetworkIconType, networkIconComponents, networkIcons };

src/assets/icons/clock.svg

@@ -0,0 +1,22 @@
+import GithubIcon from "./github.svg?react";
+import TwitterIcon from "./twitter.svg?react";
+
+enum SocialMediaIconType {
+  TWITTER = "twitter",
+  GITHUB = "github",
+}
+
+const socialMediaIconComponents: Record<
+  SocialMediaIconType,
+  React.FC<React.SVGProps<SVGSVGElement>>
+> = {
+  twitter: TwitterIcon,
+  github: GithubIcon,
+};
+
+const socialMediaIcons = Object.keys(socialMediaIconComponents).sort((a, b) =>
+  a.localeCompare(b),
+) as SocialMediaIconType[];
+
+export { GithubIcon, TwitterIcon };
+export { SocialMediaIconType, socialMediaIconComponents, socialMediaIcons };