Refactor AstroIcon and AstroLogo usage in FeatureCard.astro and index…

….astro

package.json

@@ -22,6 +22,7 @@
     "@iconify-json/heroicons": "^1.2.1",
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/typography": "^0.5.15",
+    "@studiocms/ui": "https://pkg.pr.new/withstudiocms/studiocms/@studiocms/ui@393",
     "astro": "^5.0.0",
     "astro-icon": "^1.1.4",
     "html-entities": "^2.5.2",

src/components/FeatureCard.astro

@@ -1,5 +1,7 @@
 ---
-import { Icon as AstroIcon } from 'astro-icon/components';
+import { icons as heroIcons } from '@iconify-json/heroicons/icons.json';
+import Icon from '@studiocms/ui/utils/Icon.astro';
+import type { HeroIconName } from '@studiocms/ui/utils/iconType.ts';
 import AstroLogo from '../assets/astro.svg';
 import Markdown from '../assets/markdown.svg';
 
@@ -11,7 +13,15 @@ interface Props {
 
 const { icon, description, feature } = Astro.props;
 
-const useAstroIcon = icon.startsWith('heroicons:');
+const heroIconName = icon.replace('heroicons:', '');
+
+const isHeroIcon = (icon: string) => {
+	const Hero = Object.keys(heroIcons);
+
+	if (Hero.includes(icon)) return true;
+
+	return false;
+};
 ---
 
 <div
@@ -20,8 +30,8 @@ const useAstroIcon = icon.startsWith('heroicons:');
   <div class='h-full place-self-center rounded-lg bg-slate-200 dark:bg-[--purple-900] p-6 md:p-8'>
     <div class='flex items-center justify-start gap-3 pb-4'>
       {
-        useAstroIcon
-          ? <AstroIcon name={icon} class='h-8 w-8 stroke-black stroke-[0.1px] text-[--purple-900] dark:text-white' />
+        isHeroIcon(heroIconName)
+          ? <Icon name={heroIconName as HeroIconName} class='h-8 w-8 stroke-black stroke-[0.1px] text-[--purple-900] dark:text-white' />
           : icon === "astro" 
             ? <AstroLogo  height={32} width={32} class='stroke-black stroke-[0.1px] text-[--purple-900] dark:text-white' />
             : icon === "markdown" 

src/components/Head.astro

@@ -1,6 +1,6 @@
 ---
 import ThemeManager from './ThemeManager.astro';
-import '@fontsource-variable/onest';
+import '@fontsource-variable/onest/index.css';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
 interface Props {
 	title?: string;

src/components/Marquee.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Icon from '@studiocms/ui/utils/Icon.astro';
 import { marqueeKeywords } from '../constants';
 ---
 
@@ -12,7 +12,7 @@ import { marqueeKeywords } from '../constants';
         <div class='inline-block px-6 text-3xl'>
           <span class='flex items-center gap-x-6 font-medium'>
             {keyword}
-            <Icon name='heroicons:circle-stack' class='h-10 w-10' />
+            <Icon name='circle-stack' class='h-10 w-10' />
           </span>
         </div>
       ))
@@ -24,7 +24,7 @@ import { marqueeKeywords } from '../constants';
         <div class='inline-block px-6 text-3xl'>
           <span class='flex items-center gap-x-6 font-medium'>
             {keyword}
-            <Icon name='heroicons:circle-stack' class='h-10 w-10' />
+            <Icon name='circle-stack' class='h-10 w-10' />
           </span>
         </div>
       ))

src/components/Navbar.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Icon from '@studiocms/ui/utils/Icon.astro';
 import Discord from '../assets/discord.svg';
 import Github from '../assets/github.svg';
 import Logo from '../assets/logo.svg';
@@ -95,7 +95,7 @@ import ThemeSelect from './ThemeSelect.astro';
         <li class="relative">
           <div id="mobile-dropdown-icon-container">
             <Icon
-              name='heroicons:bars-3'
+              name='bars-3'
               class='h-8 w-8 transition duration-200 ease-in-out cursor-pointer'
             />
           </div>

src/components/ThemeSelect.astro

@@ -1,12 +1,12 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Icon from '@studiocms/ui/utils/Icon.astro';
 import Check from '../assets/check.svg';
 ---
 
 <div class="dropdown relative select-none w-8 h-8 z-50">
   <button id="themeselector" class="hover:scale-110 transition duration-200 ease-in-out" aria-label="Select Theme">
-    <Icon name={'heroicons:sun-solid'} class="h-8 w-8 text-black dark:hidden" />
-    <Icon name={'heroicons:moon-solid'} class="hidden h-8 w-8 text-white dark:block" />
+    <Icon name={'sun-solid'} class="h-8 w-8 text-black dark:hidden" />
+    <Icon name={'moon-solid'} class="hidden h-8 w-8 text-white dark:block" />
   </button>
 
   <div class="dropdown__window absolute right-0 top-12 z-10 hidden min-w-40 overflow-hidden rounded-md shadow-[0_3px_10px_rgb(0,0,0,0.2)] focus-visible:outline-none dark:shadow-[0_3px_10px_rgb(0,0,0,0.2)]" tabindex="0">

src/pages/blog/[...slug]/index.astro

@@ -1,8 +1,8 @@
 ---
 import { Image, getImage } from 'astro:assets';
 import { getCollection, getEntry } from 'astro:content';
+import Icon from '@studiocms/ui/utils/Icon.astro';
 import type { GetStaticPaths, ImageMetadata } from 'astro';
-import { Icon } from 'astro-icon/components';
 import BlueSky from '../../../components/BlueSky.astro';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 
@@ -47,7 +47,7 @@ const imageProps = {
         <section class='studiocms-container mx-auto min-h-[calc(100vh_-_70px)]'>
             <div class="breadcrumbs mb-4 text-lg">
                 <a href="/blog" class="hover:text-indigo-400 transition-colors flex flex-row gap-2 items-center">
-                    <Icon name="heroicons:arrow-left" class={'w-6 h-6'} />
+                    <Icon name="arrow-left" class={'w-6 h-6'} />
                     <span>Back to Blog</span>
                 </a>
             </div>

src/pages/blog/index.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-import { Icon } from 'astro-icon/components';
+import Icon from '@studiocms/ui/utils/Icon.astro';
 import BlogCard from '../../components/BlogCard.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
@@ -18,7 +18,7 @@ blogPosts.sort(({ data: { publishDate: a } }, { data: { publishDate: b } }) => {
     <h1 class="text-5xl font-bold mb-8">
       The StudioCMS Blog 
       <!-- <a href="/rss.xml" title="RSS Feed">
-        <Icon name="heroicons:rss" class="inline" />
+        <Icon name="rss" class="inline" />
       </a> -->
     </h1>
     <p class="mb-12 text-lg">Get the latest news from StudioCMS</p>

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
-// import { Icon } from 'astro-icon/components';
+// import Icon from '@studiocms/ui/utils/Icon.astro';
 import Image from 'astro/components/Image.astro';
 import Patreon from '../assets/patreon.svg';
 import Star from '../assets/star.svg';