refactor: update icon references in documentation and configuration files to use iconify library icons

LeadcodeDev · LeadcodeDev · commit ac11d3b33494 · 2025-05-09T17:02:04.000+02:00
diff --git a/.astro/content-modules.mjs b/.astro/content-modules.mjs
@@ -2,13 +2,13 @@
 export default new Map([
 ["src/content/blog/welcome.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fblog%2Fwelcome.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/blog.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fblog.mdx&astroContentModuleFlag=true")],
-["src/content/docs/framework/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fdocs.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/configuration.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fconfiguration.mdx&astroContentModuleFlag=true")],
-["src/content/docs/framework/getting-started.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fgetting-started.mdx&astroContentModuleFlag=true")],
+["src/content/docs/framework/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fdocs.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/installation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Finstallation.mdx&astroContentModuleFlag=true")],
+["src/content/docs/framework/getting-started.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fgetting-started.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/framework/project-structure.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fframework%2Fproject-structure.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/syntax/alert.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Falert.mdx&astroContentModuleFlag=true")],
-["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")],
+["src/content/docs/syntax/code-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fcode-block.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/syntax/markdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fmarkdown.mdx&astroContentModuleFlag=true")],
-["src/content/docs/syntax/code-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Fcode-block.mdx&astroContentModuleFlag=true")]]);
+["src/content/docs/syntax/text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fsyntax%2Ftext.mdx&astroContentModuleFlag=true")]]);
 		
diff --git a/.astro/data-store.json b/.astro/data-store.json
diff --git a/explainer.config.ts b/explainer.config.ts
@@ -1,5 +1,4 @@
 import { defineExplainerConfig } from '@/utils'
