Skip to content

Commit f79f503

Browse files
gustn99gustn99
authored
Merge pull request #103 from oodd-team/feat/OD-140
[OD-140] svg 파일 컴포넌트화
2 parents 77aec7b + 6b627ab commit f79f503

13 files changed

Lines changed: 188 additions & 20 deletions

File tree

‎src/assets/arrow/bottom.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/assets/default/insta.svg‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/assets/default/like-white.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/assets/default/oodd-white.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/assets/default/photo.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/components/Icons/Alarm.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import type { IconsProps } from './dto';
3+
4+
const Alarm: React.FC<IconsProps> = ({ isFilled = false }) => {
5+
return (
6+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
7+
<path
8+
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"
9+
fill="#8E8E8E"
10+
/>
11+
{isFilled && <path d="M11 14.5H2.5V6C2.5 4 5 3 7.5 3C9.5 3 10.6667 5.33333 11 6.5V14.5Z" fill="#8E8E8E" />}
12+
</svg>
13+
);
14+
};
15+
16+
export default Alarm;

‎src/components/Icons/Heart.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import type { IconsProps } from './dto';
3+
4+
const Heart: React.FC<IconsProps> = ({ isFilled = false }) => {
5+
return (
6+
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
7+
<rect x="0.5" y="0.5" width="55" height="55" rx="27.5" fill="white" />
8+
<rect x="0.5" y="0.5" width="55" height="55" rx="27.5" stroke="url(#paint0_linear_3603_1320)" />
9+
<path
10+
d={
11+
isFilled
12+
? 'M28 34.8813L26.9125 33.8913C23.05 30.3888 20.5 28.0788 20.5 25.2438C20.5 22.9338 22.315 21.1188 24.625 21.1188C25.93 21.1188 27.1825 21.7263 28 22.6863C28.8175 21.7263 30.07 21.1188 31.375 21.1188C33.685 21.1188 35.5 22.9338 35.5 25.2438C35.5 28.0788 32.95 30.3888 29.0875 33.8988L28 34.8813Z'
13+
: 'M31.375 21.1187C30.07 21.1187 28.8175 21.7262 28 22.6862C27.1825 21.7262 25.93 21.1187 24.625 21.1187C22.315 21.1187 20.5 22.9337 20.5 25.2437C20.5 28.0787 23.05 30.3887 26.9125 33.8987L28 34.8812L29.0875 33.8912C32.95 30.3887 35.5 28.0787 35.5 25.2437C35.5 22.9337 33.685 21.1187 31.375 21.1187ZM28.075 32.7812L28 32.8562L27.925 32.7812C24.355 29.5487 22 27.4112 22 25.2437C22 23.7437 23.125 22.6187 24.625 22.6187C25.78 22.6187 26.905 23.3612 27.3025 24.3887H28.705C29.095 23.3612 30.22 22.6187 31.375 22.6187C32.875 22.6187 34 23.7437 34 25.2437C34 27.4112 31.645 29.5487 28.075 32.7812Z'
14+
}
15+
fill={isFilled ? '#FF2389' : '#8E8E8E'}
16+
/>
17+
<defs>
18+
<linearGradient
19+
id="paint0_linear_3603_1320"
20+
x1="0.56"
21+
y1="2.7451"
22+
x2="58.788"
23+
y2="6.19466"
24+
gradientUnits="userSpaceOnUse"
25+
>
26+
<stop stopColor="#FF2389" />
27+
<stop offset="1" stopColor="#F27575" />
28+
</linearGradient>
29+
</defs>
30+
</svg>
31+
);
32+
};
33+
34+
export default Heart;

‎src/components/Icons/Home.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import type { IconsProps } from './dto';
3+
4+
const Home: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
5+
return (
6+
<>
7+
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 home-fill는 color을 black으로, default는 color을 white로)
8+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="1 0 14 14" fill="none">
9+
<path d="M8 2.6425L11.75 6.0175V11.875H10.25V7.375H5.75V11.875H4.25V6.0175L8 2.6425Z" fill={color} />
10+
<path d="M8 0.625L0.5 7.375H2.75V13.375H7.25V8.875H8.75V13.375H13.25V7.375H15.5L8 0.625Z" fill={color} />
11+
</svg>
12+
) : (
13+
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 home은은 color을 black으로, default는 color을 white로)
14+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="1 0 14 14" fill="none">
15+
<path
16+
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"
17+
fill={color}
18+
/>
19+
</svg>
20+
)}
21+
</>
22+
);
23+
};
24+
25+
export default Home;

‎src/components/Icons/Like.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import type { IconsProps } from './dto';
3+
4+
const Like: React.FC<IconsProps> = ({ isFilled = false, color = '' }) => {
5+
return (
6+
<>
7+
{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">
9+
<path
10+
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"
11+
fill={color}
12+
/>
13+
</svg>
14+
) : (
15+
// like.svg
16+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none">
17+
<path
18+
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"
19+
fill="#8E8E8E"
20+
/>
21+
</svg>
22+
)}
23+
</>
24+
);
25+
};
26+
27+
export default Like;

‎src/components/Icons/Message.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import type { IconsProps } from './dto';
3+
4+
const Message: React.FC<IconsProps> = ({ color = '', isFilled = false }) => {
5+
return (
6+
<>
7+
{isFilled ? ( // isFilled가 true일 때 원하는 색 사용 (desktopNavBar의 message-fill는 color을 black으로, default는 color을 white로)
8+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
9+
<path
10+
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"
11+
fill={color}
12+
/>
13+
14+
<path d="M12.2 1.8H1.8V11.4H2.8L3.4 10.8H12.2V1.8Z" fill={color} />
15+
</svg>
16+
) : (
17+
// isFilled가 false일 때 원하는 색 사용 (desktopNavBar의 message는 color을 black으로, default는 color을 #8E8E8E로, default의 message-white는 color을 white로)
18+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
19+
<path
20+
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"
21+
fill={color}
22+
/>
23+
</svg>
24+
)}
25+
</>
26+
);
27+
};
28+
29+
export default Message;

0 commit comments

Comments
 (0)