Merge pull request #107 from Giveth/add-bookmark-icon

Add bookmark icon
Giveth · Jun 26, 2024 · 425db1e · 425db1e
2 parents 3eb7f0b + d08aaac
commit 425db1e
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.31",
+	"version": "1.11.32",
 	"files": [
 		"/lib"
 	],

diff --git a/src/components/icons/Bookmark/Bookmark.tsx b/src/components/icons/Bookmark/Bookmark.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconBookmark16 } from './Bookmark16';
+import { IconBookmark24 } from './Bookmark24';
+import { IconBookmark32 } from './Bookmark32';
+
+export const IconBookmark: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconBookmark16 color={color} />;
+		case '24':
+			return <IconBookmark24 color={color} />;
+		case '32':
+			return <IconBookmark32 color={color} />;
+		default:
+			return <IconBookmark24 size={size} color={color} />;
+	}
+};
diff --git a/src/components/icons/Bookmark/Bookmark16.tsx b/src/components/icons/Bookmark/Bookmark16.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmark16: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M12.2457 14.8993L8 10.6536L3.75429 14.8993V2.16214C3.75429 1.88062 3.86612 1.61065 4.06517 1.41159C4.26423 1.21254 4.5342 1.10071 4.81572 1.10071H11.1843C11.4658 1.10071 11.7358 1.21254 11.9348 1.41159C12.1338 1.61065 12.2457 1.88062 12.2457 2.16214V14.8993Z'
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/Bookmark/Bookmark24.tsx b/src/components/icons/Bookmark/Bookmark24.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmark24: FC<IIconProps> = ({
+	size = 24,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M18.3686 22.3489L12 15.9804L5.63143 22.3489V3.24322C5.63143 2.82095 5.79918 2.41599 6.09775 2.1174C6.39634 1.81882 6.8013 1.65108 7.22357 1.65108H16.7764C17.1987 1.65108 17.6037 1.81882 17.9022 2.1174C18.2008 2.41599 18.3686 2.82095 18.3686 3.24322V22.3489Z'
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/Bookmark/Bookmark32.tsx b/src/components/icons/Bookmark/Bookmark32.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmark32: FC<IIconProps> = ({
+	size = 32,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 32 32'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M24.4914 29.7986L16 21.3071L7.50857 29.7986V4.32429C7.50857 3.76126 7.73224 3.22132 8.13033 2.8232C8.52846 2.42509 9.0684 2.20143 9.63143 2.20143H22.3686C22.9316 2.20143 23.4716 2.42509 23.8696 2.8232C24.2677 3.22132 24.4914 3.76126 24.4914 4.32429V29.7986Z'
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/BookmarkFilled/BookmarkFilled.tsx b/src/components/icons/BookmarkFilled/BookmarkFilled.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconBookmarkFilled16 } from './BookmarkFilled16';
+import { IconBookmarkFilled24 } from './BookmarkFilled24';
+import { IconBookmarkFilled32 } from './BookmarkFilled32';
+
+export const IconBookmarkFilled: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconBookmarkFilled16 color={color} />;
+		case '24':
+			return <IconBookmarkFilled24 color={color} />;
+		case '32':
+			return <IconBookmarkFilled32 color={color} />;
+		default:
+			return <IconBookmarkFilled24 size={size} color={color} />;
+	}
+};
diff --git a/src/components/icons/BookmarkFilled/BookmarkFilled16.tsx b/src/components/icons/BookmarkFilled/BookmarkFilled16.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmarkFilled16: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M12.2457 14.8993L8 10.6536L3.75429 14.8993V2.16214C3.75429 1.88062 3.86612 1.61065 4.06517 1.41159C4.26423 1.21254 4.5342 1.10071 4.81571 1.10071H11.1843C11.4658 1.10071 11.7358 1.21254 11.9348 1.41159C12.1338 1.61065 12.2457 1.88062 12.2457 2.16214V14.8993Z'
+			fill={color}
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/BookmarkFilled/BookmarkFilled24.tsx b/src/components/icons/BookmarkFilled/BookmarkFilled24.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmarkFilled24: FC<IIconProps> = ({
+	size = 24,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M18.3686 22.3489L12 15.9804L5.63143 22.3489V3.24322C5.63143 2.82095 5.79918 2.41599 6.09775 2.1174C6.39634 1.81882 6.8013 1.65108 7.22357 1.65108H16.7764C17.1987 1.65108 17.6037 1.81882 17.9022 2.1174C18.2008 2.41599 18.3686 2.82095 18.3686 3.24322V22.3489Z'
+			fill={color}
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/BookmarkFilled/BookmarkFilled32.tsx b/src/components/icons/BookmarkFilled/BookmarkFilled32.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconBookmarkFilled32: FC<IIconProps> = ({
+	size = 32,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 32 32'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M24.4914 29.7986L16 21.3071L7.50857 29.7986V4.32429C7.50857 3.76126 7.73224 3.22132 8.13033 2.8232C8.52846 2.42509 9.0684 2.20143 9.63143 2.20143H22.3686C22.9316 2.20143 23.4716 2.42509 23.8696 2.8232C24.2677 3.22132 24.4914 3.76126 24.4914 4.32429V29.7986Z'
+			fill={color}
+			stroke={color}
+			strokeWidth='1.71'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -66,6 +66,14 @@ export * from './Backward/Backward';
 export * from './Backward/Backward16';
 export * from './Backward/Backward24';
 export * from './Backward/Backward32';
+export * from './Bookmark/Bookmark';
+export * from './Bookmark/Bookmark16';
+export * from './Bookmark/Bookmark24';
+export * from './Bookmark/Bookmark32';
+export * from './BookmarkFilled/BookmarkFilled';
+export * from './BookmarkFilled/BookmarkFilled16';
+export * from './BookmarkFilled/BookmarkFilled24';
+export * from './BookmarkFilled/BookmarkFilled32';
 export * from './BulbOff/BulbOff';
 export * from './BulbOff/BulbOff16';
 export * from './BulbOff/BulbOff24';

diff --git a/src/components/social-icons/WhatsApp/WhatsApp18.tsx b/src/components/social-icons/WhatsApp/WhatsApp18.tsx
@@ -5,24 +5,22 @@ export const IconWhatsApp18: FC<ISocialIconProps> = ({
 	size = 18,
 	color = 'currentColor',
 }) => (
-	<svg 
-        width={size}
-        height={size}
-        viewBox="0 0 18 18" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path 
-            d="M16.4557 5.60328C16.0492 4.70492 15.4656 3.89836 14.7246 3.20328C13.9836 2.51475 13.1246 1.97049 12.1672 1.59016C11.1771 1.19672 10.1279 1 9.04591 1C7.96395 1 6.91476 1.19672 5.9246 1.59016C4.96722 1.97049 4.1082 2.5082 3.36722 3.20328C2.62624 3.89836 2.04264 4.70492 1.63608 5.60328C1.21641 6.53443 1 7.53115 1 8.5541C1 10.3443 1.66885 12.0623 2.89508 13.4262L2.23934 17L5.72788 15.4459C6.7705 15.8918 7.87869 16.1148 9.03935 16.1148C10.1213 16.1148 11.1705 15.918 12.1607 15.5246C13.118 15.1443 13.9771 14.6066 14.718 13.9115C15.459 13.2164 16.0426 12.4098 16.4492 11.5115C16.8689 10.5803 17.0853 9.58361 17.0853 8.56066C17.0918 7.53115 16.8754 6.54098 16.4557 5.60328Z" 
-            stroke={color}
-            stroke-width="0.914286"
-        />
-        <path 
-            d="M12.3116 10.0623C11.9706 9.89184 11.7214 9.78692 11.5444 9.72135C11.4329 9.682 11.1706 9.56397 11.0788 9.6361C10.7903 9.87216 10.4821 10.541 10.1542 10.6656C9.34107 10.5082 8.58698 9.95085 7.99681 9.38036C7.73452 9.13118 7.24927 8.42298 7.14436 8.23282C7.12468 8.0361 7.47877 7.7738 7.55746 7.62298C7.96402 7.16397 7.65583 6.87544 7.60337 6.68528C7.51157 6.48856 7.3542 6.13446 7.21649 5.84594C7.09846 5.65577 7.07221 5.3738 6.86237 5.26889C5.97057 4.80987 5.45912 5.7279 5.24928 6.20659C3.98371 9.25577 11.5903 15.059 13.1378 11.059C13.2165 10.7115 13.1837 10.5804 13.0657 10.423C12.8296 10.259 12.5542 10.1869 12.3116 10.0623Z" 
-            stroke={color}
-            stroke-width="0.914286"
-        />
-    </svg>
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 18 18'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M16.4557 5.60328C16.0492 4.70492 15.4656 3.89836 14.7246 3.20328C13.9836 2.51475 13.1246 1.97049 12.1672 1.59016C11.1771 1.19672 10.1279 1 9.04591 1C7.96395 1 6.91476 1.19672 5.9246 1.59016C4.96722 1.97049 4.1082 2.5082 3.36722 3.20328C2.62624 3.89836 2.04264 4.70492 1.63608 5.60328C1.21641 6.53443 1 7.53115 1 8.5541C1 10.3443 1.66885 12.0623 2.89508 13.4262L2.23934 17L5.72788 15.4459C6.7705 15.8918 7.87869 16.1148 9.03935 16.1148C10.1213 16.1148 11.1705 15.918 12.1607 15.5246C13.118 15.1443 13.9771 14.6066 14.718 13.9115C15.459 13.2164 16.0426 12.4098 16.4492 11.5115C16.8689 10.5803 17.0853 9.58361 17.0853 8.56066C17.0918 7.53115 16.8754 6.54098 16.4557 5.60328Z'
+			stroke={color}
+			strokeWidth='0.914286'
+		/>
+		<path
+			d='M12.3116 10.0623C11.9706 9.89184 11.7214 9.78692 11.5444 9.72135C11.4329 9.682 11.1706 9.56397 11.0788 9.6361C10.7903 9.87216 10.4821 10.541 10.1542 10.6656C9.34107 10.5082 8.58698 9.95085 7.99681 9.38036C7.73452 9.13118 7.24927 8.42298 7.14436 8.23282C7.12468 8.0361 7.47877 7.7738 7.55746 7.62298C7.96402 7.16397 7.65583 6.87544 7.60337 6.68528C7.51157 6.48856 7.3542 6.13446 7.21649 5.84594C7.09846 5.65577 7.07221 5.3738 6.86237 5.26889C5.97057 4.80987 5.45912 5.7279 5.24928 6.20659C3.98371 9.25577 11.5903 15.059 13.1378 11.059C13.2165 10.7115 13.1837 10.5804 13.0657 10.423C12.8296 10.259 12.5542 10.1869 12.3116 10.0623Z'
+			stroke={color}
+			strokeWidth='0.914286'
+		/>
+	</svg>
 );
-
-