Merge pull request #87 from Giveth/add-new-icons

Add new icons

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.7",
+	"version": "1.11.8",
 	"files": [
 		"/lib"
 	],

src/components/icons/Flag/Flag.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconFlag16 } from './Flag16';
+import { IconFlag24 } from './Flag24';
+import { IconFlag32 } from './Flag32';
+
+export const IconFlag: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconFlag16 color={color} />;
+		case '24':
+			return <IconFlag24 color={color} />;
+		case '32':
+			return <IconFlag32 color={color} />;
+		default:
+			return <IconFlag24 size={size} color={color} />;
+	}
+};

src/components/icons/Flag/Flag16.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconFlag16: 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='M2.66669 10C2.66669 10 3.33335 9.33334 5.33335 9.33334C7.33335 9.33334 8.66669 10.6667 10.6667 10.6667C12.6667 10.6667 13.3334 10 13.3334 10V2.00001C13.3334 2.00001 12.6667 2.66668 10.6667 2.66668C8.66669 2.66668 7.33335 1.33334 5.33335 1.33334C3.33335 1.33334 2.66669 2.00001 2.66669 2.00001V10Z'
+			stroke={color}
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M2.66669 14.6667V10'
+			stroke={color}
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Flag/Flag24.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconFlag24: 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='M4 15C4 15 5 14 8 14C11 14 13 16 16 16C19 16 20 15 20 15V3C20 3 19 4 16 4C13 4 11 2 8 2C5 2 4 3 4 3V15Z'
+			stroke={color}
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M4 22V15'
+			stroke={color}
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Flag/Flag32.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconFlag32: 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='M5.33331 20C5.33331 20 6.66665 18.6667 10.6666 18.6667C14.6666 18.6667 17.3333 21.3333 21.3333 21.3333C25.3333 21.3333 26.6666 20 26.6666 20V4.00001C26.6666 4.00001 25.3333 5.33334 21.3333 5.33334C17.3333 5.33334 14.6666 2.66667 10.6666 2.66667C6.66665 2.66667 5.33331 4.00001 5.33331 4.00001V20Z'
+			stroke={color}
+			stroke-width='2'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M5.33331 29.3333V20'
+			stroke={color}
+			stroke-width='2'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Increase/Increase.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconIncrease16 } from './Increase16';
+import { IconIncrease24 } from './Increase24';
+import { IconIncrease32 } from './Increase32';
+
+export const IconIncrease: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconIncrease16 color={color} />;
+		case '24':
+			return <IconIncrease24 color={color} />;
+		case '32':
+			return <IconIncrease32 color={color} />;
+		default:
+			return <IconIncrease24 size={size} color={color} />;
+	}
+};

src/components/icons/Increase/Increase16.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconIncrease16: 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='M15.3333 4L8.99999 10.3333L5.66666 7L0.666656 12'
+			stroke='#24262E'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M11.3333 4H15.3333V8'
+			stroke='#24262E'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Increase/Increase24.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconIncrease24: 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='M23 6L13.5 15.5L8.5 10.5L1 18'
+			stroke='#24262E'
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M17 6H23V12'
+			stroke='#24262E'
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Increase/Increase32.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconIncrease32: 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='M30.6667 8L18 20.6667L11.3333 14L1.33334 24'
+			stroke='#24262E'
+			stroke-width='2'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+		<path
+			d='M22.6667 8H30.6667V16'
+			stroke='#24262E'
+			stroke-width='2'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/MessageSquare/MessageSquare.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconMessageSquare16 } from './MessageSquare16';
+import { IconMessageSquare24 } from './MessageSquare24';
+import { IconMessageSquare32 } from './MessageSquare32';
+
+export const IconMessageSquare: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconMessageSquare16 color={color} />;
+		case '24':
+			return <IconMessageSquare24 color={color} />;
+		case '32':
+			return <IconMessageSquare32 color={color} />;
+		default:
+			return <IconMessageSquare24 size={size} color={color} />;
+	}
+};

src/components/icons/MessageSquare/MessageSquare16.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconMessageSquare16: 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='M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z'
+			stroke={color}
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/MessageSquare/MessageSquare24.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconMessageSquare24: 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='M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z'
+			stroke={color}
+			stroke-width='1.5'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/MessageSquare/MessageSquare32.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconMessageSquare32: 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='M28 20C28 20.7072 27.719 21.3855 27.219 21.8856C26.7189 22.3857 26.0406 22.6667 25.3333 22.6667H9.33333L4 28V6.66667C4 5.95942 4.28095 5.28115 4.78105 4.78105C5.28115 4.28095 5.95942 4 6.66667 4H25.3333C26.0406 4 26.7189 4.28095 27.219 4.78105C27.719 5.28115 28 5.95942 28 6.66667V20Z'
+			stroke={color}
+			stroke-width='2'
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Passport/Passport.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconPassport16 } from './Passport16';
+import { IconPassport24 } from './Passport24';
+import { IconPassport32 } from './Passport32';
+
+export const IconPassport: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconPassport16 color={color} />;
+		case '24':
+			return <IconPassport24 color={color} />;
+		case '32':
+			return <IconPassport32 color={color} />;
+		default:
+			return <IconPassport24 size={size} color={color} />;
+	}
+};