Rename Sprite component to Icon

Author: webstackdev

.gitignore

@@ -4,7 +4,6 @@ dist/
 # generated types
 .astro/
 .vercel/
-src/components/GeneratedSprites.astro
 
 # test output
 /test-results/

README.md

@@ -369,27 +369,23 @@ losst.pro has a modal that pops up for fixing mistakes:
 - astro-navigation
 - astro-webfinger (Mastodon)
 
-## Sprites
+## Icons
 
 Icons are managed through the `astro-icon` system with SVG files stored in `src/icons/`.
 
 **Adding a new icon:**
 
-1. Add the SVG file to `src/icons/` (use kebab-case naming)
-2. Update `src/components/Sprite/sprites.ts` to add the icon name to the `SpriteName` union type
-3. Use the icon with the `Sprite` component
+See [docs](src/icons/README.md).
 
 **Usage:**
 
 ```typescript
 ---
- import Sprite from 'components/Sprite.astro'
+ import Icon from 'components/Icon.astro'
 ---
-<Sprite name="fileName" class="customClassName"/>
+<Icon name="fileName" class="customClassName"/>
 ```
 
-See `src/icons/README.md` for detailed icon documentation.
-
 ## Pages
 
 Any `.astro`, `.md`, or `.mdx` file anywhere within the `src/pages/` folder automatically became a page on your site.

src/components/Button/index.astro

@@ -1,7 +1,7 @@
 ---
 import type { ButtonProps } from '@components/Button/server'
 import { buildButtonClassList, resolveAriaLabel } from '@components/Button/server'
-import Sprite from '@components/Sprite/index.astro'
+import Icon from '@components/Icon/index.astro'
 import styles from './button.module.css'
 
 type Props = ButtonProps
@@ -48,10 +48,10 @@ const ariaAttributes = computedAriaLabel ? { 'aria-label': computedAriaLabel } :
 >
   {
     icon && (iconPosition === 'left' || iconPosition === 'only') && (
-      <Sprite name={icon} size={defaultIconSize} class={text ? 'mr-2' : ''} />
+      <Icon name={icon} size={defaultIconSize} class={text ? 'mr-2' : ''} />
     )
   }
   {text && <span>{text}</span>}
-  {icon && iconPosition === 'right' && <Sprite name={icon} size={defaultIconSize} class="ml-2" />}
+  {icon && iconPosition === 'right' && <Icon name={icon} size={defaultIconSize} class="ml-2" />}
   <slot />
 </button>

src/components/Button/server/index.ts

@@ -1,4 +1,4 @@
-import type { SpriteName } from '@components/Sprite/sprites'
+import type { IconName } from '@components/Icon/@types/icons'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'twitter' | 'success' | 'warning' | 'icon'
 export type ButtonSize = 'small' | 'medium' | 'large'
@@ -17,7 +17,7 @@ export interface ButtonProps {
   id?: Optional<string>
   ariaLabel?: Optional<string>
   onClick?: Optional<string>
-  icon?: Optional<SpriteName>
+  icon?: Optional<IconName>
   iconPosition?: Optional<IconPosition>
   iconSize?: Optional<number | string>
 }