-import { CuboidIcon, PencilLineIcon } from 'lucide-react'
 
 export default defineExplainerConfig({
   meta: {
@@ -14,13 +13,13 @@ export default defineExplainerConfig({
   },
   docs: {
     framework: {
-      icon: CuboidIcon,
+      icon: 'lucide:cuboid',
       label: 'Framework',
       href: '/docs/framework/getting-started',
       baseUrl: '/docs/framework',
     },
     syntax: {
-      icon: PencilLineIcon,
+      icon: 'lucide:pencil-line',
       label: 'Syntax',
       href: '/docs/syntax/texts',
       baseUrl: '/docs/syntax',
diff --git a/src/content/docs/framework/blog.mdx b/src/content/docs/framework/blog.mdx
@@ -2,7 +2,7 @@
 title: Blog
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: blog
-icon: Newspaper
+icon: lucide:newspaper
 order: 6
 ---
 import config from '../../../../explainer.config';
diff --git a/src/content/docs/framework/configuration.mdx b/src/content/docs/framework/configuration.mdx
@@ -2,7 +2,7 @@
 title: Configuration
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: configuration
-icon: Settings2
+icon: lucide:settings-2
 order: 4
 ---
 # Configuration
diff --git a/src/content/docs/framework/docs.mdx b/src/content/docs/framework/docs.mdx
@@ -2,7 +2,7 @@
 title: Documentation
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: docs
-icon: Book
+icon: lucide:book
 order: 5
 ---
 import config from '../../../../explainer.config';
diff --git a/src/content/docs/framework/getting-started.mdx b/src/content/docs/framework/getting-started.mdx
@@ -2,7 +2,7 @@
 title: Getting Started
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: getting-started
-icon: Info
+icon: lucide:info
 order: 1
 ---
 # Getting Started 🚀
diff --git a/src/content/docs/framework/installation.mdx b/src/content/docs/framework/installation.mdx
@@ -2,7 +2,7 @@
 title: Installation
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: installation
-icon: Play
+icon: lucide:play
 order: 2
 ---
 # Installation
diff --git a/src/content/docs/framework/project-structure.mdx b/src/content/docs/framework/project-structure.mdx
@@ -2,7 +2,7 @@
 title: Project Structure
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: project-structure
-icon: LayoutPanelTop
+icon: lucide:layout-panel-top
 order: 3
 ---
 # Project Structure
diff --git a/src/content/docs/syntax/alert.mdx b/src/content/docs/syntax/alert.mdx
@@ -2,7 +2,7 @@
 title: Alert
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: alert
-icon: Bell
+icon: lucide:bell
 order: 3
 ---
 # Alert
diff --git a/src/content/docs/syntax/code-block.mdx b/src/content/docs/syntax/code-block.mdx
@@ -2,7 +2,7 @@
 title: Code blocks
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: code-blocks
-icon: Code
+icon: lucide:code
 order: 4
 ---
 # Code blocks
diff --git a/src/content/docs/syntax/markdown.mdx b/src/content/docs/syntax/markdown.mdx
@@ -2,7 +2,7 @@
 title: Markdown
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: markdown
-icon: Highlighter
+icon: lucide:highlighter
 order: 2
 ---
 # Markdown utilities
diff --git a/src/content/docs/syntax/text.mdx b/src/content/docs/syntax/text.mdx
@@ -2,7 +2,7 @@
 title: Texts
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 permalink: texts
-icon: LetterText
+icon: lucide:letter-text
 order: 1
 ---
 # Texts
diff --git a/src/lib/components/elements/navbar.tsx b/src/lib/components/elements/navbar.tsx
@@ -11,7 +11,7 @@ import { cn } from "@/utils"
 import config from 'explainer.config'
 import { FileCode2Icon, LaptopIcon, MenuIcon, MoonIcon, SunIcon } from "lucide-react"
 import * as React from "react"
-import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet'
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet'
 
 const ListItem = React.forwardRef<
   React.ComponentRef<"a">,
@@ -129,14 +129,15 @@ export default function Navbar() {
                 <SheetHeader>
                   <SheetTitle>{config.meta.title}</SheetTitle>
                 </SheetHeader>
+                <SheetDescription />
                 <div className="flex flex-col items-start gap-2">
                   <a href="/" className="pt-5 text-sm font-medium hover:bg-accent hover:text-accent-foreground rounded-md cursor-pointer">
                     Home
                   </a>
                   {config.navbar.map((element) => {
                     if (element.href) {
                       return (
-                        <a href={element.href} className="text-sm font-medium hover:bg-accent hover:text-accent-foreground rounded-md cursor-pointer">
+                        <a key={element.label} href={element.href} className="text-sm font-medium hover:bg-accent hover:text-accent-foreground rounded-md cursor-pointer">
                           {element.label}
                         </a>
                       )
@@ -147,7 +148,7 @@ export default function Navbar() {
                         <p className="text-sm font-medium">{element.label}</p>
                         <ul className="flex flex-col items-start gap-5 pt-2 pb-5">
                           {element.items?.map((item) => (
-                            <a href={item.href} className="flex flex-col px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground rounded-md cursor-pointer">
+                            <a key={item.label} href={item.href} className="flex flex-col px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground rounded-md cursor-pointer">
                               <span>{item.label}</span>
                               <span className="text-xs text-muted-foreground">{item.description}</span>
                             </a>
diff --git a/src/lib/layouts/DocsLayout.astro b/src/lib/layouts/DocsLayout.astro
@@ -1,5 +1,6 @@
 ---
 import Separator from "@/components/elements/separator";
+import { Icon } from "@iconify/react";
 import type { CollectionKey, z } from "astro:content";
 import { getCollection } from "astro:content";
 import clsx from "clsx";
@@ -8,7 +9,6 @@ import type { docSchema } from "src/content.config";
 import config from "../../../explainer.config";
 import "../../assets/css/global.css";
 import "../../assets/css/markdown.css";
-import LucideIcon from "../components/elements/lucid-icon.astro";
 import BaseLayout from "./BaseLayout.astro";
 
 const currentCollection = Object.entries(config.docs).find(([key, element]) => {
@@ -27,7 +27,7 @@ const currentCollectionItems = collection
 		return {
 			label: item.data.title,
 			href: `/docs/${item.collection}/${item.data.permalink}`,
-			icon: item.data.icon,
+			icon: (item.data as z.infer<typeof docSchema>).icon,
 		};
 	});
 ---
@@ -57,7 +57,11 @@ const currentCollectionItems = collection
 														: "bg-gray-50 dark:bg-gray-800 ring-gray-200 dark:ring-gray-700 text-muted-foreground",
 												)}
 											>
-												<element.icon className="size-4" />
+												<Icon
+													client:only
+													icon={element.icon}
+													className="size-4"
+												/>
 											</div>
 											<span
 												class={clsx(
@@ -88,9 +92,10 @@ const currentCollectionItems = collection
 									>
 										<div class="flex items-center gap-2">
 											{item.icon ? (
-												<LucideIcon
-													name={item.icon as keyof typeof icons}
-													class={clsx(
+												<Icon
+													client:only
+													icon={item.icon as keyof typeof icons}
+													className={clsx(
 														"text-gray-500 dark:text-gray-400 group-hover:text-primary size-5",
 														Astro.url.pathname.startsWith(item.href)
 															? "text-primary"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,7 +1,5 @@
 import type { CollectionKey } from 'astro:content'
 import { clsx, type ClassValue } from "clsx"
-import type { LucideProps } from 'lucide-react'
-import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
@@ -27,7 +25,7 @@ type ExplainerMeta = {
 }
 
 type ExplainerDocs = {
-  icon: ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>
+  icon: string
   label: string
   href: string
   baseUrl: string
