[icons] Migrate Card component unplugin-icons → astro-icon

Author: moonclavedev

astro.config.mjs

@@ -13,7 +13,6 @@ import sitemap from "@astrojs/sitemap";
 import partytown from "@astrojs/partytown";
 import node from "@astrojs/node";
 import react from "@astrojs/react";
-import Icons from "unplugin-icons/vite";
 import starlightLlmsTxt from "starlight-llms-txt";
 import favicons from "astro-favicons";
 import icon from "astro-icon";
@@ -177,6 +176,9 @@ export default defineConfig({
           "file-text",
           "book-open",
           "circle-dashed",
+          "lightning",
+          "terminal",
+          "globe-simple",
         ],
       },
     }),
@@ -189,7 +191,7 @@ export default defineConfig({
         mode: "standalone",
       }),
   vite: {
-    plugins: [tailwindcss(), Icons({ compiler: "astro" })],
+    plugins: [tailwindcss()],
     optimizeDeps: {
       exclude: ["@rollup/browser"],
     },

package.json

@@ -87,8 +87,7 @@
     "starlight-package-managers": "^0.10.0",
     "tailwindcss": "^4.0.6",
     "unist-util-remove": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
-    "unplugin-icons": "^22.1.0"
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",

pnpm-lock.yaml

@@ -1,9 +1,6 @@
 ---
-// Import specific icons that we want to support
-import IconLightning from "~icons/ph/lightning";
-import IconTerminal from "~icons/ph/terminal";
-import IconFileText from "~icons/ph/file-text";
-import IconGlobeSimple from "~icons/ph/globe-simple";
+// Import Icon component from astro-icon
+import { Icon } from "astro-icon/components";
 
 interface Props {
   iconName?: string;
@@ -13,34 +10,19 @@ interface Props {
 
 const { iconName, title, iconProps = {} } = Astro.props;
 
-// Default icon props that will be applied to all icons
-const defaultIconProps = {
-  "font-size": "1.5rem",
-  "aria-hidden": true,
-};
+// Extract icon size from props or use default
+const iconSize = (iconProps.size as string) || "1.5rem";
 
-// Merge default props with user-provided props (user props take precedence)
-const mergedIconProps = { ...defaultIconProps, ...iconProps };
-
-// Map of icon names to components
-const iconMap = {
-  lightning: IconLightning,
-  terminal: IconTerminal,
-  "file-text": IconFileText,
-  "globe-simple": IconGlobeSimple,
-} as const;
-
-// Get the icon component based on the iconName
-const IconComponent =
-  iconName && iconName in iconMap ? iconMap[iconName as keyof typeof iconMap] : null;
+// Prefix with 'ph:' if not already prefixed
+const iconPath = iconName ? (iconName.includes(":") ? iconName : `ph:${iconName}`) : null;
 ---
 
 <article class="card sl-flex">
   <p class="title sl-flex">
     {
-      IconComponent && (
+      iconPath && (
         <span class="icon">
-          <IconComponent {...mergedIconProps} />
+          <Icon name={iconPath} size={iconSize} aria-hidden="true" />
         </span>
       )
     }