ui-icons: add supports for colors and arias

OpenRailAssociation · Jan 17, 2024 · ae9314e · ae9314e
1 parent dc1ddfc
commit ae9314e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -6,21 +6,27 @@ 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.`)
   }
   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 }}
     />
   )
 }