feat: add custom icon support and GLS SVG icon component

Author: nicosammito

src/packages/core/src/icons/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import GlsIcon from "./gls.svg"
+
+export type CustomIconProps = {
+    size?: number | string
+    color?: string
+} & Omit<React.SVGProps<SVGSVGElement>, "color">
+
+/**
+ * Wraps a raw SVG (loaded directly from its `.svg` file in this folder) into a
+ * component that accepts the same `size` and `color` props as the Tabler/Simple
+ * icons. The `fill` is applied on the root `<svg>` and inherited by the paths.
+ */
+const customIcon = (Svg: React.FC<React.SVGProps<SVGSVGElement>>): React.FC<CustomIconProps> =>
+    function CustomIcon({size = 24, color = "currentColor", ...rest}) {
+        return <Svg width={size} height={size} fill={color} {...rest}/>
+    }
+
+export const Gls = customIcon(GlsIcon)

src/packages/core/src/util/icons.tsx

@@ -1,15 +1,29 @@
 import React from "react"
 import * as TablerIcons from "@tabler/icons-react"
 import * as SimpleIcons from "@icons-pack/react-simple-icons"
+import * as CodeZeroIcons from "@core/icons"
 
 type TablerIcon = React.FC<TablerIcons.IconProps & React.RefAttributes<SVGSVGElement>>
 type SimpleIcon = React.FC<Omit<SimpleIcons.IconType, '$$typeof'>>
-export type IconString = `${'tabler'}:${string}` | `${'simple'}:${string}`
+type CustomIcon = React.FC<CodeZeroIcons.CustomIconProps>
 
-export const icon = (icon?: IconString): TablerIcon | SimpleIcon => {
+export type IconString = `${'tabler'}:${string}` | `${'simple'}:${string}` | `${'codezero'}:${string}`
+
+export const icon = (icon?: IconString): TablerIcon | SimpleIcon | CustomIcon => {
 
     const fallbackIcon = TablerIcons.IconNote
 
+    if (icon?.startsWith("codezero:")) {
+        const name = icon.replace("codezero:", "").trim()
+        const normalizedName = `${name.charAt(0).toUpperCase() + name.slice(1)}`
+
+        const resolvedIcon = normalizedName in CodeZeroIcons
+            ? CodeZeroIcons[normalizedName as keyof typeof CodeZeroIcons]
+            : fallbackIcon
+
+        return resolvedIcon as CustomIcon
+    }
+
     if (icon?.startsWith("simple:")) {
         const name = icon.replace("simple:", "").trim()
         const normalizedName = `Si${name.charAt(0).toUpperCase() + name.slice(1)}`