fix(icons): fix experimental icons (#501)

* fix(icons): fix experimental icon colors

* docs(icons): add a story for experimental icons

---------

Co-authored-by: Lena Rashkovan <[email protected]>

Author: Elena Rashkovan

assets/icons/experimental/account-outline.svg

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import * as Icons from '../experimental';
+import { getSemanticValue } from '../../essentials/experimental';
+
+const meta: Meta = {
+    title: 'Experimental/Icons',
+    component: ({ name, ...props }) => {
+        const Component = Icons[name];
+
+        return Component ? <Component {...props} /> : null;
+    }
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+    name: 'Icons',
+    args: {
+        name: Object.keys(Icons)[0],
+        color: getSemanticValue('accent'),
+        size: 40
+    },
+    argTypes: {
+        name: {
+            description: 'Name of the icon\n\n**Example Only!**',
+            control: 'select',
+            options: Object.keys(Icons)
+        },
+        color: {
+            control: 'color'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large', 40]
+        }
+    }
+};

assets/icons/experimental/car-group-outline.svg

@@ -19,7 +19,7 @@ const AccountOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit
         >
             <path
                 d="M10 3.333A3.333 3.333 0 1110 10a3.333 3.333 0 010-6.667zM10 5a1.667 1.667 0 100 3.333A1.667 1.667 0 0010 5zm0 5.833c2.225 0 6.667 1.109 6.667 3.334v2.5H3.333v-2.5c0-2.225 4.442-3.334 6.667-3.334zm0 1.584c-2.475 0-5.083 1.216-5.083 1.75v.916h10.166v-.916c0-.534-2.608-1.75-5.083-1.75z"
-                fill="#fff"
+                fill="currentColor"
             />
         </svg>
     );

assets/icons/experimental/car-outline.svg

@@ -21,7 +21,7 @@ const CarGroupOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inheri
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M20.025 4c-.2-.6-.8-1-1.4-1h-11c-.7 0-1.2.4-1.4 1l-.35 1h12.35l1.1 3 .8 2v9h1c.5 0 1-.5 1-1v-8l-2.1-6zm-4.4 2c.6 0 1.2.4 1.4 1l2.1 6v8c0 .5-.5 1-1 1h-1c-.5 0-1-.5-1-1v-1h-12v1c0 .5-.4 1-1 1h-1c-.5 0-1-.5-1-1v-8l2.1-6c.2-.6.7-1 1.4-1h11zm-.4 2h-10.3l-1 3h12.4l-1.1-3zm-12.1 10h14v-5h-14v5zm4-2.5c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5.7 1.5 1.5 1.5 1.5-.7 1.5-1.5zm9 0c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5.7 1.5 1.5 1.5 1.5-.7 1.5-1.5z"
-                fill="#000"
+                fill="currentColor"
             />
         </svg>
     );

assets/icons/experimental/location.svg

@@ -19,7 +19,7 @@ const CarOutlineIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit', .
         >
             <path
                 d="M15.75 5a1.253 1.253 0 00-1.167-.833H5.417c-.584 0-1 .333-1.167.833L2.5 10v6.667c0 .416.417.833.833.833h.834c.5 0 .833-.417.833-.833v-.834h10v.834c0 .416.417.833.833.833h.834c.416 0 .833-.417.833-.833V10l-1.75-5zm-10.083.833h8.583l.917 2.5H4.833l.834-2.5zm10.166 8.334H4.167V10h11.666v4.167zM6.25 10.833c.667 0 1.25.584 1.25 1.25 0 .667-.583 1.25-1.25 1.25S5 12.75 5 12.083c0-.666.583-1.25 1.25-1.25zm7.5 0c.667 0 1.25.584 1.25 1.25 0 .667-.583 1.25-1.25 1.25s-1.25-.583-1.25-1.25c0-.666.583-1.25 1.25-1.25z"
-                fill="#FCFCFC"
+                fill="currentColor"
             />
         </svg>
     );

src/icons/docs/Experimental.stories.tsx

@@ -19,7 +19,7 @@ const LocationIcon: React.FC<Props> = ({ size = 'medium', color = 'inherit', ...
         >
             <path
                 d="M10 10c.458 0 .85-.163 1.177-.49.326-.326.49-.718.49-1.177 0-.458-.164-.85-.49-1.177A1.605 1.605 0 0010 6.666c-.458 0-.85.164-1.177.49-.327.327-.49.719-.49 1.177 0 .459.163.851.49 1.177.326.327.719.49 1.177.49zm0 6.125c1.694-1.556 2.951-2.969 3.77-4.24C14.59 10.615 15 9.486 15 8.5c0-1.514-.483-2.753-1.448-3.719-.965-.965-2.15-1.448-3.552-1.448-1.403 0-2.587.483-3.552 1.448C5.483 5.747 5 6.986 5 8.5c0 .986.41 2.115 1.23 3.385.819 1.271 2.075 2.684 3.77 4.24zm0 2.208c-2.236-1.902-3.906-3.67-5.01-5.302C3.884 11.4 3.332 9.89 3.332 8.5c0-2.083.67-3.743 2.01-4.98C6.685 2.286 8.237 1.668 10 1.668c1.764 0 3.316.618 4.656 1.854 1.34 1.236 2.01 2.896 2.01 4.979 0 1.389-.552 2.9-1.656 4.531-1.104 1.632-2.774 3.4-5.01 5.302z"
-                fill="#FCFCFC"
+                fill="currentColor"
             />
         </svg>
     );