@@ -86,7 +86,7 @@ export function buildButtonClassList({
 export interface ButtonLabelOptions {
   text?: Optional<string>
   ariaLabel?: Optional<string>
-  icon?: Optional<SpriteName>
+  icon?: Optional<IconName>
   iconPosition?: Optional<IconPosition>
 }
 
@@ -110,7 +110,7 @@ export function resolveAriaLabel({ text, ariaLabel, icon, iconPosition }: Button
   return undefined
 }
 
-function humanizeIconName(icon: SpriteName): string {
+function humanizeIconName(icon: IconName): string {
   return icon
     .replace(/[-_]+/g, ' ')
     .replace(/\b\w/g, (char) => char.toUpperCase())

src/components/Callout/index.astro

@@ -1,6 +1,6 @@
 ---
-import Sprite from '@components/Sprite/index.astro'
-import type { SpriteName } from '@components/Sprite/sprites'
+import Icon from '@components/Icon/index.astro'
+import type { IconName } from '@components/Icon/@types/icons'
 
 export interface Props {
   type?: 'warning' | 'action' | 'tip' | 'info' | 'note'
@@ -9,7 +9,7 @@ export interface Props {
 const { type = 'info' } = Astro.props
 
 // Map callout types to sprite icons
-const iconMap: Record<string, SpriteName> = {
+const iconMap: Record<string, IconName> = {
   warning: 'warning',
   action: 'warning',
   info: 'info',
@@ -35,7 +35,7 @@ const borderColorMap: Record<string, string> = {
   note: 'var(--color-text)',
 }
 
-const icon: SpriteName = iconMap[type] as SpriteName
+const icon: IconName = iconMap[type] as IconName
 const backgroundColor = backgroundColorMap[type]
 const borderColor = borderColorMap[type]
 ---
@@ -61,7 +61,7 @@ const borderColor = borderColorMap[type]
   <div
     class="callout__icon bg-bg rounded-full absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2"
   >
-    <Sprite name={icon} size={20} />
+    <Icon name={icon} size={20} />
   </div>
 
   <div class="callout__content border-l-4 p-4 md:pl-8">

src/components/Consent/Banner/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets'
-import Sprite from '@components/Sprite/index.astro'
+import Icon from '@components/Icon/index.astro'
 import Button from '@components/Button/index.astro'
 import CookieSvg from '@assets/images/site/cookie.svg'
 ---
@@ -22,7 +22,7 @@ import CookieSvg from '@assets/images/site/cookie.svg'
     aria-label="close cookie consent dialog"
     class="consent-modal__close-btn bg-secondary border-none text-text flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-secondary-offset hover:text-text focus:bg-secondary-offset focus:text-text focus:outline-none z-10"
   >
-    <Sprite name="close" class="h-8 w-8" />
+    <Icon name="close" class="h-8 w-8" />
   </button>
 
   <!-- Modal content container with page column constraints -->

src/components/Consent/Preferences/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets'
-import Sprite from '@components/Sprite/index.astro'
+import Icon from '@components/Icon/index.astro'
 import logoSvg from '@assets/images/site/logo.svg'
 ---
 
@@ -30,7 +30,7 @@ import logoSvg from '@assets/images/site/logo.svg'
         data-testid="consent-preferences-close"
         aria-label="Close privacy preferences dialog"
       >
-        <Sprite name="close" />
+        <Icon name="close" />
       </button>
     </div>
 

src/components/Footer/footer.module.css.d.ts

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly footerGrid: string
+  readonly footerContact: string
+  readonly footerSocial: string
+  readonly footerBottomRow: string
+  readonly footerCopyright: string
+  readonly footerHireMe: string
+  readonly footerHireMeAnchor: string
+  readonly footerFeedIcon: string
+}
+
+export default styles

src/components/Footer/index.astro

@@ -3,8 +3,8 @@ import { Image } from 'astro:assets'
 import contactData from '@content/contact.json'
 import { absoluteUrl } from '@components/scripts/utils'
 import { formatPhoneNumber } from '@components/Footer/server'
-import Sprite from '@components/Sprite/index.astro'
-import type { SpriteName } from '@components/Sprite/sprites'
+import Icon from '@components/Icon/index.astro'
+import type { IconName } from '@components/Icon/@types/icons'
 import AuthorAvatar from '@assets/images/avatars/kevin-brown.webp'
 import styles from './footer.module.css'
 
@@ -83,7 +83,7 @@ const year = new Date().getFullYear()
                 class="flex items-baseline uppercase text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
               >
                 <span class="[&_.icon]:h-4 [&_.icon]:w-4">
-                  <Sprite name={social.iconName as SpriteName} variant="inherit" />
+                  <Icon name={social.iconName as IconName} variant="inherit" />
                 </span>
                 <span class="footer-social-platform ml-2 mt-4">{social.displayName}</span>
               </a>
@@ -131,7 +131,7 @@ const year = new Date().getFullYear()
           class="text-text [&_.icon]:fill-text! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
         >
           <span class="sr-only">RSS Feed</span>
-          <span><Sprite name="feed" variant="inherit" /></span>
+          <span><Icon name="feed" variant="inherit" /></span>
         </a>
       </span>
     </div>

src/components/Hero/Default/content.astro

@@ -2,7 +2,7 @@
 /**
  * Hero Content Column - Default Variant
  */
-import Sprite from '@components/Sprite/index.astro'
+import Icon from '@components/Icon/index.astro'
 
 export interface Props {
   pretitle?: string
@@ -51,7 +51,7 @@ const { pretitle, title, benefits, primaryLink, secondaryLink } = Astro.props as
           {benefits.map(benefit => (
             <li class="flex items-start gap-3">
               <span class="shrink-0 w-6 h-6 text-success [&_.icon]:w-6 [&_.icon]:h-6 [&_.icon]:stroke-current">
-                <Sprite name="check" />
+                <Icon name="check" />
               </span>
               <span class="text-base md:text-lg text-text">
                 <strong class="font-bold text-primary">{benefit.highlight}</strong>{' '}