Adding "thin" icon variants for <Icon /> component

src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 
 import "@/styles/globals.css";
 import "./styles/variables.css";
@@ -51,6 +51,8 @@ import GridExample from "./examples/GridExample";
 import MultiAccordionDemo from "./components/MultiAccordion/MultiAccordionDemo";
 import { styled } from "styled-components";
 
+import { ICON_NAMES, IconSize } from "@/components/Icon/types";
+
 const BackgroundWrapper = styled.div`
   background: ${({ theme }) => theme.global.color.background.default};
   padding: 6rem;
@@ -752,6 +754,40 @@ const App = () => {
         <GridExample />
         <Spacer />
         <MultiAccordionDemo />
+        <Spacer />
+        <Title type='h2'>Icons</Title>
+        <Spacer />
+          {ICON_NAMES.map(name => {
+            return (
+              <Fragment key={name}>
+                <Title type='h3'>{name} : default</Title>
+                <GridContainer
+                  gridTemplateColumns="repeat(5, minmax(0, 1fr))"
+                  columnGap="lg"
+                  rowGap="sm"
+                >
+                  {(["sm", "md", "lg", "xl", "xxl"] satisfies Array<IconSize>).map(size => {
+                    return (
+                      <Icon key={size} name={name} size={size} />
+                    )
+                  })}
+                </GridContainer>
+                <Spacer /><Title type='h3'>{name} : thin</Title>
+                <GridContainer
+                  gridTemplateColumns="repeat(5, minmax(0, 1fr))"
+                  columnGap="lg"
+                  rowGap="sm"
+                >
+                  {(["sm", "md", "lg", "xl", "xxl"] satisfies Array<IconSize>).map(size => {
+                    return (
+                      <Icon key={size} name={name} size={size} weight='thin' />
+                    )
+                  })}
+                </GridContainer>
+                <Spacer />
+              </Fragment>
+            );
+          })}
       </BackgroundWrapper>
     </ClickUIProvider>
   );

src/components/Icon/Icon.stories.tsx

@@ -30,6 +30,11 @@ export default {
       options: ["xs", "sm", "md", "lg", "xl", "xxl"],
       control: { type: "select" },
     },
+    weight: {
+      options: ["default", "thin"],
+      control: { type: "select" },
+      defaultValue: "default",
+    },
     state: {
       options: ["default", "info", "success", "warning", "danger", "neutral"],
       control: { type: "select" },
@@ -41,6 +46,7 @@ export const Playground = {
   args: {
     name: "users",
     size: "md",
+    weight: "default",
     state: "default",
     width: "",
     height: "",

src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { IconName, IconProps, IconSize, IconState, ImageType } from "./types";
+import { IconName, IconProps, IconSize, IconState, IconWeight, ImageType } from "./types";
 import { ICONS_MAP } from "@/components/Icon/IconCommon";
 import Flags, { FlagList, FlagName } from "../icons/Flags";
 import { Logo } from "../Logos/Logo";
@@ -13,6 +13,7 @@ const SVGIcon = ({
   width,
   height,
   state,
+  weight,
   className,
   size,
   ...props
@@ -29,6 +30,7 @@ const SVGIcon = ({
       $width={width}
       $height={height}
       $size={size}
+      $weight={weight}
       className={className}
       state={state}
     >
@@ -42,20 +44,49 @@ const SvgWrapper = styled.div<{
   $width?: number | string;
   $height?: number | string;
   $size?: IconSize;
+  $weight?: IconWeight;
   state?: IconState;
 }>`
   display: flex;
   align-items: center;
 
