From c8368ce3de384987a6593ec1ec3c921ed32c32fc Mon Sep 17 00:00:00 2001 From: booi-dev Date: Tue, 4 Jun 2024 15:07:46 +0530 Subject: [PATCH] fix: loupe view icon --- .DS_Store | Bin 8196 -> 8196 bytes icons-metadata/loupe-view-icon.json | 9 +++-- icons-optimized/check-box-empty-icon.svg | 13 ++++++-- icons-optimized/loupe-view-icon.svg | 33 ++++--------------- icons-original/mix/check-box-empty.svg | 6 ++-- icons-original/mix/loupe-view.svg | 9 +++++ icons-original/no-change/loupe-view.svg | 16 --------- src/Icon.ts | 4 +-- src/Icons/check-box-empty-icon.tsx | 20 ++++-------- src/Icons/loupe-view-icon.tsx | 40 ++++++++--------------- src/stories/LoupeViewIcon.stories.tsx | 14 ++++---- src/styles/tailwind.css | 17 ++++++---- 12 files changed, 76 insertions(+), 105 deletions(-) create mode 100644 icons-original/mix/loupe-view.svg delete mode 100644 icons-original/no-change/loupe-view.svg diff --git a/.DS_Store b/.DS_Store index fd80e26f3429662c02429053c8e7d57aacc575db..6bf2150b24f751b65cac7eeac9558def10e38709 100644 GIT binary patch delta 40 wcmZp1XmOa}I9U^hRb(qmr28#FevOMGM5tSb75X<~ya01#9Se*gdg delta 64 zcmZp1XmOa}gHU^hRb@@5`^NJd!}h7^WOhGK>i&z$_^q@4UD1_lNJAa(>|z0FaA Rt!$gwCBCt2zAD1b3;-Xl5IFz< diff --git a/icons-metadata/loupe-view-icon.json b/icons-metadata/loupe-view-icon.json index 03901a58..39df1697 100644 --- 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" + } } \ No newline at end of file diff --git a/icons-optimized/check-box-empty-icon.svg b/icons-optimized/check-box-empty-icon.svg index 3e2eb669..01332562 100644 --- a/icons-optimized/check-box-empty-icon.svg +++ b/icons-optimized/check-box-empty-icon.svg @@ -1,4 +1,11 @@ - - - + + + diff --git a/icons-optimized/loupe-view-icon.svg b/icons-optimized/loupe-view-icon.svg index edc1387a..516384f2 100644 --- a/icons-optimized/loupe-view-icon.svg +++ b/icons-optimized/loupe-view-icon.svg @@ -1,28 +1,9 @@ - - - - - - - - - - - - - - + + diff --git a/icons-original/mix/check-box-empty.svg b/icons-original/mix/check-box-empty.svg index f4183270..5d7df8d1 100644 --- a/icons-original/mix/check-box-empty.svg +++ b/icons-original/mix/check-box-empty.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/icons-original/mix/loupe-view.svg b/icons-original/mix/loupe-view.svg new file mode 100644 index 00000000..22e46565 --- /dev/null +++ b/icons-original/mix/loupe-view.svg @@ -0,0 +1,9 @@ + + + + diff --git a/icons-original/no-change/loupe-view.svg b/icons-original/no-change/loupe-view.svg deleted file mode 100644 index 6b02576d..00000000 --- a/icons-original/no-change/loupe-view.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/Icon.ts b/src/Icon.ts index 0a072d8a..4c8e03da 100644 --- a/src/Icon.ts +++ b/src/Icon.ts @@ -29,9 +29,9 @@ const Icon = forwardRef( ...(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 index 6eda81a4..293167ea 100644 --- 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", }, - - , "mix", diff --git a/src/Icons/loupe-view-icon.tsx b/src/Icons/loupe-view-icon.tsx index 5a5cf302..9cb2b970 100644 --- 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", }, - - - - - - - - - - - - - - + + , - "no-change", + "mix", ); export default LoupeViewIcon; diff --git a/src/stories/LoupeViewIcon.stories.tsx b/src/stories/LoupeViewIcon.stories.tsx index ea873e99..c6584b7a 100644 --- 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 = { component: LoupeViewIcon, - title: 'no-change/LoupeViewIcon', + title: 'mix/LoupeViewIcon', decorators: [ (Story) => (
@@ -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 index 3ef5c2d8..53f4f3cf 100644 --- 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; }