Merge pull request #74 from Giveth/update-alert-circle-icon

Update alert circle icon

package.json

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

src/components/icons/AlertCircle/AlertCircle.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconAlertCircle16 } from './AlertCircle16';
+import { IconAlertCircle24 } from './AlertCircle24';
+import { IconAlertCircle32 } from './AlertCircle32';
+
+export const IconAlertCircle: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconAlertCircle16 color={color} />;
+		case '24':
+			return <IconAlertCircle24 color={color} />;
+		case '32':
+			return <IconAlertCircle32 color={color} />;
+		default:
+			return <IconAlertCircle24 size={size} color={color} />;
+	}
+};

src/components/icons/AlertCircle/AlertCircle16.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconAlertCircle16: 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='M7.99998 5.33331V7.99998M7.99998 10.6666H8.00665M14.6666 7.99998C14.6666 11.6819 11.6819 14.6666 7.99998 14.6666C4.31808 14.6666 1.33331 11.6819 1.33331 7.99998C1.33331 4.31808 4.31808 1.33331 7.99998 1.33331C11.6819 1.33331 14.6666 4.31808 14.6666 7.99998Z'
+			stroke={color}
+			strokeWidth='1.1'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/AlertCircle/AlertCircle24.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconAlertCircle24: 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='M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/AlertCircle/AlertCircle32.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconAlertCircle32: 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='M16 10.6667V16M16 21.3334H16.0133M29.3333 16C29.3333 23.3638 23.3638 29.3334 16 29.3334C8.6362 29.3334 2.66667 23.3638 2.66667 16C2.66667 8.63622 8.6362 2.66669 16 2.66669C23.3638 2.66669 29.3333 8.63622 29.3333 16Z'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/index.ts

@@ -155,8 +155,12 @@ export * from './icons/giv-economy/Farm';
 export * from './icons/giv-economy/Garden';
 export * from './icons/giv-economy/Stream';
 
+export * from './icons/AlertCircle/AlertCircle';
+export * from './icons/AlertCircle/AlertCircle16';
+export * from './icons/AlertCircle/AlertCircle24';
+export * from './icons/AlertCircle/AlertCircle32';
+
 export * from './icons/Archiving';
-export * from './icons/AlertCircle';
 export * from './icons/AlertTriangle';
 export * from './icons/Bell';
 export * from './icons/BellOutline';

src/stories/icons/IconAlertCircle.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { IconAlertCircle } from '../../components/icons/AlertCircle/AlertCircle';
+
+export default {
+	title: 'Example/Icons/AlertCircle',
+	component: IconAlertCircle,
+} as ComponentMeta<typeof IconAlertCircle>;
+
+const Template: ComponentStory<typeof IconAlertCircle> = args => (
+	<IconAlertCircle {...args} />
+);
+
+export const ArrowLeft = Template.bind({});
+ArrowLeft.storyName = 'AlertCircle';
+ArrowLeft.args = {
+	color: 'white',
+	size: 32,
+};