-  ${({ theme, $color = "currentColor", $width, $height, $size }) => `
-    & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] {
+  ${({ theme, $color = "currentColor", $width, $height, $size, $weight = "default" }) => `
+    & svg[stroke]:not([stroke="none"]),
+    & g[stroke]:not([stroke="none"]),
+    & path[stroke]:not([stroke="none"]),
+    & rect[stroke]:not([stroke="none"]),
+    & circle[stroke]:not([stroke="none"]),
+    & ellipse[stroke]:not([stroke="none"]),
+    & line[stroke]:not([stroke="none"]),
+    & polyline[stroke]:not([stroke="none"]),
+    & polygon[stroke]:not([stroke="none"]) {
       stroke: ${$color};
     }
 
-    & path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] {
+    & svg[fill]:not([fill="none"]),
+    & g[fill]:not([fill="none"]),
+    & path[fill]:not([fill="none"]),
+    & rect[fill]:not([fill="none"]),
+    & circle[fill]:not([fill="none"]),
+    & ellipse[fill]:not([fill="none"]),
+    & line[fill]:not([fill="none"]),
+    & polyline[fill]:not([fill="none"]),
+    & polygon[fill]:not([fill="none"]) {
       fill: ${$color};
     }
 
+    & svg[stroke-width="1.5"],
+    & g[stroke-width="1.5"],
+    & path[stroke-width="1.5"],
+    & rect[stroke-width="1.5"],
+    & circle[stroke-width="1.5"],
+    & ellipse[stroke-width="1.5"],
+    & line[stroke-width="1.5"],
+    & polyline[stroke-width="1.5"],
+    & polygon[stroke-width="1.5"] {
+      stroke-width: ${theme.click.image.borderWidth[$weight]}
+    }
+
     & svg {
       width: ${$width || theme.click.image[$size || "md"].size.width || "24px"};
       height: ${$height || theme.click.image[$size || "md"].size.height || "24px"};

src/components/Icon/types.ts

@@ -6,6 +6,7 @@ import { PaymentName, PaymentProps } from "../icons/Payments";
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type IconState = "default" | "success" | "warning" | "danger" | "info";
+export type IconWeight = "default" | "thin"
 
 export const ICON_NAMES = [
   "activity",
@@ -165,6 +166,7 @@ export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
   color?: string;
   size?: IconSize;
   state?: IconState;
+  weight?: IconWeight;
 }
 
 type NoThemeType = {
@@ -175,12 +177,16 @@ type NoColorType = {
   color?: never;
 };
 
+type NoWeightType = {
+  weight?: never;
+};
+
 export type ImageName = IconName | LogoName | FlagName | PaymentName;
 export type ImageType = (
   | (Omit<IconProps, "name"> & NoThemeType)
-  | (Omit<LogoProps, "name"> & NoColorType)
-  | (Omit<FlagProps, "name"> & NoThemeType & NoColorType)
-  | (Omit<PaymentProps, "name"> & NoThemeType & NoColorType)
+  | (Omit<LogoProps, "name"> & NoColorType & NoWeightType)
+  | (Omit<FlagProps, "name"> & NoThemeType & NoColorType & NoWeightType)
+  | (Omit<PaymentProps, "name"> & NoThemeType & NoColorType & NoWeightType)
 ) & {
   name: ImageName;
 };

src/components/icons/Beta.tsx

@@ -10,8 +10,11 @@ const Beta = (props: SVGAttributes<SVGElement>) => (
     {...props}
   >
     <path
-      d="M11.0284 10.5909H12.4489C13.4432 10.5909 14.2528 10.8016 14.8778 11.223C15.5076 11.6444 15.9692 12.1795 16.2628 12.8281C16.5611 13.4768 16.7102 14.142 16.7102 14.8239C16.7102 15.6477 16.5185 16.3911 16.1349 17.054C15.7514 17.7121 15.2235 18.2353 14.5511 18.6236C13.8788 19.0071 13.1117 19.1989 12.25 19.1989C11.7244 19.1989 11.2036 19.1018 10.6875 18.9077C10.1761 18.7088 9.72159 18.3324 9.32386 17.7784L9.21023 17.8352V15.0511C9.21023 15.5152 9.32386 15.9437 9.55114 16.3366C9.78314 16.7296 10.1098 17.0445 10.5312 17.2812C10.9574 17.518 11.464 17.6364 12.0511 17.6364C12.6667 17.6364 13.197 17.5062 13.642 17.2457C14.0871 16.9853 14.4304 16.642 14.6719 16.2159C14.9134 15.7898 15.0341 15.3258 15.0341 14.8239C15.0341 14.3504 14.9252 13.9029 14.7074 13.4815C14.4943 13.0554 14.1913 12.7098 13.7983 12.4446C13.41 12.1747 12.9508 12.0398 12.4205 12.0398H11.0284V10.5909ZM11.8523 4.25568C12.5294 4.25568 13.1283 4.36458 13.6491 4.58239C14.1747 4.80019 14.6174 5.09375 14.9773 5.46307C15.3419 5.82765 15.6165 6.23722 15.8011 6.69176C15.9905 7.14631 16.0852 7.61269 16.0852 8.09091C16.0852 8.6875 15.9337 9.28172 15.6307 9.87358C15.3277 10.4607 14.8636 10.9508 14.2386 11.3438C13.6136 11.732 12.8182 11.9261 11.8523 11.9261H11.0284V10.4773H11.8239C12.3731 10.4773 12.8419 10.3636 13.2301 10.1364C13.6231 9.90909 13.9214 9.61316 14.125 9.24858C14.3333 8.884 14.4375 8.49811 14.4375 8.09091C14.4375 7.4375 14.1866 6.89536 13.6847 6.46449C13.1875 6.03362 12.5767 5.81818 11.8523 5.81818C11.3693 5.81818 10.9266 5.91761 10.5241 6.11648C10.1264 6.31534 9.80682 6.59233 9.56534 6.94744C9.3286 7.30256 9.21023 7.71212 9.21023 8.17614V23.0909H7.53409V8.17614C7.53409 7.42803 7.71875 6.75805 8.08807 6.16619C8.46212 5.57434 8.97348 5.10795 9.62216 4.76705C10.2756 4.42614 11.0189 4.25568 11.8523 4.25568Z"
-      fill="white"
+      fill="none"
+      stroke="#FFF"
+      strokeLinecap="square"
+      strokeWidth="1.5"
+      d="M7.8 21.05V6.7c.52-4.1 6.92-3.9 6.92 0 0 3.23-2.96 3.23-4.17 3.23 1.07 0 2.91-.08 4 1.27.4.51.81 1.28.81 2.23.01 1.36-.39 2.14-1.08 2.77-.63.57-1.5.89-2.57.95-1.92-.1-3.405-1.323-3.794-3.72"
     />
   </svg>
 );

src/components/icons/ChartArea.tsx

@@ -9,14 +9,11 @@ const ChartArea = (props: SVGAttributes<SVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path
-      d="M21.5 19.75C21.5 19.9489 21.421 20.1397 21.2803 20.2803C21.1397 20.421 20.9489 20.5 20.75 20.5H2.75C2.55109 20.5 2.36032 20.421 2.21967 20.2803C2.07902 20.1397 2 19.9489 2 19.75V4.75C2 4.55109 2.07902 4.36032 2.21967 4.21967C2.36032 4.07902 2.55109 4 2.75 4C2.94891 4 3.13968 4.07902 3.28033 4.21967C3.42098 4.36032 3.5 4.55109 3.5 4.75V13.5972L8.25594 9.4375C8.38536 9.32421 8.54978 9.25885 8.72165 9.25236C8.89353 9.24587 9.06241 9.29866 9.2 9.40188L14.7134 13.5372L20.2559 8.6875C20.3286 8.61556 20.4152 8.55925 20.5105 8.52201C20.6057 8.48478 20.7075 8.46741 20.8097 8.47097C20.9119 8.47454 21.0123 8.49896 21.1047 8.54275C21.1971 8.58653 21.2796 8.64875 21.3471 8.72557C21.4146 8.8024 21.4656 8.89222 21.4971 8.9895C21.5286 9.08678 21.5399 9.18948 21.5302 9.29128C21.5206 9.39307 21.4902 9.49182 21.441 9.58146C21.3918 9.67109 21.3248 9.74972 21.2441 9.8125L15.2441 15.0625C15.1146 15.1758 14.9502 15.2412 14.7783 15.2476C14.6065 15.2541 14.4376 15.2013 14.3 15.0981L8.78656 10.9647L3.5 15.5903V19H20.75C20.9489 19 21.1397 19.079 21.2803 19.2197C21.421 19.3603 21.5 19.5511 21.5 19.75Z"
-      fill="white"
-    />
-    <path
-      d="M8.75 6.75L8.9319 6.02239L8.78057 5.98456L8.6267 6.0102L8.75 6.75ZM14.75 8.25L14.5681 8.97761L14.8373 9.0449L15.0854 8.92082L14.75 8.25ZM21.0854 5.92082C21.4559 5.73558 21.6061 5.28507 21.4208 4.91459C21.2356 4.54411 20.7851 4.39394 20.4146 4.57918L21.0854 5.92082ZM2.8733 8.4898L8.8733 7.4898L8.6267 6.0102L2.6267 7.0102L2.8733 8.4898ZM8.5681 7.47761L14.5681 8.97761L14.9319 7.52239L8.9319 6.02239L8.5681 7.47761ZM15.0854 8.92082L21.0854 5.92082L20.4146 4.57918L14.4146 7.57918L15.0854 8.92082Z"
-      fill="white"
-    />
+    <g fill="none" fillRule="evenodd" stroke="#FFF" strokeLinecap="round" strokeWidth="1.5">
+      <path strokeLinejoin="round" d="M3.02 5v14.98h18.06"/>
+      <path strokeLinejoin="round" d="m21.07 9.47-6.03 5.27-6-4.51L3 15.52"/>
+      <path d="M3.02 8.01 9.04 7l6 1.5 6-3"/>
+    </g>
   </svg>
 );
 

src/components/icons/ChartBarHorizontal.tsx

@@ -9,10 +9,10 @@ const ChartBarHorizontal = (props: SVGAttributes<SVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path
-      d="M20.25 9H16.5V5.25C16.5 5.05109 16.421 4.86032 16.2803 4.71967C16.1397 4.57902 15.9489 4.5 15.75 4.5H4.5V3.75C4.5 3.55109 4.42098 3.36032 4.28033 3.21967C4.13968 3.07902 3.94891 3 3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V20.25C3 20.4489 3.07902 20.6397 3.21967 20.7803C3.36032 20.921 3.55109 21 3.75 21C3.94891 21 4.13968 20.921 4.28033 20.7803C4.42098 20.6397 4.5 20.4489 4.5 20.25V19.5H12.75C12.9489 19.5 13.1397 19.421 13.2803 19.2803C13.421 19.1397 13.5 18.9489 13.5 18.75V15H20.25C20.4489 15 20.6397 14.921 20.7803 14.7803C20.921 14.6397 21 14.4489 21 14.25V9.75C21 9.55109 20.921 9.36032 20.7803 9.21967C20.6397 9.07902 20.4489 9 20.25 9ZM15 6V9H4.5V6H15ZM12 18H4.5V15H12V18ZM19.5 13.5H4.5V10.5H19.5V13.5Z"
-      fill="white"
-    />
+    <g fill="none" fillRule="evenodd" stroke="#FFF" strokeLinecap="round" strokeWidth="1.5">
+      <path d="M3.5 20.51V4"/>
+      <path strokeLinejoin="round" d="M3.5 5.5h12v3.8m-12 .7H20v4.5H3.5m0 4.5h9v-3.73"/>
+    </g>
   </svg>
 );
 

src/components/icons/ChartDonut.tsx

@@ -9,10 +9,14 @@ const ChartDonut = (props: SVGAttributes<SVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path
-      d="M12.0003 2.25C11.8014 2.25 11.6106 2.32902 11.47 2.46967C11.3293 2.61032 11.2503 2.80109 11.2503 3V8.25C11.2503 8.44891 11.3293 8.63968 11.47 8.78033C11.6106 8.92098 11.8014 9 12.0003 9C12.6607 9.00015 13.3025 9.21819 13.8264 9.6203C14.3502 10.0224 14.7267 10.5861 14.8975 11.224C15.0683 11.8619 15.0239 12.5384 14.7711 13.1484C14.5183 13.7585 14.0713 14.2681 13.4993 14.5982C12.9274 14.9284 12.2625 15.0606 11.6078 14.9743C10.9531 14.888 10.3451 14.5882 9.87818 14.1212C9.41125 13.6542 9.11145 13.0462 9.02527 12.3915C8.93909 11.7368 9.07135 11.0719 9.40154 10.5C9.4508 10.4147 9.48278 10.3205 9.49564 10.2228C9.50849 10.1252 9.50198 10.0259 9.47647 9.93075C9.45097 9.83559 9.40696 9.7464 9.34697 9.66825C9.28698 9.59011 9.21218 9.52454 9.12685 9.47531L4.57998 6.85031C4.49466 6.80105 4.40048 6.76907 4.30281 6.75622C4.20513 6.74336 4.10588 6.74987 4.01073 6.77538C3.91557 6.80089 3.82637 6.84489 3.74823 6.90488C3.67008 6.96487 3.60452 7.03967 3.55529 7.125C2.48216 8.98371 2.05232 11.1446 2.33243 13.2725C2.61254 15.4004 3.58694 17.3764 5.10452 18.8941C6.62211 20.4117 8.59806 21.3863 10.7259 21.6665C12.8538 21.9468 15.0147 21.5171 16.8735 20.4441C18.7323 19.3711 20.1851 17.7147 21.0066 15.7319C21.8281 13.7491 21.9723 11.5506 21.4171 9.47742C20.8618 7.40424 19.6379 5.57222 17.9353 4.26547C16.2327 2.95872 14.1465 2.25028 12.0003 2.25ZM4.50873 8.54062L7.78154 10.4306C7.5953 10.9329 7.50006 11.4643 7.50029 12C7.50029 12.1434 7.50779 12.2812 7.52091 12.4237L3.87029 13.4062C3.5856 11.7571 3.80823 10.0605 4.50873 8.54062ZM4.25841 14.8509L7.91466 13.8722C8.22035 14.5385 8.68389 15.1203 9.26512 15.5671C9.84635 16.0139 10.5278 16.3122 11.2503 16.4363V20.2153C9.69763 20.0714 8.2173 19.4914 6.98016 18.5422C5.74301 17.593 4.79946 16.3134 4.25841 14.8509ZM12.7503 20.2153V16.4363C13.7984 16.2586 14.7498 15.7156 15.4359 14.9035C16.1219 14.0914 16.4983 13.0626 16.4983 11.9995C16.4983 10.9364 16.1219 9.90768 15.4359 9.09557C14.7498 8.28347 13.7984 7.74047 12.7503 7.56281V3.78375C14.7998 3.97101 16.7054 4.91756 18.0929 6.43761C19.4804 7.95767 20.2497 9.94144 20.2497 11.9995C20.2497 14.0576 19.4804 16.0414 18.0929 17.5614C16.7054 19.0815 14.7998 20.0281 12.7503 20.2153Z"
-      fill="white"
-    />
+    <g fill="none" fillRule="evenodd" stroke="#FFF" strokeWidth="1.5">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 8.26c3.54.3 3.76 3.13 3.76 3.9 0 .79-.74 3.57-3.76 3.57-3.02 0-3.75-2.74-3.75-3.73 0-.66.16-1.29.49-1.88l-4.5-2.65A9 9 0 1 0 12 3l.01 5.26Z"
+      />
+      <path d="M12 15.73V21m-8.83-6.63 5.21-1.39"/>
+    </g>
   </svg>
 );
 

src/components/icons/ChartHeatmap.tsx

@@ -9,34 +9,45 @@ const ChartHeatmap = (props: SVGAttributes<SVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <path
-      d="M21.5 19.75C21.5 19.9489 21.421 20.1397 21.2803 20.2803C21.1397 20.421 20.9489 20.5 20.75 20.5H2.75C2.55109 20.5 2.36032 20.421 2.21967 20.2803C2.07902 20.1397 2 19.9489 2 19.75V4.75C2 4.55109 2.07902 4.36032 2.21967 4.21967C2.36032 4.07902 2.55109 4 2.75 4C2.94891 4 3.13968 4.07902 3.28033 4.21967C3.42098 4.36032 3.5 4.55109 3.5 4.75V19H20.75C20.9489 19 21.1397 19.079 21.2803 19.2197C21.421 19.3603 21.5 19.5511 21.5 19.75Z"
-      fill="white"
-    />
-    <circle
-      cx="10.5"
-      cy="11.5"
-      r="2.5"
-      fill="white"
-    />
-    <circle
-      cx="16"
-      cy="15"
-      r="2"
-      fill="white"
-    />
-    <circle
-      cx="7"
-      cy="7"
-      r="1"
-      fill="white"
-    />
-    <circle
-      cx="14"
-      cy="8"
-      r="4"
-      fill="white"
-    />
+    <g
+      fill="none"
+      fillRule="evenodd"
+      transform="translate(3 4)"
+    >
+      <path
+        stroke="#FFF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M0 .027v14.985h18.053"
+      />
+      <circle
+        cx="7.5"
+        cy="7.5"
+        r="2.5"
+        fill="#FFF"
+        fillRule="nonzero"
+      />
+      <circle
+        cx="13"
+        cy="11"
+        r="2"
+        fill="#FFF"
+        fillRule="nonzero"/>
+      <circle
+        cx="4"
+        cy="3"
+        r="1"
+        fill="#FFF"
+        fillRule="nonzero"/>
+      <circle
+        cx="11"
+        cy="4"
+        r="4"
+        fill="#FFF"
+        fillRule="nonzero"
+      />
+    </g>
   </svg>
 );