Fix SVGs on Backstage component

Author: webstackdev

src/components/Home/Backstage/index.astro

@@ -3,9 +3,9 @@
  * Backstage IDP Implementation section of the homepage
  */
 import { Image } from 'astro:assets'
+import Icon from '@components/Icon/index.astro'
 import backstageBackground from '@assets/images/backstage-background.jpg'
 
-type IconKey = keyof typeof svgPath
 export interface Props {
   pretitle: string
   description: string
@@ -16,19 +16,12 @@ export interface Props {
   features: {
     title: string
     description: string
-    icon: IconKey
+    icon: string
   }[]
 }
 
 const { pretitle, description, benefits, features } = Astro.props as Props
 
-const svgPath = {
-  'left-justified': 'M4 6h16M4 12h16M4 18h7',
-  'clipboard': 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
-  'lightning-bolt': 'M13 10V3L4 14h7v7l9-11h-7z',
-  'graph': 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
-} as const
-
 const visibleBenefits = benefits.slice(0, 3)
 const visibleFeatures = features.slice(0, 4)
 ---
@@ -69,20 +62,7 @@ const visibleFeatures = features.slice(0, 4)
         <div class="bg-page-offset p-6 rounded-xl border border-trim">
           <div class="flex items-center gap-3 mb-4">
             <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
-              <svg
-                class="w-5 h-5 text-primary"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d={svgPath[feature.icon]}
-                ></path>
-              </svg>
+              <Icon icon={feature.icon} size={5} color="primary" isListMarker={false} />
             </div>
             <span class="font-bold text-content-active">{feature.title}</span>
           </div>
@@ -99,7 +79,7 @@ const visibleFeatures = features.slice(0, 4)
         class="relative inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors whitespace-nowrap focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
       >
         Let's talk
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
+        <Icon icon="exit-right-thin" size={4} classes="mb-1" />
       </a>
     </div>
   </div>

src/components/Icon/icons/exit-right-thin.astro

@@ -0,0 +1,30 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+}
+
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>exit right thin icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M17 8l4 4m0 0l-4 4m4-4H3"
+  />
+</svg>

src/components/Icon/index.astro

@@ -28,8 +28,11 @@ export type Props = {
 }
 
 const { icon, color = 'inherit', inverseColor, size = 14, classes, accessible = false, focusable = false, isListMarker = true }: Props = Astro.props
+const resolvedIcon = typeof icon === 'string' ? icon.trim() : ''
 
-const IconComponent = getIconComponent(icon) as unknown as (_props: {
+const IconComponent = resolvedIcon
+  ? getIconComponent(resolvedIcon)
+  : null as unknown as (_props: {
   color?: string
   inverseColor?: string
   size?: number
@@ -50,4 +53,4 @@ const markerProps = {
 }
 ---
 
-<IconComponent {...markerProps} />
+{IconComponent && <IconComponent {...markerProps} />}

src/components/Icon/server/__tests__/index.spec.ts

@@ -19,7 +19,7 @@ describe('getIconComponent', () => {
 
   it('throws a descriptive error when icon is missing', () => {
     expect(() => getIconComponent(undefined, {})).toThrowError(
-      'PlainIconList: missing icon value for list item. Expected an icon name that maps to src/components/List/markers/<icon>.astro'
+      'Icon: missing icon value. Expected an icon name that maps to src/components/Icon/icons/<icon>.astro'
     )
   })
 
@@ -30,7 +30,7 @@ describe('getIconComponent', () => {
     }
 
     expect(() => getIconComponent('download', markerComponents)).toThrowError(
-      'PlainIconList: marker file "download.astro" was not found in src/components/List/icons/. Requested icon path: "../icons/download.astro". Available markers: avatar.astro, company.astro'
+      'Icon: icon file "download.astro" was not found in src/components/Icon/icons/. Requested icon path: "../icons/download.astro". Available icons: avatar.astro, company.astro'
     )
   })
 })

src/components/Icon/server/index.ts

@@ -18,16 +18,16 @@ const formatAvailableIcons = (markerComponents: IconComponentMap): string => {
 }
 
 /**
- * Resolve marker component by icon name.
- * Throws a descriptive error when icon is missing or marker file is not found.
+ * Resolve icon component by icon name.
+ * Throws a descriptive error when icon is missing or icon file is not found.
  */
 export const getIconComponent = (
   icon?: string,
   markerComponents: IconComponentMap = defaultIconComponents
 ): AstroComponentFactory => {
   if (!icon) {
     throw new Error(
-      'PlainIconList: missing icon value for list item. Expected an icon name that maps to src/components/List/markers/<icon>.astro'
+      'Icon: missing icon value. Expected an icon name that maps to src/components/Icon/icons/<icon>.astro'
     )
   }
 
@@ -39,8 +39,8 @@ export const getIconComponent = (
     const availableIcons = formatAvailableIcons(markerComponents)
 
     throw new Error(
-      `PlainIconList: marker file "${iconFileName}" was not found in src/components/List/icons/. ` +
-      `Requested icon path: "${iconPath}". Available markers: ${availableIcons || '(none)'}`
+      `Icon: icon file "${iconFileName}" was not found in src/components/Icon/icons/. ` +
+      `Requested icon path: "${iconPath}". Available icons: ${availableIcons || '(none)'}`
     )
   }
 

src/components/List/index.astro

@@ -59,6 +59,9 @@ const itemsWithIconAndColor = items as Array<{
   inverseColor?: string
   bgColor?: string
 }>
+const plainIconItems = items.filter((item): item is Props['items'][number] & { icon: string } => {
+  return typeof item.icon === 'string' && item.icon.trim().length > 0
+})
 ---
 
 {variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} {...classesProps} />}
@@ -69,7 +72,7 @@ const itemsWithIconAndColor = items as Array<{
 {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...sizeProps} />}
 {variant === 'download-page-list' && <DownloadPageList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
 {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} {...classesProps} />}
-{variant === 'plain-icon-list' && <PlainIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
+{variant === 'plain-icon-list' && <PlainIconList items={plainIconItems} {...classesProps} {...sizeProps} />}
 {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} />}
 {variant === 'timeline-list' && <TimelineList items={items} {...classesProps} />}
 {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} />}

src/components/List/layouts/PlainIconList.astro

@@ -5,7 +5,7 @@ export type Props = {
   items: {
     text: string
     icon: string
-    color: string
+    color?: string
   }[]
   classes?: {
     ul?: string
@@ -25,11 +25,15 @@ const markerClasses = props.classes?.svg
 
 <ul class:list={ulClass}>
   {
-    props.items.map(({ text, icon, color }: PlainIconListItem) => (
+    props.items.map(({ text, icon, color }: PlainIconListItem) => {
+      const resolvedColor = color?.trim() ? color : 'currentColor'
+
+      return (
       <li class:list={liClass}>
-        <Icon icon={icon} color={color} size={props.size ?? 5} {...(markerClasses ? { classes: markerClasses } : {})} />
+        <Icon icon={icon} color={resolvedColor} size={props.size ?? 5} {...(markerClasses ? { classes: markerClasses } : {})} />
         <span>{text}</span>
       </li>
-    ))
+      )
+    })
   }
 </ul>

src/pages/index.astro

@@ -89,7 +89,7 @@ const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:p
         {
           title: "CI/CD & Cloud Migration",
           description: "Lift-and-shift or re-architect—either way, your pipelines will be rock solid.",
-          icon: "lightning-bolt",
+          icon: "lightning",
         },
         {
           title: "Observability Plug-ins",