Merge pull request #28 from Giveth/add-link-icon

Add link icon

package.json

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

src/components/icons/Link/Link.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconLink16 } from './Link16';
+import { IconLink24 } from './Link24';
+import { IconLink32 } from './Link32';
+
+export const IconLink: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconLink16 color={color} />;
+		case '24':
+			return <IconLink24 color={color} />;
+		case '32':
+			return <IconLink32 color={color} />;
+		default:
+			return <IconLink24 size={size} color={color} />;
+	}
+};

src/components/icons/Link/Link16.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconLink16: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M10.5858 6.34315L12.7071 4.22183C13.1714 3.75754 13.7226 3.38924 14.3292 3.13797C14.9358 2.88669 15.586 2.75736 16.2426 2.75736C16.8992 2.75736 17.5494 2.88669 18.156 3.13797C18.7627 3.38924 19.3139 3.75754 19.7782 4.22183C20.2425 4.68612 20.6108 5.23732 20.862 5.84395C21.1133 6.45057 21.2426 7.10075 21.2426 7.75736C21.2426 8.41397 21.1133 9.06415 20.862 9.67078C20.6108 10.2774 20.2425 10.8286 19.7782 11.2929L17.6568 13.4142M13.4142 17.6569L11.2929 19.7782C10.8286 20.2425 10.2774 20.6108 9.67076 20.862C9.06414 21.1133 8.41396 21.2426 7.75735 21.2426C6.43126 21.2426 5.1595 20.7159 4.22181 19.7782C3.28413 18.8405 2.75735 17.5687 2.75735 16.2426C2.75735 14.9166 3.28413 13.6448 4.22181 12.7071L6.34313 10.5858'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M9.17157 14.8284L14.8284 9.17158'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Link/Link24.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconLink24: FC<IIconProps> = ({
+	size = 24,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M10.5858 6.34315L12.7071 4.22183C13.1714 3.75754 13.7226 3.38924 14.3292 3.13797C14.9358 2.88669 15.586 2.75736 16.2426 2.75736C16.8992 2.75736 17.5494 2.88669 18.156 3.13797C18.7627 3.38924 19.3139 3.75754 19.7782 4.22183C20.2425 4.68612 20.6108 5.23732 20.862 5.84395C21.1133 6.45057 21.2426 7.10075 21.2426 7.75736C21.2426 8.41397 21.1133 9.06415 20.862 9.67078C20.6108 10.2774 20.2425 10.8286 19.7782 11.2929L17.6568 13.4142M13.4142 17.6569L11.2929 19.7782C10.8286 20.2425 10.2774 20.6108 9.67076 20.862C9.06414 21.1133 8.41396 21.2426 7.75735 21.2426C6.43126 21.2426 5.1595 20.7159 4.22181 19.7782C3.28413 18.8405 2.75735 17.5687 2.75735 16.2426C2.75735 14.9166 3.28413 13.6448 4.22181 12.7071L6.34313 10.5858'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M9.17157 14.8284L14.8284 9.17158'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Link/Link32.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconLink32: FC<IIconProps> = ({
+	size = 32,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M14.1144 8.45753L16.9428 5.62911C17.5619 5.01005 18.2968 4.51899 19.1056 4.18396C19.9145 3.84892 20.7814 3.67649 21.6569 3.67649C22.5323 3.67649 23.3993 3.84892 24.2081 4.18396C25.0169 4.51899 25.7519 5.01005 26.3709 5.62911C26.99 6.24817 27.481 6.98309 27.8161 7.79193C28.1511 8.60077 28.3235 9.46767 28.3235 10.3432C28.3235 11.2186 28.1511 12.0855 27.8161 12.8944C27.481 13.7032 26.99 14.4381 26.3709 15.0572L23.5425 17.8856M17.8856 23.5425L15.0572 26.3709C14.4381 26.99 13.7032 27.481 12.8944 27.8161C12.0855 28.1511 11.2186 28.3235 10.3432 28.3235C8.57505 28.3235 6.87936 27.6211 5.62911 26.3709C4.37887 25.1207 3.67649 23.425 3.67649 21.6569C3.67649 19.8888 4.37887 18.1931 5.62911 16.9428L8.45754 14.1144'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M12.2288 19.7712L19.7712 12.2288'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/index.ts

@@ -36,6 +36,11 @@ export * from './icons/Menu/Menu16';
 export * from './icons/Menu/Menu24';
 export * from './icons/Menu/Menu32';
 
+export * from './icons/Link/Link';
+export * from './icons/Link/Link16';
+export * from './icons/Link/Link24';
+export * from './icons/Link/Link32';
+
 export * from './icons/Sort/Sort';
 export * from './icons/Sort/Sort16';
 export * from './icons/Sort/Sort24';