fix: loupe view icon

aftershootco · Jun 4, 2024 · c8368ce · c8368ce
1 parent 796652c
commit c8368ce
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 105 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/icons-metadata/loupe-view-icon.json b/icons-metadata/loupe-view-icon.json
@@ -1,4 +1,9 @@
 {
-  "icon_type": "no-change",
-  "name": "loupe-view-icon"
+  "icon_type": "mix",
+  "name": "loupe-view-icon",
+  "svg_process_option": {
+    "stroke": "#555555",
+    "stroke-width": 1.5,
+    "fill": "#555555"
+  }
 }
diff --git a/icons-optimized/check-box-empty-icon.svg b/icons-optimized/check-box-empty-icon.svg
diff --git a/icons-optimized/loupe-view-icon.svg b/icons-optimized/loupe-view-icon.svg
diff --git a/icons-original/mix/check-box-empty.svg b/icons-original/mix/check-box-empty.svg
diff --git a/icons-original/mix/loupe-view.svg b/icons-original/mix/loupe-view.svg
diff --git a/icons-original/no-change/loupe-view.svg b/icons-original/no-change/loupe-view.svg
diff --git a/src/Icon.ts b/src/Icon.ts
@@ -29,9 +29,9 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
 				...(svgType === 'outline' && { stroke: inActive ? '#777777' : color }),
 				...(size ? { style: { width: size, height: 'auto' } } : {}),
 				className: cn(
-					`w-7 shrink-0 `,
+					`w-7 shrink-0 text-white`,
 					svgType === 'outline' && 'stroke-2',
-					svgType === 'fill' && 'text-white',
+					svgType === 'mix' && 'stroke-2',
 					inActive && 'text-[#777777]',
 					className,
 				),

diff --git a/src/Icons/check-box-empty-icon.tsx b/src/Icons/check-box-empty-icon.tsx
@@ -6,25 +6,19 @@ const CheckBoxEmptyIcon = createASIcon(
   {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 24 24",
   },
   <g>
-    <rect
-      width="16"
-      height="16"
+    <path
       fill="currentColor"
       fill-opacity=".7"
-      rx="3"
-      key="19amoj"
+      d="M17.625 3H6.375A3.375 3.375 0 0 0 3 6.375v11.25A3.375 3.375 0 0 0 6.375 21h11.25A3.375 3.375 0 0 0 21 17.625V6.375A3.375 3.375 0 0 0 17.625 3"
+      key="1g66p4"
     />
-    <rect
-      width="15"
-      height="15"
-      x=".5"
-      y=".5"
+    <path
       stroke="currentColor"
-      rx="2.5"
-      key="1g637q"
+      d="M18 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3Z"
+      key="1jjaoe"
     />
   </g>,
   "mix",

diff --git a/src/Icons/loupe-view-icon.tsx b/src/Icons/loupe-view-icon.tsx
@@ -9,34 +9,20 @@ const LoupeViewIcon = createASIcon(
     viewBox: "0 0 24 24",
   },
   <g>
-    <g clip-path="url(#a)" key="1ycjfh">
-      <mask
-        id="b"
-        width="26"
-        height="26"
-        x="-1"
-        y="-1"
-        maskUnits="userSpaceOnUse"
-      >
-        <path fill="#fff" d="M25-1H-1v26h26z" />
-      </mask>
-      <g mask="url(#b)">
-        <path fill="currentColor" d="M7.666 7.667h8.667v8.666H7.666z" />
-        <path
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="bevel"
-          d="M18.5 3.333h-13c-1.196 0-2.166.97-2.166 2.167v13c0 1.197.97 2.167 2.167 2.167h13c1.196 0 2.166-.97 2.166-2.167v-13c0-1.197-.97-2.167-2.166-2.167Z"
-        />
-      </g>
-    </g>
-    <defs key="9ahrjx">
-      <clipPath id="a">
-        <rect width="24" height="24" fill="#fff" />
-      </clipPath>
-    </defs>
+    <path
+      fill="currentColor"
+      d="M7.666 7.667h8.667v8.666H7.666z"
+      key="incwvt"
+    />
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="bevel"
+      d="M18.5 3.333h-13c-1.196 0-2.166.97-2.166 2.167v13c0 1.197.97 2.167 2.167 2.167h13c1.196 0 2.166-.97 2.166-2.167v-13c0-1.197-.97-2.167-2.166-2.167Z"
+      key="1d90ry"
+    />
   </g>,
-  "no-change",
+  "mix",
 );
 
 export default LoupeViewIcon;
diff --git a/src/stories/LoupeViewIcon.stories.tsx b/src/stories/LoupeViewIcon.stories.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
     const meta: Meta<typeof LoupeViewIcon> = {
         component: LoupeViewIcon,
-        title: 'no-change/LoupeViewIcon',
+        title: 'mix/LoupeViewIcon',
         decorators: [
             (Story) => (
                 <div style={{ margin: '1rem', display: 'flex', alignItems: 'center', gap: 6 }}>
@@ -41,14 +41,14 @@ import type { Meta, StoryObj } from '@storybook/react'
             }
 
 
+         export const Stroke: Story = {
+                args: {
+                    className: 'stroke-[2px]',
+                },
+            }
+
 
 
-          export const AccentColor: Story = {
-            args: {
-                accentColor: 'red',
-            },
-          }
-
 
     export const inActive: Story = {
         args: {

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -629,22 +629,22 @@ video {
   background-color: transparent;
 }
 
+.stroke-green-500 {
+  stroke: #22c55e;
+}
+
 .stroke-1 {
   stroke-width: 1;
 }
 
-.stroke-\[1\.5px\] {
-  stroke-width: 1.5px;
+.stroke-2 {
+  stroke-width: 2;
 }
 
 .stroke-\[2px\] {
   stroke-width: 2px;
 }
 
-.stroke-2 {
-  stroke-width: 2;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -674,6 +674,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
 .outline {
   outline-style: solid;
 }