Skip to content

Commit ffecf27

Browse files
gustn99gustn99
committed
Feat: 모든 svg 컴포넌트에 width, height 프로퍼티 추가
1 parent 0ed1a84 commit ffecf27

6 files changed

Lines changed: 16 additions & 40 deletions

File tree

‎src/components/Icons/Alarm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Alarm: React.FC<IconsProps> = ({ isFilled = false }) => {
4+
const Alarm: React.FC<IconsProps> = ({ isFilled = false, width = '14', height = '18' }) => {
55
return (
6-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
6+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 18" fill="none">
77
<path
88
d="M0 15.3V13.5H1.75V7.2C1.75 5.958 2.1175 4.851 2.84375 3.879C3.57 2.907 4.52375 2.277 5.6875 1.98V1.35C5.6875 0.972 5.81875 0.657 6.0725 0.396C6.32625 0.135 6.64125 0 7 0C7.35875 0 7.67375 0.135 7.9275 0.396C8.18125 0.657 8.3125 0.981 8.3125 1.35V1.98C9.47625 2.277 10.43 2.916 11.1562 3.879C11.8825 4.842 12.25 5.949 12.25 7.2V13.5H14V15.3H0ZM7 18C6.51875 18 6.1075 17.82 5.76625 17.469C5.425 17.118 5.25 16.695 5.25 16.2H8.75C8.75 16.695 8.575 17.118 8.23375 17.469C7.8925 17.82 7.48125 18 7 18ZM3.5 13.5H10.5V7.2C10.5 6.21 10.1587 5.364 9.4675 4.653C8.77625 3.942 7.95375 3.591 6.99125 3.591C6.02875 3.591 5.20625 3.942 4.515 4.653C3.82375 5.364 3.4825 6.21 3.4825 7.2V13.5H3.5Z"
99
fill="#8E8E8E"

‎src/components/Icons/Heart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Heart: React.FC<IconsProps> = ({ isFilled = false }) => {
4+
const Heart: React.FC<IconsProps> = ({ isFilled = false, width = '56', height = '56' }) => {
55
return (
6-
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<svg width={width} height={height} viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
77
<rect x="0.5" y="0.5" width="55" height="55" rx="27.5" fill="white" />
88
<rect x="0.5" y="0.5" width="55" height="55" rx="27.5" stroke="url(#paint0_linear_3603_1320)" />
99
<path

‎src/components/Icons/Home.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,17 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Home: React.FC<IconsProps> = ({ color = '', isFilled = false, width, height }) => {
4+
const Home: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '14', height = '14' }) => {
55
return (
66
<>
77
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 home-fill는 color을 black으로, default는 color을 white로)
8-
<svg
9-
xmlns="http://www.w3.org/2000/svg"
10-
width={width || 14}
11-
height={height || 14}
12-
viewBox="1 0 14 14"
13-
fill="none"
14-
>
8+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="1 0 14 14" fill="none">
159
<path d="M8 2.6425L11.75 6.0175V11.875H10.25V7.375H5.75V11.875H4.25V6.0175L8 2.6425Z" fill={color} />
1610
<path d="M8 0.625L0.5 7.375H2.75V13.375H7.25V8.875H8.75V13.375H13.25V7.375H15.5L8 0.625Z" fill={color} />
1711
</svg>
1812
) : (
1913
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 home은은 color을 black으로, default는 color을 white로)
20-
<svg
21-
xmlns="http://www.w3.org/2000/svg"
22-
width={width || 14}
23-
height={height || 14}
24-
viewBox="1 0 14 14"
25-
fill="none"
26-
>
14+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="1 0 14 14" fill="none">
2715
<path
2816
d="M8 2.6425L11.75 6.0175V11.875H10.25V7.375H5.75V11.875H4.25V6.0175L8 2.6425ZM8 0.625L0.5 7.375H2.75V13.375H7.25V8.875H8.75V13.375H13.25V7.375H15.5L8 0.625Z"
2917
fill={color}

‎src/components/Icons/Like.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Like: React.FC<IconsProps> = ({ isFilled = false, color = '' }) => {
4+
const Like: React.FC<IconsProps> = ({ isFilled = false, color = '', width = '16', height = '14' }) => {
55
return (
66
<>
77
{isFilled ? ( // like-fill.svg (isFilled = true)
8-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
8+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 14" fill="none">
99
<path
1010
d="M8 13.8813L6.9125 12.8913C3.05 9.38877 0.5 7.07877 0.5 4.24377C0.5 1.93377 2.315 0.118774 4.625 0.118774C5.93 0.118774 7.1825 0.726275 8 1.68627C8.8175 0.726275 10.07 0.118774 11.375 0.118774C13.685 0.118774 15.5 1.93377 15.5 4.24377C15.5 7.07877 12.95 9.38877 9.0875 12.8988L8 13.8813Z"
1111
fill={color}
1212
/>
1313
</svg>
1414
) : (
1515
// like.svg
16-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
16+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 14" fill="none">
1717
<path
1818
d="M11.375 0.118774C10.07 0.118774 8.8175 0.726275 8 1.68627C7.1825 0.726275 5.93 0.118774 4.625 0.118774C2.315 0.118774 0.5 1.93377 0.5 4.24377C0.5 7.07877 3.05 9.38877 6.9125 12.8988L8 13.8813L9.0875 12.8913C12.95 9.38877 15.5 7.07877 15.5 4.24377C15.5 1.93377 13.685 0.118774 11.375 0.118774ZM8.075 11.7813L8 11.8563L7.925 11.7813C4.355 8.54877 2 6.41127 2 4.24377C2 2.74377 3.125 1.61877 4.625 1.61877C5.78 1.61877 6.905 2.36127 7.3025 3.38877H8.705C9.095 2.36127 10.22 1.61877 11.375 1.61877C12.875 1.61877 14 2.74377 14 4.24377C14 6.41127 11.645 8.54877 8.075 11.7813Z"
1919
fill="#8E8E8E"

‎src/components/Icons/Message.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const Message: React.FC<IconsProps> = ({ color = '', isFilled = false, width, height }) => {
4+
const Message: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '14', height = '12' }) => {
55
return (
66
<>
77
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 message-fill는 color을 black으로, default는 color을 white로)
8-
<svg
9-
xmlns="http://www.w3.org/2000/svg"
10-
width={width || 14}
11-
height={height || 12}
12-
viewBox="0 0 14 12"
13-
fill="none"
14-
>
8+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 12" fill="none">
159
<path
1610
d="M12.4 0.25H1.6C0.8575 0.25 0.25 0.8575 0.25 1.6V13.75L2.95 11.05H12.4C13.1425 11.05 13.75 10.4425 13.75 9.7V1.6C13.75 0.8575 13.1425 0.25 12.4 0.25Z"
1711
fill={color}
@@ -21,13 +15,7 @@ const Message: React.FC<IconsProps> = ({ color = '', isFilled = false, width, he
2115
</svg>
2216
) : (
2317
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 message는 color을 black으로, default는 color을 #8E8E8E로, default의 message-white는 color을 white로)
24-
<svg
25-
xmlns="http://www.w3.org/2000/svg"
26-
width={width || 14}
27-
height={height || 12}
28-
viewBox="0 0 14 12"
29-
fill="none"
30-
>
18+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 14 12" fill="none">
3119
<path
3220
d="M12.4 0.25H1.6C0.8575 0.25 0.25 0.8575 0.25 1.6V13.75L2.95 11.05H12.4C13.1425 11.05 13.75 10.4425 13.75 9.7V1.6C13.75 0.8575 13.1425 0.25 12.4 0.25ZM12.4 9.7H2.95L1.6 11.05V1.6H12.4V9.7Z"
3321
fill={color}

‎src/components/Icons/MyPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import type { IconsProps } from './dto';
33

4-
const MyPage: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
4+
const MyPage: React.FC<IconsProps> = ({ color = '', isFilled = false, width = '16', height = '16' }) => {
55
return (
66
<>
77
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 my-page-fill은 color을 black으로, default는 color을 white로)
8-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
8+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none">
99
<path
1010
d="M8 1.9C9.16 1.9 10.1 2.84 10.1 4C10.1 5.16 9.16 6.1 8 6.1C6.84 6.1 5.9 5.16 5.9 4C5.9 2.84 6.84 1.9 8 1.9ZM8 10.9C10.97 10.9 14.1 12.36 14.1 13V14.1H1.9V13C1.9 12.36 5.03 10.9 8 10.9ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 9C5.33 9 0 10.34 0 13V16H16V13C16 10.34 10.67 9 8 9Z"
1111
fill={color}
@@ -20,7 +20,7 @@ const MyPage: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
2020
</svg>
2121
) : (
2222
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 my-page는 color을 black으로, default는 color을 #8E8E8E로, default의 my-page-white는 color을 white로)
23-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
23+
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none">
2424
<path
2525
d="M8 1.9C9.16 1.9 10.1 2.84 10.1 4C10.1 5.16 9.16 6.1 8 6.1C6.84 6.1 5.9 5.16 5.9 4C5.9 2.84 6.84 1.9 8 1.9ZM8 10.9C10.97 10.9 14.1 12.36 14.1 13V14.1H1.9V13C1.9 12.36 5.03 10.9 8 10.9ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 9C5.33 9 0 10.34 0 13V16H16V13C16 10.34 10.67 9 8 9Z"
2626
fill={color}

0 commit comments

Comments
 (0)