From ae9314ede1cd003eeb99f610fe72738ab39d804f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89lys=C3=A6?=
 <101974839+ElysaSrc@users.noreply.github.com>
Date: Wed, 17 Jan 2024 10:45:34 +0100
Subject: [PATCH] ui-icons: add supports for colors and arias

---
 ui-icons/scripts/build.js             | 12 ++++++------
 ui-icons/src/components/_template.tsx | 10 ++++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui-icons/scripts/build.js b/ui-icons/scripts/build.js
index 1510c34e..21c8ccac 100755
--- a/ui-icons/scripts/build.js
+++ b/ui-icons/scripts/build.js
@@ -24,10 +24,10 @@ const extractMetadataFromFilename = (fileName) => {
   const split = fileName.split('.')[0].split("-")
 
   const size = split.slice(-1)[0]
-  
+
   let variant = "base"
   let name = split.slice(0, -1).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('')
-  
+
   // Check if variant is present
   if (variantKeywords.includes(split.slice(-2)[0])) {
     variant = split.slice(-2)[0]
@@ -97,7 +97,7 @@ const representation = svgFiles
     if (!acc[name][variant]) {
       acc[name][variant] = {}
     }
-    acc[name][variant][size] = 
+    acc[name][variant][size] =
       validateSvgAndExtractPath(join(iconsDir, originalFileName), size)
     return acc
   }, {})
@@ -132,7 +132,7 @@ for (const [name, currentData] of Object.entries(representation)) {
 
       return [
         `IconReplaceName${variant}Props`,
-        `interface IconReplaceName${variant}Props {size: ${sizeStr}, variant: '${variant}'}`
+        `interface IconReplaceName${variant}Props {size: ${sizeStr}, variant: '${variant}', title?: string, color?: string}`
       ]
     })
   const iconPropsContent = definitions.map(([name, content]) => `${content}\n`).join('\n')
@@ -148,11 +148,11 @@ for (const [name, currentData] of Object.entries(representation)) {
     .replace(/IconReplaceName/g, name)
 
   writeFileSync(
-    join('.', 'src', 'components', `${name}.tsx`), 
+    join('.', 'src', 'components', `${name}.tsx`),
     file
   )
   appendFileSync(
     indexFile,
     `export { default as ${name} } from './components/${name}'\n`
-  ) 
+  )
 }
diff --git a/ui-icons/src/components/_template.tsx b/ui-icons/src/components/_template.tsx
index ac4991a6..21e9483d 100644
--- a/ui-icons/src/components/_template.tsx
+++ b/ui-icons/src/components/_template.tsx
@@ -6,7 +6,7 @@ const iconData: IconData = {}
 
 //ReplaceWithTypes
 
-const IconReplaceName: React.FC<IconReplaceNameProps> = ({variant, size}) => {
+const IconReplaceName: React.FC<IconReplaceNameProps> = ({ variant, size, title, color = '#00000' }) => {
   const currentSize = sizes[size]
   if (!iconData[variant]) {
     throw new Error(`IconReplaceName: variant ${variant} not found.`)
@@ -14,13 +14,19 @@ const IconReplaceName: React.FC<IconReplaceNameProps> = ({variant, size}) => {
   if (!iconData[variant][currentSize]) {
     throw new Error(`IconReplaceName: size ${currentSize} not found for variant ${variant}.`)
   }
+  let data = iconData[variant][currentSize]
+  if (title) {
+    data = `<title>${title}</title>${data}`
+  }
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      {...(title ? {} : { "aria-hidden": true })}
       width={currentSize}
       height={currentSize}
+      fill={color}
       viewBox={`0 0 ${currentSize} ${currentSize}`}
-      dangerouslySetInnerHTML={{ __html: iconData[variant][currentSize] }}
+      dangerouslySetInnerHTML={{ __html: data }}
     />
   )
 }