Skip to content

[FE-Bugfix] 특정 svg 컴포넌트의 렌더링이 깨지는 문제 수정 #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dioo1461 merged 5 commits into from
Jul 28, 2025
Merged

[FE-Bugfix] 특정 svg 컴포넌트의 렌더링이 깨지는 문제 수정 #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1f8a37
chore: create-icon, create-theme 스크립트를 각각 ui, theme 패키지로 이동
dioo1461 Jun 29, 2025
0e958b1
fix: Icon/index.ts 에서 컴포넌트들을 `SomeIcon.tsx` 형태로 가져오던 문제 수정
dioo1461 Jun 29, 2025
45c9c27
fix: `prop:subProp` 형태의 프롭을 변환하지 않던 문제 수정
dioo1461 Jun 29, 2025
13925ee
chore: create-icon 스크립트로 아이콘 컴포넌트 생성
dioo1461 Jun 29, 2025
07af051
chore: 더 이상 필요하지 않은 Icon/custom 삭제
dioo1461 Jun 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions frontend/apps/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
"test": "vitest",
"lint": "eslint .",
"coverage": "vitest run --coverage",
"create-theme": "node src/scripts/create-theme.cjs & pnpm eslint --fix",
"create-icon": "node src/scripts/create-icon.cjs",
"optimize-image": "node src/scripts/optimize-image.cjs",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/client/tsconfig.app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@
"allowImportingTsExtensions": true,
"noEmit": true,
},
"include": ["src", "__tests__"]
"include": ["src", "__tests__", "../../packages/ui/scripts/create-icon.cjs", "../../packages/theme/scripts/create-theme.cjs"]
}
3 changes: 2 additions & 1 deletion frontend/packages/theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@vanilla-extract/recipes": "^0.5.5"
},
"scripts": {
"build": "tsc -b && node scripts/copy-fonts.js"
"build": "tsc -b && node scripts/copy-fonts.js",
"create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix"
}
Comment on lines +30 to 32
Copy link

@coderabbitai coderabbitai bot Jun 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Windows 호환성 & 실행 순서 보장

& 는 POSIX 셸 전용으로 Windows cmd.exe/PowerShell 에서는 동작하지 않습니다. 또한 ESLint 가 선행 스크립트 실패 여부와 무관하게 실행됩니다. 순차 실행과 크로스 플랫폼을 고려해 && 또는 concurrently 사용을 권장합니다.

