Update inlined SVGs to use Icon component

Author: webstackdev

.cache/pages.json

@@ -89,7 +89,7 @@
   "consent",
   "contact",
   {
-    "deepDives": [
+    "deep-dive": [
       "alert-fatigue-reduction-triage-actionable-alerts/pdf",
       "api-deprecation-sunset-headers-consumer-migration/pdf",
       "api-gateway-metrics-traces-logs-debugging/pdf",

_TODO.md

@@ -315,3 +315,5 @@ We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-for
 - Color headings blue and use the SVG icon instead of the image. Color if the blue shade.
 
 - Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns.
+
+- Add a Social Share on some compelling text in each article

src/assets/images/site/hamburgerMenu.svg

@@ -1,4 +1,5 @@
 ---
+import Icon from '@components/Icon/index.astro'
 import { generateBreadcrumbs } from '@components/Breadcrumbs/server'
 
 export interface Props {
@@ -42,19 +43,12 @@ const breadcrumbSchema =
           {breadcrumbs.map((item, index) => (
             <li class="flex items-center">
               {index > 0 && (
-                <svg
-                  class="w-4 h-4 mx-2 opacity-60 fill-none stroke-primary-offset"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  focusable="false"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
+                <Icon
+                  icon="arrow-right"
+                  size={4}
+                  color="primary-offset"
+                  classes="mx-2 opacity-60"
+                />
               )}
 
               {item.isCurrentPage ? (

src/assets/images/site/moon.svg

@@ -15,6 +15,7 @@
  * />
  * ```
  */
+import Icon from '@components/Icon/index.astro'
 
 export interface Props {
   /** Optional base id for internal aria relationships */
@@ -91,20 +92,7 @@ const descriptionId = `${id}-description`
           class="inline-flex items-center justify-center p-4 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5 text-center no-underline"
         >
           {primaryLink.text}
-          <svg
-            class="w-5 h-5 ml-2"
-            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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-          </svg>
+          <Icon icon="exit-right-thin" size={5} color="primary" />
         </a>
         {
           secondaryLink && (

src/assets/images/site/sun.svg

@@ -17,6 +17,7 @@ const {
 <div class="container mx-auto px-4 sm:px-6 lg:px-8">
   <div class="relative overflow-hidden bg-page-offset border border-trim rounded-2xl shadow-lg group">
     <div class="absolute inset-0 opacity-5 pointer-events-none">
+      {/** SVG inlined, provides background pattern for component */}
       <svg class="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
@@ -48,14 +49,7 @@ const {
           <div class="absolute left-0 top-0 bottom-0 w-1 bg-white/20"></div>
 
           <div class="text-page-base flex flex-col items-center gap-2">
-            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
-              ></path>
-            </svg>
+            <Icon icon="document" size={10} color="page-base" />
             <span
               class="text-[10px] font-bold uppercase tracking-widest rotate-180 writing-vertical-lr opacity-80 backdrop-blur-sm"
             >
@@ -83,71 +77,19 @@ const {
 
           <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm font-medium text-content-offset">
             <li class="flex items-start gap-2">
-              <svg
-                class="w-5 h-5 text-success shrink-0 mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
+              <Icon icon="check-circled-open" size={5} color="success" classes="mt-0.5" />
               <span>Incident analysis</span>
             </li>
             <li class="flex items-start gap-2">
-              <svg
-                class="w-5 h-5 text-success shrink-0 mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
+              <Icon icon="check-circled-open" size={5} color="success" classes="mt-0.5" />
               <span>Scaling strategies</span>
             </li>
             <li class="flex items-start gap-2">
-              <svg
-                class="w-5 h-5 text-success shrink-0 mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
+              <Icon icon="check-circled-open" size={5} color="success" classes="mt-0.5" />
               <span>Tool evaluations</span>
             </li>
             <li class="flex items-start gap-2">
-              <svg
-                class="w-5 h-5 text-success shrink-0 mt-0.5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
+              <Icon icon="check-circled-open" size={5} color="success" classes="mt-0.5" />
               <span>Architecture reviews</span>
             </li>
           </ul>
@@ -164,20 +106,7 @@ const {
               <span
                 class="relative inline-flex rounded-full h-6 w-6 bg-spotlight items-center justify-center"
               >
-                <svg
-                  class="w-3 h-3 text-page-base"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  ></path>
-                </svg>
+                <Icon icon="plus" size={3} color="page-base" />
               </span>
             </span>
           </div>

src/components/Breadcrumbs/index.astro

@@ -203,17 +203,11 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
                   class="relative inline-flex items-center px-6 py-3 bg-content-active text-content-inverse font-semibold rounded-lg hover:bg-content no-underline hover:no-underline transition-all duration-200 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-0.5 focus-visible:after:border-spotlight"
                 >
                   Read More Articles
-                  <svg
-                    class="ml-2 w-4 h-4"
-                    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="M9 5l7 7-7 7"
-                    ></path>
-                  </svg>
+                  <Icon
+                    icon="arrow-right"
+                    size={4}
+                    classes="ml-2"
+                  />
                 </a>
               </span>
             ) : (

src/components/CallToAction/Contact/index.astro

@@ -10,8 +10,8 @@ const iconBankId = 'code-tabs-icon-bank'
 ---
 
 <div id={iconBankId} hidden aria-hidden="true">
-  <span data-code-tabs-icon="copy"><Icon icon="copy" size={5} color="inherit" isListMarker={false} /></span>
-  <span data-code-tabs-icon="check"><Icon icon="check" size={5} color="inherit" isListMarker={false} /></span>
+  <span data-code-tabs-icon="copy"><Icon icon="copy" size={5} color="inherit" /></span>
+  <span data-code-tabs-icon="check"><Icon icon="check" size={5} color="inherit" /></span>
 </div>
 
 <script>