[ui] add path props to most icons (#12933)

- adds path props to most icons - didn't change icons that either were not affected by the stroke props (I checked them all manually) - fixes default colors for some icons - some stroke widths were large decimals so I rounded some of them if the effect was negligible GitOrigin-RevId: 72e8c42aa41667c2aff80a5d118dd2aafcf14389
lightsparkdev · Oct 16, 2024 · ced503d · ced503d
1 parent cc944aa
commit ced503d
Show file tree

Hide file tree

Showing 76 changed files with 798 additions and 327 deletions.
diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx
@@ -113,10 +113,10 @@ export const IconContainer = styled.span<IconContainerProps>`
       */
 
       .${invertFillColor} {
-        fill: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
       .${invertStrokeColor} {
-        stroke: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
     }
   `;

diff --git a/packages/ui/src/icons/AI.tsx b/packages/ui/src/icons/AI.tsx
@@ -1,22 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-import {
-  type PathLinecap,
-  type PathLinejoin,
-  type PathStrokeWidth,
-} from "./types.js";
-
-type AIProps = {
-  strokeWidth?: PathStrokeWidth;
-  strokeLinecap?: PathLinecap;
-  strokeLinejoin?: PathLinejoin;
-};
+import { type PathProps } from "./types.js";
 
 export function AI({
   strokeWidth = "2",
   strokeLinecap = "round",
   strokeLinejoin = "round",
-}: AIProps) {
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/ui/src/icons/AnchorLink.tsx b/packages/ui/src/icons/AnchorLink.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function AnchorLink() {
+import { type PathProps } from "./types.js";
+
+export function AnchorLink({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -11,9 +17,9 @@ export function AnchorLink() {
       <path
         d="M7.49989 12.5L12.4998 7.50004M6.24989 8.75003L4.99989 10.0001C3.61923 11.3808 3.61925 13.6193 4.99992 15V15C6.38064 16.3807 8.61924 16.3807 9.99993 14.9999L11.2498 13.7499M13.7498 11.25L14.9999 9.99994C16.3805 8.61924 16.3805 6.3807 14.9998 5.00001V5.00001C13.6191 3.6193 11.3805 3.61931 9.99984 5.00004L8.74987 6.25005"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowCircle.tsx b/packages/ui/src/icons/ArrowCircle.tsx
@@ -1,8 +1,13 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
 import { invertStrokeColor } from "./constants.js";
+import { type PathProps } from "./types.js";
 
-export function ArrowCircle() {
+export function ArrowCircle({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -14,9 +19,9 @@ export function ArrowCircle() {
       <path
         className={invertStrokeColor}
         d="M21 18V9M21 9H12M21 9L9.5 20.5"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowCornerDownRight.tsx b/packages/ui/src/icons/ArrowCornerDownRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2023, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowCornerDownRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowCornerDownRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowCornerDownRight() {
       <path
         d="M2.66699 3.3335V10.0002H13.3337M13.3337 10.0002L10.667 7.3335M13.3337 10.0002L10.667 12.6668"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowDown.tsx b/packages/ui/src/icons/ArrowDown.tsx
@@ -1,4 +1,10 @@
-export function ArrowDown() {
+import { type PathProps } from "./types.js";
+
+export function ArrowDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowDown() {
       <path
         d="M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowLeft.tsx b/packages/ui/src/icons/ArrowLeft.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowLeft() {
+import { type PathProps } from "./types.js";
+
+export function ArrowLeft({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowLeft() {
       <path
         d="M16.4744 8.00005L1.52344 8.00005M1.52344 8.00005L7.52344 14.2858M1.52344 8.00005L7.52344 1.71434"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowRight.tsx b/packages/ui/src/icons/ArrowRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowRight({
+  strokeWidth = "1.33333",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowRight() {
       <path
         d="M1.01704 4.99993L10.9844 4.99993M10.9844 4.99993L6.98438 0.809448M10.9844 4.99993L6.98437 9.1904"
         stroke="currentColor"
-        strokeWidth="1.33333"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowUp.tsx b/packages/ui/src/icons/ArrowUp.tsx
@@ -1,4 +1,10 @@
-export function ArrowUp() {
+import { type PathProps } from "./types.js";
+
+export function ArrowUp({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowUp() {
       <path
         d="M1 3.75904L3.88111 0.87793M3.88111 0.87793L6.76222 3.75904M3.88111 0.87793L3.88111 12.4024"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowUpRight.tsx b/packages/ui/src/icons/ArrowUpRight.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowUpRight() {
+import { type PathProps } from "./types.js";
+
+export function ArrowUpRight({
+  strokeWidth = "2.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function ArrowUpRight() {
       <path
         d="M22.4167 17.4167V1.58333M22.4167 1.58333H6.58333M22.4167 1.58333L2 22"
         stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowsDown.tsx b/packages/ui/src/icons/ArrowsDown.tsx
@@ -1,4 +1,10 @@
-export function ArrowsDown() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsDown({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowsDown() {
       <path
         d="M1 9.52123L3.88111 12.4023M3.88111 12.4023L6.76222 9.52123M3.88111 12.4023L3.88111 0.8779M9.73778 9.52123L12.6189 12.4023M12.6189 12.4023L15.5 9.52123M12.6189 12.4023L12.6189 0.8779"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowsHorizontal.tsx b/packages/ui/src/icons/ArrowsHorizontal.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function ArrowsHorizontal() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsHorizontal({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,16 +17,16 @@ export function ArrowsHorizontal() {
       <path
         d="M16.3846 1L21.0009 5.61631M21.0009 5.61631L16.3846 10.2326M21.0009 5.61631H2.53564"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
       <path
         d="M5.6164 23.0041L1.00009 18.3878M1.00009 18.3878L5.6164 13.7715M1.00009 18.3878L19.4653 18.3878"
         stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/ArrowsUp.tsx b/packages/ui/src/icons/ArrowsUp.tsx
@@ -1,4 +1,10 @@
-export function ArrowsUp() {
+import { type PathProps } from "./types.js";
+
+export function ArrowsUp({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -9,9 +15,9 @@ export function ArrowsUp() {
       <path
         d="M1 3.75904L3.88111 0.87793M3.88111 0.87793L6.76222 3.75904M3.88111 0.87793L3.88111 12.4024M9.73778 3.75904L12.6189 0.87793M12.6189 0.87793L15.5 3.75904M12.6189 0.87793L12.6189 12.4024"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/Bank.tsx b/packages/ui/src/icons/Bank.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function Bank() {
+import { type PathProps } from "./types.js";
+
+export function Bank({
+  strokeWidth = "1.5",
+  strokeLinecap = "square",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function Bank() {
       <path
         d="M20.2297 8.83298V17.6817M15.6892 17.6817V8.83298M3.77027 8.83298V17.6817M8.31081 17.6817V8.83298M20.5467 17.6817H3.4533C2.9647 17.6817 2.53092 17.9863 2.37642 18.4381L1.99803 19.5442C1.75302 20.2604 2.30012 21 3.07492 21H20.9251C21.6998 21 22.247 20.2604 22.002 19.5442L21.6236 18.4381C21.4691 17.9863 21.0353 17.6817 20.5467 17.6817ZM21.3649 8.83298H2.63514C2.00822 8.83298 1.5 8.33776 1.5 7.72689V7.21615C1.5 6.79885 1.74102 6.41707 2.12328 6.22889L11.4882 1.61883C11.81 1.46039 12.19 1.46039 12.5118 1.61883L21.8767 6.22889C22.259 6.41707 22.5 6.79885 22.5 7.21615V7.72689C22.5 8.33776 21.9918 8.83298 21.3649 8.83298Z"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="square"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );

diff --git a/packages/ui/src/icons/BitcoinB.tsx b/packages/ui/src/icons/BitcoinB.tsx
@@ -1,6 +1,12 @@
 // Copyright  ©, 2022, Lightspark Group, Inc. - All Rights Reserved
 
-export function BitcoinB() {
+import { type PathProps } from "./types.js";
+
+export function BitcoinB({
+  strokeWidth = "1.125",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
   return (
     <svg
       width="100%"
@@ -11,9 +17,9 @@ export function BitcoinB() {
       <path
         d="M2.52899 2.51568H1M2.52899 2.51568V6.30488M2.52899 2.51568H3.12195M2.52899 6.30488H6.25472M2.52899 6.30488V10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 7.15312 8.42683 8.19948C8.42683 9.24584 7.61193 10.0941 6.25472 10.0941M6.25472 6.30488C7.61193 6.30488 8.42683 5.45664 8.42683 4.41028C8.42683 3.36392 7.61193 2.51568 6.25472 2.51568M6.25472 10.0941V11.875M6.25472 10.0941H3.12195M2.52899 10.0941H1M2.52899 10.0941H3.12195M6.25472 2.51568V1M6.25472 2.51568H3.12195M3.12195 1V2.51568M3.12195 10.0941V11.875"
         stroke="currentColor"
-        strokeWidth="1.125"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
       />
     </svg>
   );