Skip to content

Commit 0a1e1e7

Browse files
aminlatifiaminlatifi
authored
Merge pull request #42 from Giveth/add-share-and-heart-icons
Add share and heart icons
2 parents 1c52b65 + 6da4978 commit 0a1e1e7

15 files changed

+269
-148
lines changed

‎src/components/icons/Heart.tsx

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

‎src/components/icons/Heart/Heart.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
import { IconHeart16 } from './Heart16';
4+
import { IconHeart24 } from './Heart24';
5+
import { IconHeart32 } from './Heart32';
6+
7+
export const IconHeart: FC<IIconProps> = ({
8+
size = 16,
9+
color = 'currentColor',
10+
}) => {
11+
switch (size.toString()) {
12+
case '16':
13+
return <IconHeart16 color={color} />;
14+
case '24':
15+
return <IconHeart24 color={color} />;
16+
case '32':
17+
return <IconHeart32 color={color} />;
18+
default:
19+
return <IconHeart24 size={size} color={color} />;
20+
}
21+
};

‎src/components/icons/Heart/Heart16.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeart16: FC<IIconProps> = ({
5+
size = 16,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M13.8933 3.07333C13.5528 2.73267 13.1485 2.46243 12.7036 2.27805C12.2586 2.09368 11.7817 1.99878 11.3 1.99878C10.8183 1.99878 10.3414 2.09368 9.89643 2.27805C9.45146 2.46243 9.04717 2.73267 8.70667 3.07333L8 3.78L7.29333 3.07333C6.60554 2.38554 5.67269 1.99914 4.7 1.99914C3.72731 1.99914 2.79446 2.38554 2.10666 3.07333C1.41887 3.76112 1.03247 4.69397 1.03247 5.66666C1.03247 6.63935 1.41887 7.5722 2.10666 8.26L2.81333 8.96666L8 14.1533L13.1867 8.96666L13.8933 8.26C14.234 7.91949 14.5042 7.51521 14.6886 7.07023C14.873 6.62526 14.9679 6.14832 14.9679 5.66666C14.9679 5.185 14.873 4.70807 14.6886 4.26309C14.5042 3.81812 14.234 3.41383 13.8933 3.07333Z'
16+
fill={color}
17+
stroke={color}
18+
strokeWidth='1.5'
19+
strokeLinecap='round'
20+
strokeLinejoin='round'
21+
/>
22+
</svg>
23+
);

‎src/components/icons/Heart/Heart24.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeart24: FC<IIconProps> = ({
5+
size = 24,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M20.84 4.60999C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.60999L12 5.66999L10.94 4.60999C9.90831 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.60999C2.1283 5.64169 1.54871 7.04096 1.54871 8.49999C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7564 11.2728 22.0329 10.6054C22.3095 9.93789 22.4518 9.22248 22.4518 8.49999C22.4518 7.77751 22.3095 7.0621 22.0329 6.39464C21.7564 5.72718 21.351 5.12075 20.84 4.60999Z'
16+
fill={color}
17+
stroke={color}
18+
strokeWidth='1.5'
19+
strokeLinecap='round'
20+
strokeLinejoin='round'
21+
/>
22+
</svg>
23+
);

‎src/components/icons/Heart/Heart32.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeart32: FC<IIconProps> = ({
5+
size = 32,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M27.7867 6.14666C27.1057 5.46533 26.2971 4.92485 25.4071 4.5561C24.5172 4.18735 23.5633 3.99756 22.6 3.99756C21.6367 3.99756 20.6828 4.18735 19.7929 4.5561C18.9029 4.92485 18.0943 5.46533 17.4133 6.14666L16 7.55999L14.5867 6.14666C13.2111 4.77107 11.3454 3.99827 9.4 3.99827C7.45462 3.99827 5.58892 4.77107 4.21333 6.14666C2.83774 7.52225 2.06494 9.38795 2.06494 11.3333C2.06494 13.2787 2.83774 15.1444 4.21333 16.52L5.62666 17.9333L16 28.3067L26.3733 17.9333L27.7867 16.52C28.468 15.839 29.0085 15.0304 29.3772 14.1405C29.746 13.2505 29.9358 12.2966 29.9358 11.3333C29.9358 10.37 29.746 9.41613 29.3772 8.52619C29.0085 7.63624 28.468 6.82767 27.7867 6.14666Z'
16+
fill={color}
17+
stroke={color}
18+
strokeWidth='2'
19+
strokeLinecap='round'
20+
strokeLinejoin='round'
21+
/>
22+
</svg>
23+
);

‎src/components/icons/HeartOutline.tsx

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

‎src/components/icons/HeartOutline/HeartOutline.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
import { IconHeartOutline16 } from './HeartOutline16';
4+
import { IconHeartOutline24 } from './HeartOutline24';
5+
import { IconHeartOutline32 } from './HeartOutline32';
6+
7+
export const IconHeartOutline: FC<IIconProps> = ({
8+
size = 16,
9+
color = 'currentColor',
10+
}) => {
11+
switch (size.toString()) {
12+
case '16':
13+
return <IconHeartOutline16 color={color} />;
14+
case '24':
15+
return <IconHeartOutline24 color={color} />;
16+
case '32':
17+
return <IconHeartOutline32 color={color} />;
18+
default:
19+
return <IconHeartOutline24 size={size} color={color} />;
20+
}
21+
};

‎src/components/icons/HeartOutline/HeartOutline16.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeartOutline16: FC<IIconProps> = ({
5+
size = 16,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M13.8933 3.07333C13.5528 2.73267 13.1485 2.46243 12.7036 2.27805C12.2586 2.09368 11.7817 1.99878 11.3 1.99878C10.8183 1.99878 10.3414 2.09368 9.89643 2.27805C9.45146 2.46243 9.04717 2.73267 8.70667 3.07333L8 3.78L7.29333 3.07333C6.60554 2.38554 5.67269 1.99914 4.7 1.99914C3.72731 1.99914 2.79446 2.38554 2.10666 3.07333C1.41887 3.76112 1.03247 4.69397 1.03247 5.66666C1.03247 6.63935 1.41887 7.5722 2.10666 8.26L2.81333 8.96666L8 14.1533L13.1867 8.96666L13.8933 8.26C14.234 7.91949 14.5042 7.51521 14.6886 7.07023C14.873 6.62526 14.9679 6.14832 14.9679 5.66666C14.9679 5.185 14.873 4.70807 14.6886 4.26309C14.5042 3.81812 14.234 3.41383 13.8933 3.07333V3.07333Z'
16+
stroke={color}
17+
strokeLinecap='round'
18+
strokeLinejoin='round'
19+
/>
20+
</svg>
21+
);

‎src/components/icons/HeartOutline/HeartOutline24.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeartOutline24: FC<IIconProps> = ({
5+
size = 24,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M20.84 4.60999C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.60999L12 5.66999L10.94 4.60999C9.90831 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.60999C2.1283 5.64169 1.54871 7.04096 1.54871 8.49999C1.54871 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7564 11.2728 22.0329 10.6054C22.3095 9.93789 22.4518 9.22248 22.4518 8.49999C22.4518 7.77751 22.3095 7.0621 22.0329 6.39464C21.7564 5.72718 21.351 5.12075 20.84 4.60999V4.60999Z'
16+
stroke={color}
17+
strokeWidth='1.5'
18+
strokeLinecap='round'
19+
strokeLinejoin='round'
20+
/>
21+
</svg>
22+
);

‎src/components/icons/HeartOutline/HeartOutline32.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconHeartOutline32: FC<IIconProps> = ({
5+
size = 32,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M27.7867 6.14666C27.1057 5.46533 26.2971 4.92485 25.4071 4.5561C24.5172 4.18735 23.5633 3.99756 22.6 3.99756C21.6367 3.99756 20.6828 4.18735 19.7929 4.5561C18.9029 4.92485 18.0943 5.46533 17.4133 6.14666L16 7.55999L14.5867 6.14666C13.2111 4.77107 11.3454 3.99827 9.4 3.99827C7.45462 3.99827 5.58892 4.77107 4.21333 6.14666C2.83774 7.52225 2.06494 9.38795 2.06494 11.3333C2.06494 13.2787 2.83774 15.1444 4.21333 16.52L5.62666 17.9333L16 28.3067L26.3733 17.9333L27.7867 16.52C28.468 15.839 29.0085 15.0304 29.3772 14.1405C29.746 13.2505 29.9358 12.2966 29.9358 11.3333C29.9358 10.37 29.746 9.41613 29.3772 8.52619C29.0085 7.63624 28.468 6.82767 27.7867 6.14666V6.14666Z'
16+
stroke={color}
17+
strokeWidth='2'
18+
strokeLinecap='round'
19+
strokeLinejoin='round'
20+
/>
21+
</svg>
22+
);

‎src/components/icons/Share/Share.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
import { IconShare16 } from './Share16';
4+
import { IconShare24 } from './Share24';
5+
import { IconShare32 } from './Share32';
6+
7+
export const IconShare: FC<IIconProps> = ({
8+
size = 16,
9+
color = 'currentColor',
10+
}) => {
11+
switch (size.toString()) {
12+
case '16':
13+
return <IconShare16 color={color} />;
14+
case '24':
15+
return <IconShare24 color={color} />;
16+
case '32':
17+
return <IconShare32 color={color} />;
18+
default:
19+
return <IconShare24 size={size} color={color} />;
20+
}
21+
};

‎src/components/icons/Share/Share16.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconShare16: FC<IIconProps> = ({
5+
size = 16,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M12 10.5C11.7307 10.4999 11.4641 10.5544 11.2164 10.6602C10.9686 10.766 10.7449 10.9209 10.5588 11.1156L5.93378 8.5134C6.02337 8.17697 6.02337 7.82296 5.93378 7.48653L10.5588 4.88434C10.8956 5.23351 11.3481 5.4479 11.8316 5.48736C12.3151 5.52682 12.7965 5.38864 13.1854 5.09869C13.5743 4.80875 13.8442 4.38694 13.9445 3.91229C14.0448 3.43765 13.9685 2.94273 13.7301 2.52025C13.4916 2.09777 13.1073 1.77673 12.6492 1.61726C12.191 1.4578 11.6904 1.47085 11.2412 1.65398C10.7919 1.8371 10.4249 2.17774 10.2088 2.61207C9.99268 3.0464 9.94235 3.54462 10.0672 4.0134L5.44221 6.61559C5.16595 6.32754 4.80982 6.12873 4.41963 6.04474C4.02945 5.96076 3.62306 5.99544 3.25275 6.14431C2.88243 6.29319 2.56513 6.54946 2.34166 6.88016C2.11819 7.21085 1.99878 7.60084 1.99878 7.99996C1.99878 8.39908 2.11819 8.78908 2.34166 9.11977C2.56513 9.45046 2.88243 9.70673 3.25275 9.85561C3.62306 10.0045 4.02945 10.0392 4.41963 9.95518C4.80982 9.8712 5.16595 9.67239 5.44221 9.38434L10.0672 11.9865C9.95998 12.3902 9.98184 12.8174 10.1297 13.208C10.2776 13.5987 10.5441 13.9332 10.8918 14.1647C11.2395 14.3962 11.6509 14.513 12.0684 14.4988C12.4859 14.4846 12.8884 14.34 13.2195 14.0853C13.5506 13.8306 13.7937 13.4787 13.9146 13.0789C14.0355 12.679 14.0282 12.2514 13.8937 11.8559C13.7592 11.4605 13.5042 11.1171 13.1646 10.8739C12.825 10.6307 12.4177 10.4999 12 10.5Z'
16+
fill={color}
17+
/>
18+
</svg>
19+
);

‎src/components/icons/Share/Share24.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { FC } from 'react';
2+
import { IIconProps } from '../type';
3+
4+
export const IconShare24: FC<IIconProps> = ({
5+
size = 24,
6+
color = 'currentColor',
7+
}) => (
8+
<svg
9+
width={size}
10+
height={size}
11+
fill='none'
12+
xmlns='http://www.w3.org/2000/svg'
13+
>
14+
<path
15+
d='M17.9999 15.7499C17.5959 15.7498 17.196 15.8315 16.8244 15.9903C16.4528 16.149 16.1173 16.3814 15.838 16.6734L8.90054 12.7701C9.03493 12.2655 9.03493 11.7344 8.90054 11.2298L15.838 7.32651C16.3432 7.85026 17.022 8.17186 17.7473 8.23104C18.4726 8.29023 19.1946 8.08295 19.778 7.64804C20.3614 7.21312 20.7662 6.58041 20.9166 5.86844C21.067 5.15647 20.9527 4.41409 20.595 3.78037C20.2373 3.14666 19.6609 2.66509 18.9736 2.42589C18.2864 2.18669 17.5355 2.20628 16.8616 2.48097C16.1878 2.75566 15.6372 3.26661 15.3131 3.91811C14.9889 4.5696 14.9134 5.31693 15.1007 6.0201L8.1632 9.92338C7.7488 9.4913 7.2146 9.19309 6.62933 9.06712C6.04405 8.94114 5.43447 8.99315 4.879 9.21647C4.32353 9.43979 3.84758 9.82419 3.51237 10.3202C3.17717 10.8163 2.99805 11.4013 2.99805 11.9999C2.99805 12.5986 3.17717 13.1836 3.51237 13.6797C3.84758 14.1757 4.32353 14.5601 4.879 14.7834C5.43447 15.0067 6.04405 15.0588 6.62933 14.9328C7.2146 14.8068 7.7488 14.5086 8.1632 14.0765L15.1007 17.9798C14.9399 18.5854 14.9726 19.2261 15.1945 19.8121C15.4163 20.398 15.816 20.8999 16.3376 21.2471C16.8591 21.5943 17.4763 21.7696 18.1025 21.7482C18.7287 21.7268 19.3325 21.5099 19.8291 21.1279C20.3258 20.746 20.6904 20.2181 20.8717 19.6183C21.0531 19.0186 21.0421 18.3771 20.8404 17.7839C20.6386 17.1907 20.2562 16.6756 19.7468 16.3108C19.2373 15.946 18.6265 15.7499 17.9999 15.7499Z'
16+
fill={color}
17+
/>
18+
</svg>
19+
);

0 commit comments

Comments
 (0)