Merge pull request #91 from Giveth/IconGift

Add Icon gift

src/components/icons/Gift/Gift.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconGift24 } from './Gift24';
+import { IconGift32 } from './Gift32';
+import { IconGift16 } from './Gift16';
+
+export const IconGift: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconGift16 color={color} />;
+		case '24':
+			return <IconGift24 color={color} />;
+		case '32':
+			return <IconGift32 color={color} />;
+		default:
+			return <IconGift32 size={size} color={color} />;
+	}
+};

src/components/icons/Gift/Gift16.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconGift16: FC<IIconProps> = ({ color = 'currentColor' }) => (
+	<svg
+		width='16'
+		height='16'
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<g clipPath='url(#clip0_4673_63630)'>
+			<path
+				d='M13.3333 8V14.6667H2.66667V8'
+				stroke={color}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M14.6667 4.66666H1.33333V7.99999H14.6667V4.66666Z'
+				stroke={color}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M8 14.6667V4.66666'
+				stroke={color}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M7.99999 4.66666H4.99999C4.55797 4.66666 4.13404 4.49107 3.82148 4.17851C3.50892 3.86595 3.33333 3.44202 3.33333 2.99999C3.33333 2.55797 3.50892 2.13404 3.82148 1.82148C4.13404 1.50892 4.55797 1.33333 4.99999 1.33333C7.33333 1.33333 7.99999 4.66666 7.99999 4.66666Z'
+				stroke={color}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+			<path
+				d='M8 4.66666H11C11.442 4.66666 11.866 4.49107 12.1785 4.17851C12.4911 3.86595 12.6667 3.44202 12.6667 2.99999C12.6667 2.55797 12.4911 2.13404 12.1785 1.82148C11.866 1.50892 11.442 1.33333 11 1.33333C8.66667 1.33333 8 4.66666 8 4.66666Z'
+				stroke={color}
+				strokeLinecap='round'
+				strokeLinejoin='round'
+			/>
+		</g>
+		<defs>
+			<clipPath id='clip0_4673_63630'>
+				<rect width='16' height='16' fill='white' />
+			</clipPath>
+		</defs>
+	</svg>
+);

src/components/icons/Gift/Gift24.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconGift24: FC<IIconProps> = ({ color = 'currentColor' }) => (
+	<svg
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M20 12V22H4V12'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M22 7H2V12H22V7Z'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M12 22V7'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M12 7H7.5C6.83696 7 6.20107 6.73661 5.73223 6.26777C5.26339 5.79893 5 5.16304 5 4.5C5 3.83696 5.26339 3.20107 5.73223 2.73223C6.20107 2.26339 6.83696 2 7.5 2C11 2 12 7 12 7Z'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M12 7H16.5C17.163 7 17.7989 6.73661 18.2678 6.26777C18.7366 5.79893 19 5.16304 19 4.5C19 3.83696 18.7366 3.20107 18.2678 2.73223C17.7989 2.26339 17.163 2 16.5 2C13 2 12 7 12 7Z'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Gift/Gift32.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconGift32: 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='M26.6667 16V29.3333H5.33333V16'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M29.3333 9.33333H2.66667V16H29.3333V9.33333Z'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M16 29.3333V9.33333'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M16 9.33334H10C9.11595 9.33334 8.2681 8.98215 7.64298 8.35703C7.01786 7.73191 6.66667 6.88406 6.66667 6C6.66667 5.11595 7.01786 4.2681 7.64298 3.64298C8.2681 3.01786 9.11595 2.66667 10 2.66667C14.6667 2.66667 16 9.33334 16 9.33334Z'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+		<path
+			d='M16 9.33334H22C22.8841 9.33334 23.7319 8.98215 24.357 8.35703C24.9821 7.73191 25.3333 6.88406 25.3333 6C25.3333 5.11595 24.9821 4.2681 24.357 3.64298C23.7319 3.01786 22.8841 2.66667 22 2.66667C17.3333 2.66667 16 9.33334 16 9.33334Z'
+			stroke={color}
+			strokeWidth='2'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/index.tsx

@@ -221,6 +221,10 @@ export * from './Forward/Forward32';
 export * from './Fund/Fund';
 export * from './Fund/Fund24';
 export * from './Fund/Fund32';
+export * from './Gift/Gift';
+export * from './Gift/Gift16';
+export * from './Gift/Gift24';
+export * from './Gift/Gift32';
 export * from './GasStation/GasStation';
 export * from './GasStation/GasStation16';
 export * from './GasStation/GasStation24';

src/stories/icons/IconGift.stories.tsx

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