Refactor titles in icon files, remove unused title prop

Author: webstackdev

src/components/Carousel/index.astro

@@ -4,7 +4,7 @@
  */
 import { Picture } from 'astro:assets'
 import { getCollection } from 'astro:content'
-
+import Icon from '@components/Icon/index.astro'
 import {
   type CarouselNavigationMode,
   type CarouselVariant,
@@ -174,21 +174,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
             aria-label="Previous slide"
             data-carousel-prev
           >
-            <svg
-              class="w-6 h-6"
-              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="M15 19l-7-7 7-7"
-              />
-            </svg>
+            <Icon icon="arrow-left" size={6} color="currentColor" />
           </button>
 
           <button
@@ -207,21 +193,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
             aria-label="Next slide"
             data-carousel-next
           >
-            <svg
-              class="w-6 h-6"
-              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"
-              />
-            </svg>
+            <Icon icon="arrow-right" size={6} color="currentColor" />
           </button>
 
           {/* Dots Navigation */}

src/components/Icon/icons/arrow-left.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>arrow-left icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M15 19l-7-7 7-7"
+  />
+</svg>

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

@@ -14,12 +14,17 @@ const { color, classes, size, accessible, focusable, isListMarker } = Astro.prop
 <svg
   xmlns="http://www.w3.org/2000/svg"
   class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
-  fill="currentColor"
+  fill="none"
   stroke="currentColor"
   viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
   {accessible && <title>arrow-right icon</title>}
-  <path d="M 13.05823,22.36681 C 12.417581,22.095911 11.999981,21.457811 11.999981,20.74996 V 16.500009 H 1.4999977 C 0.67157895,16.500009 0,15.828458 0,15.000007 V 9.0000053 C 0,8.171585 0.67156395,7.5000048 1.4999977,7.5000048 H 11.999981 V 3.2500532 c 0,-0.7078052 0.4176,-1.3459205 1.058249,-1.6167906 0.640649,-0.2708701 1.377897,-0.12114 1.868247,0.3793502 l 8.571436,8.7498932 c 0.669449,0.68355 0.669449,1.79145 0,2.475001 l -8.571436,8.749954 c -0.49035,0.500399 -1.227598,0.6501 -1.868247,0.379349 z" />
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 5l7 7-7 7"
+  />
 </svg>

src/components/Icon/icons/chart.astro

@@ -6,10 +6,9 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
 ---
 
 <svg
@@ -21,7 +20,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>chart icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"

src/components/Icon/icons/check-circled.astro

@@ -13,18 +13,14 @@ const { color, classes, size, accessible, focusable, isListMarker } = Astro.prop
 
 <svg
   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" : ""]}
-  fill="none"
+  fill="currentColor"
   stroke="currentColor"
-  viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {accessible && <title>User Avatar Icon</title>}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-  ></path>
+  {accessible && <title>check mark circled icon</title>}
+  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
+  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
 </svg>

src/components/Icon/icons/check-stylized.astro

@@ -6,10 +6,9 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
 ---
 
 <svg
@@ -21,7 +20,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>stylized check mark icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"

src/components/Icon/icons/check.astro

@@ -13,14 +13,18 @@ const { color, classes, size, accessible, focusable, isListMarker } = Astro.prop
 
 <svg
   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" : ""]}
-  fill="currentColor"
+  fill="none"
   stroke="currentColor"
+  viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
   {accessible && <title>check mark icon</title>}
-  <path fill="none" d="M9.999 13.587L7.7 11.292l-1.412 1.416 3.713 3.705 7.206-7.206-1.414-1.414z"/>
-  <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.999 14.413l-3.713-3.705L7.7 11.292l2.299 2.295 5.794-5.794 1.414 1.414-7.206 7.206z" />
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M5 13l4 4L19 7"
+  ></path>
 </svg>

src/components/Icon/icons/clipboard-checked.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>checked clipboard icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="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 2m-6 9l2 2 4-4"
+  ></path>
+</svg>

src/components/Icon/icons/clipboard.astro

@@ -6,10 +6,9 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
 ---
 
 <svg
@@ -21,11 +20,11 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>clipboard icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="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 2m-6 9l2 2 4-4"
+    d="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"
   ></path>
 </svg>

src/components/Icon/icons/document.astro

@@ -6,10 +6,9 @@ export type Props = {
   accessible: boolean
   focusable: boolean
   isListMarker?: boolean
-  title?: string
 }
 
-const { color, classes, size, accessible, focusable, isListMarker, title } = Astro.props
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
 ---
 
 <svg
@@ -21,7 +20,7 @@ const { color, classes, size, accessible, focusable, isListMarker, title } = Ast
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {title && <title>{title}</title>}
+  {accessible && <title>document icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"