wisdesignsystem · FaureWu · Jan 24, 2025 · Jan 24, 2025
diff --git a/.changeset/three-roses-design.md b/.changeset/three-roses-design.md
@@ -0,0 +1,5 @@
+---
+"@wisdesign/lsicon": patch
+---
+
+[Feature] add the data-role property
diff --git a/components/AddChatFilledIcon.tsx b/components/AddChatFilledIcon.tsx
@@ -7,6 +7,7 @@ const AddChatFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AddChatIcon.tsx b/components/AddChatIcon.tsx
@@ -7,6 +7,7 @@ const AddChatIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AddChatTwoFilledIcon.tsx b/components/AddChatTwoFilledIcon.tsx
@@ -7,6 +7,7 @@ const AddChatTwoFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AddChatTwoIcon.tsx b/components/AddChatTwoIcon.tsx
@@ -7,6 +7,7 @@ const AddChatTwoIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AddOneFilledIcon.tsx b/components/AddOneFilledIcon.tsx
@@ -7,6 +7,7 @@ const AddOneFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AddOneIcon.tsx b/components/AddOneIcon.tsx
@@ -7,6 +7,7 @@ const AddOneIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AdjustHightFilledIcon.tsx b/components/AdjustHightFilledIcon.tsx
@@ -7,6 +7,7 @@ const AdjustHightFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AdjustHightIcon.tsx b/components/AdjustHightIcon.tsx
@@ -7,6 +7,7 @@ const AdjustHightIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AdjustWidthFilledIcon.tsx b/components/AdjustWidthFilledIcon.tsx
@@ -7,6 +7,7 @@ const AdjustWidthFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AdjustWidthIcon.tsx b/components/AdjustWidthIcon.tsx
@@ -7,6 +7,7 @@ const AdjustWidthIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AlignTxtBothFilledIcon.tsx b/components/AlignTxtBothFilledIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtBothFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AlignTxtBothIcon.tsx b/components/AlignTxtBothIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtBothIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AlignTxtCenterFilledIcon.tsx b/components/AlignTxtCenterFilledIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtCenterFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AlignTxtCenterIcon.tsx b/components/AlignTxtCenterIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtCenterIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AlignTxtLeftFilledIcon.tsx b/components/AlignTxtLeftFilledIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtLeftFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AlignTxtLeftIcon.tsx b/components/AlignTxtLeftIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtLeftIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AlignTxtRightFilledIcon.tsx b/components/AlignTxtRightFilledIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtRightFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AlignTxtRightIcon.tsx b/components/AlignTxtRightIcon.tsx
@@ -7,6 +7,7 @@ const AlignTxtRightIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountDollarFilledIcon.tsx b/components/AmountDollarFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountDollarFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountDollarIcon.tsx b/components/AmountDollarIcon.tsx
@@ -7,6 +7,7 @@ const AmountDollarIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountDownFilledIcon.tsx b/components/AmountDownFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountDownFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountDownIcon.tsx b/components/AmountDownIcon.tsx
@@ -7,6 +7,7 @@ const AmountDownIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountDownTwoFilledIcon.tsx b/components/AmountDownTwoFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountDownTwoFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountDownTwoIcon.tsx b/components/AmountDownTwoIcon.tsx
@@ -7,6 +7,7 @@ const AmountDownTwoIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountUpFilledIcon.tsx b/components/AmountUpFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountUpFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountUpIcon.tsx b/components/AmountUpIcon.tsx
@@ -7,6 +7,7 @@ const AmountUpIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountUpTwoFilledIcon.tsx b/components/AmountUpTwoFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountUpTwoFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountUpTwoIcon.tsx b/components/AmountUpTwoIcon.tsx
@@ -7,6 +7,7 @@ const AmountUpTwoIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AmountYuanFilledIcon.tsx b/components/AmountYuanFilledIcon.tsx
@@ -7,6 +7,7 @@ const AmountYuanFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AmountYuanIcon.tsx b/components/AmountYuanIcon.tsx
@@ -7,6 +7,7 @@ const AmountYuanIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AnnularFilledIcon.tsx b/components/AnnularFilledIcon.tsx
@@ -7,6 +7,7 @@ const AnnularFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AnnularIcon.tsx b/components/AnnularIcon.tsx
@@ -7,6 +7,7 @@ const AnnularIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/Anticlockwise90FilledIcon.tsx b/components/Anticlockwise90FilledIcon.tsx
@@ -7,6 +7,7 @@ const Anticlockwise90FilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/Anticlockwise90Icon.tsx b/components/Anticlockwise90Icon.tsx
@@ -7,6 +7,7 @@ const Anticlockwise90Icon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AppsFilledIcon.tsx b/components/AppsFilledIcon.tsx
@@ -7,6 +7,7 @@ const AppsFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AppsIcon.tsx b/components/AppsIcon.tsx
@@ -7,6 +7,7 @@ const AppsIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AreaChartFilledIcon.tsx b/components/AreaChartFilledIcon.tsx
@@ -7,6 +7,7 @@ const AreaChartFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/AreaChartIcon.tsx b/components/AreaChartIcon.tsx
@@ -7,6 +7,7 @@ const AreaChartIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/ArrowDownFilledIcon.tsx b/components/ArrowDownFilledIcon.tsx
@@ -7,6 +7,7 @@ const ArrowDownFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/ArrowDownIcon.tsx b/components/ArrowDownIcon.tsx
@@ -7,6 +7,7 @@ const ArrowDownIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/ArrowDownRightFilledIcon.tsx b/components/ArrowDownRightFilledIcon.tsx
@@ -7,6 +7,7 @@ const ArrowDownRightFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/ArrowDownRightIcon.tsx b/components/ArrowDownRightIcon.tsx
@@ -7,6 +7,7 @@ const ArrowDownRightIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/ArrowLeftFilledIcon.tsx b/components/ArrowLeftFilledIcon.tsx
@@ -7,6 +7,7 @@ const ArrowLeftFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/ArrowLeftIcon.tsx b/components/ArrowLeftIcon.tsx
@@ -7,6 +7,7 @@ const ArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/ArrowRightFilledIcon.tsx b/components/ArrowRightFilledIcon.tsx
@@ -7,6 +7,7 @@ const ArrowRightFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/ArrowRightIcon.tsx b/components/ArrowRightIcon.tsx
@@ -7,6 +7,7 @@ const ArrowRightIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/ArrowUpFilledIcon.tsx b/components/ArrowUpFilledIcon.tsx
@@ -7,6 +7,7 @@ const ArrowUpFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">

diff --git a/components/ArrowUpIcon.tsx b/components/ArrowUpIcon.tsx
@@ -7,6 +7,7 @@ const ArrowUpIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=outline">

diff --git a/components/AtFilledIcon.tsx b/components/AtFilledIcon.tsx
@@ -7,6 +7,7 @@ const AtFilledIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     fill="none"
     viewBox="0 0 16 16"
+    data-role="lsicon"
     {...props}
   >
     <g id="theme=filled">