Merge pull request #106 from Giveth/fix-warning-icon

fix: added new svg icon for warning

package.json

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

src/components/icons/Warning/Warning.tsx

@@ -3,6 +3,7 @@ import { IIconProps } from '../type';
 import { IconWarning16 } from './Warning16';
 import { IconWarning24 } from './Warning24';
 import { IconWarning32 } from './Warning32';
+import { IconWarning64 } from './Warning64';
 
 export const IconWarning: FC<IIconProps> = ({
 	size = 16,
@@ -15,6 +16,8 @@ export const IconWarning: FC<IIconProps> = ({
 			return <IconWarning24 color={color} />;
 		case '32':
 			return <IconWarning32 color={color} />;
+		case '64':
+			return <IconWarning64 color={color} />;
 		default:
 			return <IconWarning24 size={size} color={color} />;
 	}

src/components/icons/Warning/Warning16.tsx

@@ -8,15 +8,15 @@ export const IconWarning16: FC<IIconProps> = ({
 	<svg
 		width={size}
 		height={size}
-		viewBox='0 0 16 16'
+		viewBox='0 0 18 16'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
 	>
 		<path
-			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			d='M9.03516 5.60436V8.66714M9.03516 11.7299H9.04281M7.72582 1.66869L1.24038 12.4956C1.10666 12.7272 1.03591 12.9897 1.03516 13.2571C1.03441 13.5245 1.10369 13.7874 1.23611 14.0198C1.36853 14.2521 1.55946 14.4457 1.78992 14.5813C2.02038 14.7169 2.28233 14.7898 2.54972 14.7927H15.5206C15.788 14.7898 16.0499 14.7169 16.2804 14.5813C16.5108 14.4457 16.7018 14.2521 16.8342 14.0198C16.9666 13.7874 17.0359 13.5245 17.0351 13.2571C17.0344 12.9897 16.9636 12.7272 16.8299 12.4956L10.3445 1.66869C10.208 1.44365 10.0158 1.2576 9.78645 1.12848C9.55711 0.999353 9.29835 0.931519 9.03516 0.931519C8.77196 0.931519 8.5132 0.999353 8.28386 1.12848C8.05451 1.2576 7.86232 1.44365 7.72582 1.66869Z'
 			stroke={color}
-			stroke-linecap='round'
-			stroke-linejoin='round'
+			strokeLinecap='round'
+			strokeLinejoin='round'
 		/>
 	</svg>
 );

src/components/icons/Warning/Warning24.tsx

@@ -8,15 +8,15 @@ export const IconWarning24: FC<IIconProps> = ({
 	<svg
 		width={size}
 		height={size}
-		viewBox='0 0 24 24'
+		viewBox='0 0 26 23'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
 	>
 		<path
-			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			d='M13 8.00926V12.6034M13 17.1976H13.0115M11.036 2.10575L1.30783 18.3462C1.10726 18.6935 1.00113 19.0873 1.00001 19.4884C0.998886 19.8895 1.10281 20.2839 1.30143 20.6324C1.50005 20.9808 1.78646 21.2712 2.13215 21.4746C2.47784 21.678 2.87077 21.7874 3.27184 21.7918H22.7282C23.1292 21.7874 23.5222 21.678 23.8678 21.4746C24.2135 21.2712 24.4999 20.9808 24.6986 20.6324C24.8972 20.2839 25.0011 19.8895 25 19.4884C24.9989 19.0873 24.8927 18.6935 24.6922 18.3462L14.964 2.10575C14.7593 1.7682 14.471 1.48912 14.1269 1.29544C13.7829 1.10175 13.3948 1 13 1C12.6052 1 12.2171 1.10175 11.8731 1.29544C11.529 1.48912 11.2407 1.7682 11.036 2.10575Z'
 			stroke={color}
-			stroke-linecap='round'
-			stroke-linejoin='round'
+			strokeLinecap='round'
+			strokeLinejoin='round'
 		/>
 	</svg>
 );

src/components/icons/Warning/Warning32.tsx

@@ -8,15 +8,15 @@ export const IconWarning32: FC<IIconProps> = ({
 	<svg
 		width={size}
 		height={size}
-		viewBox='0 0 32 32'
+		viewBox='0 0 34 30'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
 	>
 		<path
-			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			d='M17 10.3457V16.4712M17 22.5968H17.0153M14.3813 2.47434L1.41044 24.1282C1.14301 24.5913 1.00151 25.1164 1.00001 25.6512C0.998515 26.186 1.13707 26.7119 1.40191 27.1765C1.66674 27.6411 2.04861 28.0283 2.50953 28.2995C2.97045 28.5707 3.49436 28.7165 4.02912 28.7224H29.9709C30.5056 28.7165 31.0295 28.5707 31.4905 28.2995C31.9514 28.0283 32.3333 27.6411 32.5981 27.1765C32.8629 26.7119 33.0015 26.186 33 25.6512C32.9985 25.1164 32.857 24.5913 32.5896 24.1282L19.6187 2.47434C19.3457 2.02427 18.9613 1.65216 18.5026 1.39392C18.0439 1.13567 17.5264 1 17 1C16.4736 1 15.9561 1.13567 15.4974 1.39392C15.0387 1.65216 14.6543 2.02427 14.3813 2.47434Z'
 			stroke={color}
-			stroke-linecap='round'
-			stroke-linejoin='round'
+			strokeLinecap='round'
+			strokeLinejoin='round'
 		/>
 	</svg>
 );

src/components/icons/Warning/Warning64.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconWarning64: FC<IIconProps> = ({
+	size = 64,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 66 57'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M33 19.6914V31.9425M33 44.1936H33.0306M27.7626 3.94867L1.82088 47.2564C1.28602 48.1827 1.00302 49.2328 1.00002 50.3024C0.997029 51.372 1.27415 52.4237 1.80381 53.3529C2.33348 54.2822 3.09722 55.0565 4.01907 55.599C4.94091 56.1414 5.98871 56.433 7.05824 56.4447H58.9418C60.0113 56.433 61.0591 56.1414 61.9809 55.599C62.9028 55.0565 63.6665 54.2822 64.1962 53.3529C64.7258 52.4237 65.003 51.372 65 50.3024C64.997 49.2328 64.714 48.1827 64.1791 47.2564L38.2374 3.94867C37.6914 3.04854 36.9226 2.30433 36.0052 1.78783C35.0878 1.27134 34.0528 1 33 1C31.9472 1 30.9122 1.27134 29.9948 1.78783C29.0774 2.30433 28.3086 3.04854 27.7626 3.94867Z'
+			stroke={color}
+			strokeLinecap='round'
+			strokeLinejoin='round'
+		/>
+	</svg>
+);

src/components/icons/index.tsx

@@ -501,3 +501,4 @@ export * from './Warning/Warning';
 export * from './Warning/Warning16';
 export * from './Warning/Warning24';
 export * from './Warning/Warning32';
+export * from './Warning/Warning64';

src/stories/icons/Warning/Warning64.stories.tsx

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