-"create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix"
+"create-theme": "node ./scripts/create-theme.cjs && pnpm eslint --fix"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"build": "tsc -b && node scripts/copy-fonts.js",
"create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix"
}
"build": "tsc -b && node scripts/copy-fonts.js",
"create-theme": "node ./scripts/create-theme.cjs && pnpm eslint --fix"
}
🤖 Prompt for AI Agents 
In frontend/packages/theme/package.json around lines 30 to 32, the script uses
'&' to run commands concurrently, which is not compatible with Windows shells
and does not guarantee execution order. Replace '&' with '&&' to ensure
sequential execution and cross-platform compatibility, or use a tool like
'concurrently' if parallel execution is needed.

}
0 .../apps/client/src/scripts/create-theme.cjs → ...d/packages/theme/scripts/create-theme.cjs
View file
Open in desktop
File renamed without changes.
3 changes: 2 additions & 1 deletion frontend/packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"start": "tsup --watch",
"test": "vitest",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
"build-storybook": "storybook build",
"create-icon": "node ./scripts/create-icon.cjs"
},
"publishConfig": {
"access": "public"
Expand Down
14 changes: 7 additions & 7 deletions ...d/apps/client/src/scripts/create-icon.cjs → frontend/packages/ui/scripts/create-icon.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
const { existsSync, promises: fs } = require("fs");
const path = require("path");
const ICON_DIR_RELATIVE_PATH = "../src/components/Icon";

const SVG_DIR = path.resolve(__dirname, "../components/Icon/svg");
const COMPONENT_DIR = path.resolve(__dirname,"../components/Icon/component");
const SVG_DIR = path.resolve(__dirname, `${ICON_DIR_RELATIVE_PATH}/svg`);
const COMPONENT_DIR = path.resolve(__dirname,`${ICON_DIR_RELATIVE_PATH}/component`);

const generateSvgComponentMap = async () => {
const svgFiles = (await fs.readdir(SVG_DIR)).reduce(
Expand Down Expand Up @@ -50,10 +51,9 @@ const createComponentContent = (
const hasFill = fillAttributes.length;
const propsString = `{ clickable = false, className, width = 24, height = 24${hasStroke || hasFill ? ` ${hasStroke ? ', stroke = "white"' : ""}${hasFill ? ', fill = "white"' : ""}` : ""}, ...rest }`;
const modifiedSvgContent = svgContent
.replace(/style="mask-type:luminance"/g, "MASK_TYPE_PLACEHOLDER")
.replace(/style="mask-type:([^"]+)"/g, (_match, value) => `style={{ maskType: "${value}" }}`)
.replace(/data:image/g, "DATA_IMAGE_PLACEHOLDER")
.replace(/[-:](\w)/g, (_, letter) => letter.toUpperCase())
.replace(/MASK_TYPE_PLACEHOLDER/g, "mask-type='luminance'")
.replace(/[:\-]([A-Za-z])/g, (_, letter) => letter.toUpperCase())
.replace(/DATA_IMAGE_PLACEHOLDER/g, "data:image")
.replace(/<svg([^>]*)width="(\d+)"/g, `<svg$1width={width}`)
.replace(/<svg([^>]*)height="(\d+)"/g, `<svg$1height={height || width}`)
Expand Down Expand Up @@ -109,11 +109,11 @@ const generateComponentFiles = async (svgComponentMap) => {
};

const generateExportFile = async (components) => {
const EXPORT_FILE_PATH = path.resolve(__dirname, '../components/Icon/index.ts');
const EXPORT_FILE_PATH = path.resolve(__dirname, `${ICON_DIR_RELATIVE_PATH}/index.ts`);
const exportFileContent = components
.map(
(component) =>
`export * from "./component/${component}.tsx";`
`export * from "./component/${component}";`
)
.join("\n");

Expand Down
51 changes: 13 additions & 38 deletions frontend/packages/ui/src/components/Icon/component/ArrowLeft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,18 @@

import type { IconProps } from '../Icon';
import type { IconProps } from '../Icon.d.ts';

export const ArrowLeft = ({ clickable = false, className, width = 24, height = 24, fill = 'white', ...rest }: IconProps) => (
<svg
aria-label='arrow-left icon'
className={className}
fill='none'
height={height || width}
style={{ cursor: clickable ? 'pointer' : 'default', ...rest.style }}
viewBox='0 0 24 24'
width={width}
xmlns='http://www.w3.org/2000/svg'
{...rest}
>
<mask
height='24'
id='mask0_732_173'
mask-type='luminance'
maskUnits='userSpaceOnUse'
width='24'
x='0'
y='0'
>
<rect
fill='white'
height='24'
width='24'
/>
</mask>
<g mask='url(#mask0_732_173)'>
<path
clipRule='evenodd'
d='M14.8585 19.9972C14.6948 19.9292 14.5461 19.8296 14.421 19.704L7.67101 12.954C7.54561 12.8286 7.44613 12.6798 7.37826 12.516C7.31039 12.3522 7.27545 12.1766 7.27545 11.9993C7.27545 11.8219 7.31039 11.6464 7.37826 11.4825C7.44613 11.3187 7.54561 11.1699 7.67101 11.0445L14.421 4.29451C14.5454 4.16478 14.6944 4.0612 14.8594 3.98983C15.0243 3.91846 15.2018 3.88074 15.3815 3.87889C15.5612 3.87703 15.7395 3.91108 15.9059 3.97903C16.0723 4.04698 16.2234 4.14747 16.3504 4.2746C16.4775 4.40173 16.5778 4.55294 16.6457 4.71937C16.7135 4.8858 16.7474 5.0641 16.7454 5.24381C16.7434 5.42351 16.7055 5.60101 16.634 5.7659C16.5625 5.93078 16.4588 6.07973 16.329 6.20401L10.5345 12L16.329 17.7945C16.5181 17.9832 16.6469 18.2238 16.6992 18.4858C16.7515 18.7477 16.7249 19.0193 16.6227 19.2662C16.5206 19.513 16.3475 19.724 16.1254 19.8724C15.9033 20.0209 15.6422 20.1001 15.375 20.1C15.1978 20.1001 15.0222 20.0652 14.8585 19.9972Z'
fill='#8B95A1'
fillRule='evenodd'
/>
</g>
</svg>
export const ArrowLeft = ({ clickable = false, className, width = 24, height = 24 , fill = "white", ...rest }: IconProps) => {
return (
<svg width={width} height={height || width} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="arrow-left icon" fill="none" className={className} style={{ cursor: clickable ? "pointer": "default", ...rest.style }} {...rest}>
<mask id="mask0_732_173" style={{ maskType: "luminance" }} maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="white"/>
</mask>
<g mask="url(#mask0_732_173)">
<path fillRule="evenodd" clipRule="evenodd" d="M14.8585 19.9972C14.6948 19.9292 14.5461 19.8296 14.421 19.704L7.67101 12.954C7.54561 12.8286 7.44613 12.6798 7.37826 12.516C7.31039 12.3522 7.27545 12.1766 7.27545 11.9993C7.27545 11.8219 7.31039 11.6464 7.37826 11.4825C7.44613 11.3187 7.54561 11.1699 7.67101 11.0445L14.421 4.29451C14.5454 4.16478 14.6944 4.0612 14.8594 3.98983C15.0243 3.91846 15.2018 3.88074 15.3815 3.87889C15.5612 3.87703 15.7395 3.91108 15.9059 3.97903C16.0723 4.04698 16.2234 4.14747 16.3504 4.2746C16.4775 4.40173 16.5778 4.55294 16.6457 4.71937C16.7135 4.8858 16.7474 5.0641 16.7454 5.24381C16.7434 5.42351 16.7055 5.60101 16.634 5.7659C16.5625 5.93078 16.4588 6.07973 16.329 6.20401L10.5345 12L16.329 17.7945C16.5181 17.9832 16.6469 18.2238 16.6992 18.4858C16.7515 18.7477 16.7249 19.0193 16.6227 19.2662C16.5206 19.513 16.3475 19.724 16.1254 19.8724C15.9033 20.0209 15.6422 20.1001 15.375 20.1C15.1978 20.1001 15.0222 20.0652 14.8585 19.9972Z" fill="#8B95A1"/>
</g>
</svg>

);
);
};

ArrowLeft.displayName = 'ArrowLeft';
252 changes: 62 additions & 190 deletions frontend/packages/ui/src/components/Icon/component/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,67 @@

import type { IconProps } from '../Icon';
import type { IconProps } from '../Icon.d.ts';

export const Calendar = ({ clickable = false, className, width = 24, height = 24, fill = 'white', ...rest }: IconProps) => (
<svg
aria-label='calendar icon'
className={className}
fill='none'
height={height || width}
style={{ cursor: clickable ? 'pointer' : 'default', ...rest.style }}
viewBox='0 0 134 130'
width={width}
xmlns='http://www.w3.org/2000/svg'
{...rest}
>
<path d='M7.31641 35.8613L126.86 46.32L120.236 122.031C119.851 126.432 115.971 129.688 111.569 129.303L7.96488 120.239C3.56342 119.854 0.307496 115.974 0.692574 111.572L7.31641 35.8613Z' fill='#E5E8EE' />
<path d='M7.83984 29.8867L127.383 40.3454L120.759 116.056C120.374 120.458 116.494 123.714 112.093 123.328L8.48832 114.264C4.08685 113.879 0.830933 109.999 1.21601 105.597L7.83984 29.8867Z' fill='url(#paint0_linear_2090_22914)' />
<g filter='url(#filter0_d_2090_22914)'>
<path d='M9.23244 13.9471C9.61752 9.54563 13.4978 6.28971 17.8992 6.67479L121.503 15.739C125.905 16.1241 129.161 20.0043 128.776 24.4058L127.381 40.3449L7.83795 29.8862L9.23244 13.9471Z' fill='url(#paint1_linear_2090_22914)' />
</g>
<circle
cx='32.9224'
cy='18.5293'
fill='#3182F6'
r='3'
transform='rotate(5 32.9224 18.5293)'
/>
<circle
cx='56.8326'
cy='20.6202'
fill='#3182F6'
r='3'
transform='rotate(5 56.8326 20.6202)'
/>
<circle
cx='80.7427'
cy='22.7129'
fill='#3182F6'
r='3'
transform='rotate(5 80.7427 22.7129)'
/>
<circle
cx='104.649'
cy='24.8038'
fill='#3182F6'
r='3'
transform='rotate(5 104.649 24.8038)'
/>
<rect
fill='url(#paint2_linear_2090_22914)'
height='18'
rx='2.4'
transform='rotate(5 31.9727 1.88086)'
width='4.8'
x='31.9727'
y='1.88086'
/>
<rect
fill='url(#paint3_linear_2090_22914)'
height='18'
rx='2.4'
transform='rotate(5 55.8789 3.97266)'
width='4.8'
x='55.8789'
y='3.97266'
/>
<rect
fill='url(#paint4_linear_2090_22914)'
height='18'
rx='2.4'
transform='rotate(5 79.7891 6.06543)'
width='4.8'
x='79.7891'
y='6.06543'
/>
<rect
fill='url(#paint5_linear_2090_22914)'
height='18'
rx='2.4'
transform='rotate(5 103.695 8.15625)'
width='4.8'
x='103.695'
y='8.15625'
/>
<path d='M12.5369 38.1272C12.6524 36.8068 13.8165 35.83 15.137 35.9455L42.6319 38.351C43.9524 38.4665 44.9291 39.6306 44.8136 40.951L42.3035 69.6414C42.188 70.9619 41.0239 71.9386 39.7035 71.8231L12.2085 69.4176C10.8881 69.3021 9.91131 68.138 10.0268 66.8176L12.5369 38.1272Z' fill='white' />
<path d='M50.7908 41.474C50.9063 40.1535 52.0704 39.1768 53.3908 39.2923L80.8858 41.6978C82.2062 41.8133 83.183 42.9774 83.0675 44.2978L80.5574 72.9882C80.4419 74.3086 79.2778 75.2854 77.9574 75.1699L50.4624 72.7644C49.1419 72.6489 48.1652 71.4848 48.2807 70.1644L50.7908 41.474Z' fill='white' />
<path d='M89.0446 44.8208C89.1602 43.5003 90.3242 42.5235 91.6447 42.6391L119.14 45.0446C120.46 45.1601 121.437 46.3242 121.321 47.6446L118.811 76.335C118.696 77.6554 117.532 78.6322 116.211 78.5167L88.7163 76.1112C87.3958 75.9957 86.419 74.8316 86.5346 73.5111L89.0446 44.8208Z' fill='white' />
<path d='M9.08555 77.5765C9.20108 76.256 10.3652 75.2793 11.6856 75.3948L39.1806 77.8003C40.501 77.9158 41.4778 79.0799 41.3622 80.4003L38.8522 109.091C38.7366 110.411 37.5726 111.388 36.2521 111.272L8.75716 108.867C7.43672 108.751 6.45995 107.587 6.57547 106.267L9.08555 77.5765Z' fill='white' />
<path d='M47.3394 80.9233C47.4549 79.6028 48.619 78.626 49.9395 78.7416L77.4344 81.1471C78.7549 81.2626 79.7316 82.4267 79.6161 83.7471L77.106 112.437C76.9905 113.758 75.8264 114.735 74.506 114.619L47.011 112.214C45.6906 112.098 44.7138 110.934 44.8293 109.614L47.3394 80.9233Z' fill='white' />
<path d='M85.5933 84.27C85.7088 82.9496 86.8729 81.9728 88.1933 82.0884L115.688 84.4938C117.009 84.6094 117.985 85.7734 117.87 87.0939L115.36 115.784C115.244 117.105 114.08 118.081 112.76 117.966L85.2649 115.56C83.9445 115.445 82.9677 114.281 83.0832 112.96L85.5933 84.27Z' fill='white' />
<defs>
<filter
colorInterpolationFilters='sRGB'
filterUnits='userSpaceOnUse'
height='43.7012'
id='filter0_d_2090_22914'
width='130.969'
x='2.83984'
y='5.64355'
>
<feFlood floodOpacity='0' result='BackgroundImageFix' />
<feColorMatrix
in='SourceAlpha'
result='hardAlpha'
type='matrix'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
/>
<feOffset dy='4' />
<feGaussianBlur stdDeviation='2.5' />
<feComposite in2='hardAlpha' operator='out' />
<feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0' />
<feBlend
in2='BackgroundImageFix'
mode='normal'
result='effect1_dropShadow_2090_22914'
/>
<feBlend
in='SourceGraphic'
in2='effect1_dropShadow_2090_22914'
mode='normal'
result='shape'
/>
</filter>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint0_linear_2090_22914'
x1='67.5871'
x2='37.4087'
y1='35.395'
y2='109.805'
>
<stop stopColor='#DFE2E6' />
<stop offset='1' stopColor='#F9FAFB' />
</linearGradient>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint1_linear_2090_22914'
x1='69.7013'
x2='67.6096'
y1='11.2069'
y2='35.1155'
>
<stop stopColor='#64A8FF' />
<stop offset='1' stopColor='#3182F6' />
</linearGradient>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint2_linear_2090_22914'
x1='34.3727'
x2='34.3727'
y1='1.88086'
y2='19.8809'
>
<stop stopColor='#4E5968' />
<stop offset='1' stopColor='#6B7684' />
</linearGradient>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint3_linear_2090_22914'
x1='58.2789'
x2='58.2789'
y1='3.97266'
y2='21.9726'
>
<stop stopColor='#4E5968' />
<stop offset='1' stopColor='#6B7684' />
</linearGradient>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint4_linear_2090_22914'
x1='82.1891'
x2='82.1891'
y1='6.06543'
y2='24.0654'
>
<stop stopColor='#4E5968' />
<stop offset='1' stopColor='#6B7684' />
</linearGradient>
<linearGradient
gradientUnits='userSpaceOnUse'
id='paint5_linear_2090_22914'
x1='106.095'
x2='106.095'
y1='8.15625'
y2='26.1562'
>
<stop stopColor='#4E5968' />
<stop offset='1' stopColor='#6B7684' />
</linearGradient>
</defs>
</svg>
export const Calendar = ({ clickable = false, className, width = 24, height = 24 , fill = "white", ...rest }: IconProps) => {
return (
<svg width={width} height={height || width} viewBox="0 0 134 130" xmlns="http://www.w3.org/2000/svg" aria-label="calendar icon" fill="none" className={className} style={{ cursor: clickable ? "pointer": "default", ...rest.style }} {...rest}>
<path d="M7.31641 35.8613L126.86 46.32L120.236 122.031C119.851 126.432 115.971 129.688 111.569 129.303L7.96488 120.239C3.56342 119.854 0.307496 115.974 0.692574 111.572L7.31641 35.8613Z" fill="#E5E8EE"/>
<path d="M7.83984 29.8867L127.383 40.3454L120.759 116.056C120.374 120.458 116.494 123.714 112.093 123.328L8.48832 114.264C4.08685 113.879 0.830933 109.999 1.21601 105.597L7.83984 29.8867Z" fill="url(#paint0_linear_2090_22914)"/>
<g filter="url(#filter0_d_2090_22914)">
<path d="M9.23244 13.9471C9.61752 9.54563 13.4978 6.28971 17.8992 6.67479L121.503 15.739C125.905 16.1241 129.161 20.0043 128.776 24.4058L127.381 40.3449L7.83795 29.8862L9.23244 13.9471Z" fill="url(#paint1_linear_2090_22914)"/>
</g>
<circle cx="32.9224" cy="18.5293" r="3" transform="rotate(5 32.9224 18.5293)" fill="#3182F6"/>
<circle cx="56.8326" cy="20.6202" r="3" transform="rotate(5 56.8326 20.6202)" fill="#3182F6"/>
<circle cx="80.7427" cy="22.7129" r="3" transform="rotate(5 80.7427 22.7129)" fill="#3182F6"/>
<circle cx="104.649" cy="24.8038" r="3" transform="rotate(5 104.649 24.8038)" fill="#3182F6"/>
<rect x="31.9727" y="1.88086" width="4.8" height="18" rx="2.4" transform="rotate(5 31.9727 1.88086)" fill="url(#paint2_linear_2090_22914)"/>
<rect x="55.8789" y="3.97266" width="4.8" height="18" rx="2.4" transform="rotate(5 55.8789 3.97266)" fill="url(#paint3_linear_2090_22914)"/>
<rect x="79.7891" y="6.06543" width="4.8" height="18" rx="2.4" transform="rotate(5 79.7891 6.06543)" fill="url(#paint4_linear_2090_22914)"/>
<rect x="103.695" y="8.15625" width="4.8" height="18" rx="2.4" transform="rotate(5 103.695 8.15625)" fill="url(#paint5_linear_2090_22914)"/>
<path d="M12.5369 38.1272C12.6524 36.8068 13.8165 35.83 15.137 35.9455L42.6319 38.351C43.9524 38.4665 44.9291 39.6306 44.8136 40.951L42.3035 69.6414C42.188 70.9619 41.0239 71.9386 39.7035 71.8231L12.2085 69.4176C10.8881 69.3021 9.91131 68.138 10.0268 66.8176L12.5369 38.1272Z" fill="white"/>
<path d="M50.7908 41.474C50.9063 40.1535 52.0704 39.1768 53.3908 39.2923L80.8858 41.6978C82.2062 41.8133 83.183 42.9774 83.0675 44.2978L80.5574 72.9882C80.4419 74.3086 79.2778 75.2854 77.9574 75.1699L50.4624 72.7644C49.1419 72.6489 48.1652 71.4848 48.2807 70.1644L50.7908 41.474Z" fill="white"/>
<path d="M89.0446 44.8208C89.1602 43.5003 90.3242 42.5235 91.6447 42.6391L119.14 45.0446C120.46 45.1601 121.437 46.3242 121.321 47.6446L118.811 76.335C118.696 77.6554 117.532 78.6322 116.211 78.5167L88.7163 76.1112C87.3958 75.9957 86.419 74.8316 86.5346 73.5111L89.0446 44.8208Z" fill="white"/>
<path d="M9.08555 77.5765C9.20108 76.256 10.3652 75.2793 11.6856 75.3948L39.1806 77.8003C40.501 77.9158 41.4778 79.0799 41.3622 80.4003L38.8522 109.091C38.7366 110.411 37.5726 111.388 36.2521 111.272L8.75716 108.867C7.43672 108.751 6.45995 107.587 6.57547 106.267L9.08555 77.5765Z" fill="white"/>
<path d="M47.3394 80.9233C47.4549 79.6028 48.619 78.626 49.9395 78.7416L77.4344 81.1471C78.7549 81.2626 79.7316 82.4267 79.6161 83.7471L77.106 112.437C76.9905 113.758 75.8264 114.735 74.506 114.619L47.011 112.214C45.6906 112.098 44.7138 110.934 44.8293 109.614L47.3394 80.9233Z" fill="white"/>
<path d="M85.5933 84.27C85.7088 82.9496 86.8729 81.9728 88.1933 82.0884L115.688 84.4938C117.009 84.6094 117.985 85.7734 117.87 87.0939L115.36 115.784C115.244 117.105 114.08 118.081 112.76 117.966L85.2649 115.56C83.9445 115.445 82.9677 114.281 83.0832 112.96L85.5933 84.27Z" fill="white"/>
<defs>
<filter id="filter0_d_2090_22914" x="2.83984" y="5.64355" width="130.969" height="43.7012" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2090_22914"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2090_22914" result="shape"/>
</filter>
<linearGradient id="paint0_linear_2090_22914" x1="67.5871" y1="35.395" x2="37.4087" y2="109.805" gradientUnits="userSpaceOnUse">
<stop stopColor="#DFE2E6"/>
<stop offset="1" stopColor="#F9FAFB"/>
</linearGradient>
<linearGradient id="paint1_linear_2090_22914" x1="69.7013" y1="11.2069" x2="67.6096" y2="35.1155" gradientUnits="userSpaceOnUse">
<stop stopColor="#64A8FF"/>
<stop offset="1" stopColor="#3182F6"/>
</linearGradient>
<linearGradient id="paint2_linear_2090_22914" x1="34.3727" y1="1.88086" x2="34.3727" y2="19.8809" gradientUnits="userSpaceOnUse">
<stop stopColor="#4E5968"/>
<stop offset="1" stopColor="#6B7684"/>
</linearGradient>
<linearGradient id="paint3_linear_2090_22914" x1="58.2789" y1="3.97266" x2="58.2789" y2="21.9726" gradientUnits="userSpaceOnUse">
<stop stopColor="#4E5968"/>
<stop offset="1" stopColor="#6B7684"/>
</linearGradient>
<linearGradient id="paint4_linear_2090_22914" x1="82.1891" y1="6.06543" x2="82.1891" y2="24.0654" gradientUnits="userSpaceOnUse">
<stop stopColor="#4E5968"/>
<stop offset="1" stopColor="#6B7684"/>
</linearGradient>
<linearGradient id="paint5_linear_2090_22914" x1="106.095" y1="8.15625" x2="106.095" y2="26.1562" gradientUnits="userSpaceOnUse">
<stop stopColor="#4E5968"/>
<stop offset="1" stopColor="#6B7684"/>
</linearGradient>
</defs>
</svg>

);
);
};

Calendar.displayName = 'Calendar';
Loading