feat(icons): introduce title props on icons for additional info on hover

MTES-MCT · Mar 25, 2024 · 5849aa1 · 5849aa1
1 parent 4e903a3
commit 5849aa1
Show file tree

Hide file tree

Showing 89 changed files with 176 additions and 173 deletions.
diff --git a/scripts/icons/generateIcons.js b/scripts/icons/generateIcons.js
@@ -14,6 +14,7 @@ async function generateIcon({ count, index, svgIconPath, template }) {
     .replace(/ data-name="[^"]*"/g, '')
     .replace(/ id="[^"]*"/g, '')
   const svgIconSourceWithProps = svgIconSourceWithoutExtraneousProps.replace(/>/, ` {...nativeProps}>`)
+
   const tsxIconSource = template
     .replace(/\/\*ICON_NAME\*\//g, iconName)
     .replace(/\/\*ICON_SVG_SOURCE\*\//g, svgIconSourceWithProps)

diff --git a/scripts/icons/iconTemplate.tsxt b/scripts/icons/iconTemplate.tsxt
@@ -2,8 +2,8 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export const /*ICON_NAME*/ = ({ color, size, ...nativeProps}: IconProps) => (
-  <IconBox $size={size} $color={color}>
+export const /*ICON_NAME*/ = ({ color, size, title, ...nativeProps}: IconProps) => (
+  <IconBox $size={size} $color={color} title={title}>
     /*ICON_SVG_SOURCE*/
   </IconBox>
 )
diff --git a/src/icons/ActivityFeed.tsx b/src/icons/ActivityFeed.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function ActivityFeed({ color, size, ...nativeProps }: IconProps) {
+export function ActivityFeed({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(40 -41)">
           <g>

diff --git a/src/icons/Alert.tsx b/src/icons/Alert.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Alert({ color, size, ...nativeProps }: IconProps) {
+export function Alert({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <rect fill="none" height="20" width="20" />
         <path

diff --git a/src/icons/Anchor.tsx b/src/icons/Anchor.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Anchor({ color, size, ...nativeProps }: IconProps) {
+export function Anchor({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <rect fill="none" height="20" width="20" />
         <path

diff --git a/src/icons/Archive.tsx b/src/icons/Archive.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Archive({ color, size, ...nativeProps }: IconProps) {
+export function Archive({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <path
           d="M138,2H122V8h1V18h14V8h1ZM124,4h12V6H124Zm11,12H125V8h10Z"

diff --git a/src/icons/Attention.tsx b/src/icons/Attention.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Attention({ color, size, ...nativeProps }: IconProps) {
+export function Attention({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(200 -82)">
           <g fill="none" strokeMiterlimit="10">

diff --git a/src/icons/Calendar.tsx b/src/icons/Calendar.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Calendar({ color, size, ...nativeProps }: IconProps) {
+export function Calendar({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(280 -41)">
           <g>

diff --git a/src/icons/Car.tsx b/src/icons/Car.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Car({ color, size, ...nativeProps }: IconProps) {
+export function Car({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-200 -164)">
           <path

diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Check({ color, size, ...nativeProps }: IconProps) {
+export function Check({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(40 -82)">
           <g fill="none" strokeMiterlimit="10">

diff --git a/src/icons/Chevron.tsx b/src/icons/Chevron.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Chevron({ color, size, ...nativeProps }: IconProps) {
+export function Chevron({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(0 -82)">
           <g fill="none" strokeMiterlimit="10">

diff --git a/src/icons/Clock.tsx b/src/icons/Clock.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Clock({ color, size, ...nativeProps }: IconProps) {
+export function Clock({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(240 -41)">
           <g>

diff --git a/src/icons/Close.tsx b/src/icons/Close.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Close({ color, size, ...nativeProps }: IconProps) {
+export function Close({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(160 -82)">
           <g fill="none" strokeMiterlimit="10">

diff --git a/src/icons/Comment.tsx b/src/icons/Comment.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Comment({ color, size, ...nativeProps }: IconProps) {
+export function Comment({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <clipPath>
           <path d="m0 0h20v20h-20z" />

diff --git a/src/icons/Confirm.tsx b/src/icons/Confirm.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Confirm({ color, size, ...nativeProps }: IconProps) {
+export function Confirm({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-40)">
           <path d="M50,1a9,9,0,1,0,9,9A9,9,0,0,0,50,1Zm0,16a7,7,0,1,1,7-7A7,7,0,0,1,50,17Z" fill="currentColor" />

diff --git a/src/icons/ControlUnit.tsx b/src/icons/ControlUnit.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function ControlUnit({ color, size, ...nativeProps }: IconProps) {
+export function ControlUnit({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(80 205)">
           <g>

diff --git a/src/icons/ControlUnitFilled.tsx b/src/icons/ControlUnitFilled.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function ControlUnitFilled({ color, size, ...nativeProps }: IconProps) {
+export function ControlUnitFilled({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="18.25" viewBox="0 0 14 18.25" width="14" {...nativeProps}>
         <g transform="translate(77 204.25)">
           <rect fill="currentColor" height="12" transform="translate(-64 -188) rotate(90)" width="2" />

diff --git a/src/icons/Delete.tsx b/src/icons/Delete.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Delete({ color, size, ...nativeProps }: IconProps) {
+export function Delete({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-23.798 -14.096)">
           <g>

diff --git a/src/icons/Display.tsx b/src/icons/Display.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Display({ color, size, ...nativeProps }: IconProps) {
+export function Display({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(0 -40)">
           <g>

diff --git a/src/icons/Dot.tsx b/src/icons/Dot.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Dot({ color, size, ...nativeProps }: IconProps) {
+export function Dot({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g fill="none" transform="translate(1 1)">
           <path d="M9,2a7,7,0,1,0,7,7A7,7,0,0,0,9,2Z" stroke="none" />

diff --git a/src/icons/DotFilled.tsx b/src/icons/DotFilled.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function DotFilled({ color, size, ...nativeProps }: IconProps) {
+export function DotFilled({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(1 1)">
           <path d="M9,2a7,7,0,1,0,7,7A7,7,0,0,0,9,2Z" fill="currentColor" transform="translate(0 0)" />

diff --git a/src/icons/DoubleChevron.tsx b/src/icons/DoubleChevron.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function DoubleChevron({ color, size, ...nativeProps }: IconProps) {
+export function DoubleChevron({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g>
           <g fill="none" strokeMiterlimit="10">

diff --git a/src/icons/Download.tsx b/src/icons/Download.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Download({ color, size, ...nativeProps }: IconProps) {
+export function Download({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-80)">
           <g>

diff --git a/src/icons/Drapeau.tsx b/src/icons/Drapeau.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Drapeau({ color, size, ...nativeProps }: IconProps) {
+export function Drapeau({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <rect fill="#000091" height="12" transform="translate(1 4)" width="6" />
         <rect fill="#e1000f" height="12" transform="translate(13 4)" width="6" />

diff --git a/src/icons/Duplicate.tsx b/src/icons/Duplicate.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Duplicate({ color, size, ...nativeProps }: IconProps) {
+export function Duplicate({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <path d="M6,2V5H3V18H14V15h3V2Zm6,14H5V7h7Zm3-3H14V5H8V4h7Z" fill="currentColor" />
         <rect fill="none" height="20" width="20" />

diff --git a/src/icons/Edit.tsx b/src/icons/Edit.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Edit({ color, size, ...nativeProps }: IconProps) {
+export function Edit({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-80)">
           <path

diff --git a/src/icons/EditUnbordered.tsx b/src/icons/EditUnbordered.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function EditUnbordered({ color, size, ...nativeProps }: IconProps) {
+export function EditUnbordered({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <rect fill="none" height="20" width="20" />
         <g>

diff --git a/src/icons/Expand.tsx b/src/icons/Expand.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Expand({ color, size, ...nativeProps }: IconProps) {
+export function Expand({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20.076" viewBox="0 0 20.068 20.076" width="20.068" {...nativeProps}>
         <path
           d="M12114.779,15768.074v-1.512h5.719l-6.488-6.49,1.061-1.061,6.5,6.482v-5.713h1.5v8.293Zm-10.271-17.5v5.719H12103v-8.3h8.293v1.512h-5.719l6.488,6.49-1.068,1.066Z"

diff --git a/src/icons/Favorite.tsx b/src/icons/Favorite.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Favorite({ color, size, ...nativeProps }: IconProps) {
+export function Favorite({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-300 -208)">
           <path

diff --git a/src/icons/FilledArrow.tsx b/src/icons/FilledArrow.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function FilledArrow({ color, size, ...nativeProps }: IconProps) {
+export function FilledArrow({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(320 -41)">
           <path d="M-313,43V59l8-8Z" fill="currentColor" />

diff --git a/src/icons/Filter.tsx b/src/icons/Filter.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Filter({ color, size, ...nativeProps }: IconProps) {
+export function Filter({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(-930 -294)">
           <path

diff --git a/src/icons/FilterBis.tsx b/src/icons/FilterBis.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function FilterBis({ color, size, ...nativeProps }: IconProps) {
+export function FilterBis({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g>
           <rect fill="none" height="20" width="20" />

diff --git a/src/icons/Fishery.tsx b/src/icons/Fishery.tsx
@@ -2,9 +2,9 @@ import { IconBox } from '../elements/IconBox'
 
 import type { IconProps } from '../types/definitions'
 
-export function Fishery({ color, size, ...nativeProps }: IconProps) {
+export function Fishery({ color, size, title, ...nativeProps }: IconProps) {
   return (
-    <IconBox $color={color} $size={size}>
+    <IconBox $color={color} $size={size} title={title}>
       <svg height="20" viewBox="0 0 20 20" width="20" {...nativeProps}>
         <g transform="translate(80 -41)">
           <g>