Add 'id' prop to Icon component and layouts

Author: webstackdev

src/components/CallToAction/Newsletter/layouts/page.astro

@@ -8,6 +8,7 @@
 
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
+import Icon from '@components/Icon/index.astro'
 import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types'
 
 export type Props = Omit<NewsletterProps, 'variant'>
@@ -68,44 +69,18 @@ const {
           class="relative w-full px-6 py-3 bg-content text-page-base font-bold rounded-lg text-sm transition-all transform hover:-translate-y-0.5 hover:shadow-lg flex items-center justify-center gap-2 hover:bg-primary disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 focus-visible:outline-none after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent focus-visible:after:-inset-1 focus-visible:after:border-spotlight"
         >
           <span id="button-text">{buttonText}</span>
-          <svg
+          <Icon
+            icon="exit-right-thin"
+            size={4}
+            classes="transition-transform"
             id="button-arrow"
-            class="w-4 h-4 transition-transform"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 8l4 4m0 0l-4 4m4-4H3"
-            ></path>
-          </svg>
-          <svg
+          />
+          <Icon
+            icon="spinner"
+            size={4}
+            classes="hidden animate-spin"
             id="button-spinner"
-            class="hidden w-4 h-4 animate-spin"
-            fill="none"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            ></circle>
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
+          />
         </button>
       </Confetti>
 

src/components/Icon/icons/alarm-clock.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="currentColor"

src/components/Icon/icons/apple.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}

src/components/Icon/icons/arrow-down.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}

src/components/Icon/icons/arrow-left.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"

src/components/Icon/icons/arrow-right.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"

src/components/Icon/icons/avatar.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"

src/components/Icon/icons/award.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}

src/components/Icon/icons/bluesky.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}

src/components/Icon/icons/book.astro

@@ -6,12 +6,14 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
+  id?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
 ---
 
 <svg
+  id={id}
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
   fill="none"