Merge pull request #41 from Giveth/add-info-icon

Add info icon

Author: MohammadPCh

package.json

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

src/components/icons/Info/Info.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconInfo16 } from './Info16';
+import { IconInfo24 } from './Info24';
+import { IconInfo32 } from './Info32';
+
+export const IconInfo: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconInfo16 color={color} />;
+		case '24':
+			return <IconInfo24 color={color} />;
+		case '32':
+			return <IconInfo32 color={color} />;
+		default:
+			return <IconInfo24 size={size} color={color} />;
+	}
+};

src/components/icons/Info/Info16.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconInfo16: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z'
+			fill={color}
+		/>
+		<line
+			x1='8'
+			y1='12.5'
+			x2='8'
+			y2='6.5'
+			stroke={color}
+			strokeLinecap='round'
+		/>
+		<circle cx='8' cy='4' r='1' fill={color} />
+	</svg>
+);

src/components/icons/Info/Info24.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconInfo24: FC<IIconProps> = ({
+	size = 24,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21.1667 12C21.1667 17.0967 17.0967 21.1667 12 21.1667C6.89111 21.1667 2.83333 17.0967 2.83333 12C2.83333 6.89111 6.89111 2.83333 12 2.83333C17.0967 2.83333 21.1667 6.89111 21.1667 12Z'
+			fill={color}
+		/>
+		<line
+			x1='12'
+			y1='17.25'
+			x2='12'
+			y2='10.75'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+		/>
+		<circle cx='12' cy='7.75' r='1.25' fill={color} />
+	</svg>
+);

src/components/icons/Info/Info32.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconInfo32: FC<IIconProps> = ({
+	size = 32,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			fillRule='evenodd'
+			clipRule='evenodd'
+			d='M29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16ZM27.05 16C27.05 22.149 22.149 27.05 16 27.05C9.851 27.05 4.95 22.149 4.95 16C4.95 9.851 9.851 4.95 16 4.95C22.149 4.95 27.05 9.851 27.05 16Z'
+			fill={color}
+		/>
+		<path
+			d='M16 22V14'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+		/>
+		<circle cx='16' cy='10.5' r='1.5' fill={color} />
+	</svg>
+);

src/components/index.ts

@@ -31,6 +31,11 @@ export * from './buttonLinks/OulineButtonLink';
 export * from './layout/Container';
 export * from './layout/ContainerFluid';
 
+export * from './icons/Info/Info';
+export * from './icons/Info/Info16';
+export * from './icons/Info/Info24';
+export * from './icons/Info/Info32';
+
 export * from './icons/Menu/Menu';
 export * from './icons/Menu/Menu16';
 export * from './icons/Menu/Menu24';