Merge pull request #100 from Giveth/fix/add_Telegram_and_WhatsApp_icons

fix: add Telegram & WhatsApp Icons

package.json

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

src/components/index.ts

@@ -62,6 +62,10 @@ export * from './social-icons/Docs/Docs32';
 export * from './social-icons/XSocial/XSocial';
 export * from './social-icons/XSocial/XSocial18';
 export * from './social-icons/XSocial/XSocial24';
+export * from './social-icons/Telegram/Telegram';
+export * from './social-icons/Telegram/Telegram16';
+export * from './social-icons/WhatsApp/WhatsApp';
+export * from './social-icons/WhatsApp/WhatsApp18';
 
 export * from './DataBlock';
 export * from './DataBox';

src/components/social-icons/Telegram/Telegram.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { ISocialIconProps } from '../type';
+import { IconTelegram16 } from './Telegram16';
+
+export const IconTelegram: FC<ISocialIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconTelegram16 color={color} />;
+		default:
+			return <IconTelegram16 size={size} color={color} />;
+	}
+};

src/components/social-icons/Telegram/Telegram16.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { ISocialIconProps } from '../type';
+
+export const IconTelegram16: FC<ISocialIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<g clip-path='url(#clip0_6122_10224)'>
+			<path
+				fill-rule='evenodd'
+				clip-rule='evenodd'
+				d='M-1.48761 6.84883C4.41795 4.27585 8.35592 2.57959 10.3263 1.76003C15.9521 -0.579954 17.1211 -0.986435 17.883 -0.999857C18.0506 -1.00281 18.4253 -0.961277 18.668 -0.764331C18.873 -0.598033 18.9294 -0.373388 18.9563 -0.21572C18.9833 -0.058051 19.0169 0.301123 18.9902 0.58177C18.6854 3.78504 17.3662 11.5585 16.6951 15.1462C16.4111 16.6643 15.852 17.1733 15.3107 17.2231C14.1343 17.3314 13.2409 16.4457 12.1015 15.6988C10.3186 14.53 9.31133 13.8025 7.58067 12.662C5.58058 11.3439 6.87715 10.6195 8.01699 9.43563C8.3153 9.1258 13.4986 4.41117 13.5989 3.98348C13.6115 3.92999 13.6231 3.7306 13.5046 3.62532C13.3862 3.52004 13.2114 3.55604 13.0852 3.58467C12.9064 3.62526 10.0581 5.50789 4.54035 9.23255C3.73187 9.78772 2.99958 10.0582 2.34347 10.044C1.62016 10.0284 0.228804 9.63507 -0.805526 9.29885C-2.07417 8.88646 -3.08247 8.66842 -2.99467 7.96806C-2.94894 7.60326 -2.44659 7.23019 -1.48761 6.84883Z'
+				fill={color}
+			/>
+		</g>
+		<defs>
+			<clipPath id='clip0_6122_10224'>
+				<rect width={size} height={size} fill='white' />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+

src/components/social-icons/WhatsApp/WhatsApp.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { ISocialIconProps } from '../type';
+import { IconWhatsApp18 } from './WhatsApp18';
+
+export const IconWhatsApp: FC<ISocialIconProps> = ({
+	size = 18,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '18':
+			return <IconWhatsApp18 color={color} />;
+		default:
+			return <IconWhatsApp18 size={size} color={color} />;
+	}
+};

src/components/social-icons/WhatsApp/WhatsApp18.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { ISocialIconProps } from '../type';
+
+export const IconWhatsApp18: FC<ISocialIconProps> = ({
+	size = 18,
+	color = 'currentColor',
+}) => (
+	<svg 
+        width={size}
+        height={size}
+        viewBox="0 0 18 18" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path 
+            d="M16.4557 5.60328C16.0492 4.70492 15.4656 3.89836 14.7246 3.20328C13.9836 2.51475 13.1246 1.97049 12.1672 1.59016C11.1771 1.19672 10.1279 1 9.04591 1C7.96395 1 6.91476 1.19672 5.9246 1.59016C4.96722 1.97049 4.1082 2.5082 3.36722 3.20328C2.62624 3.89836 2.04264 4.70492 1.63608 5.60328C1.21641 6.53443 1 7.53115 1 8.5541C1 10.3443 1.66885 12.0623 2.89508 13.4262L2.23934 17L5.72788 15.4459C6.7705 15.8918 7.87869 16.1148 9.03935 16.1148C10.1213 16.1148 11.1705 15.918 12.1607 15.5246C13.118 15.1443 13.9771 14.6066 14.718 13.9115C15.459 13.2164 16.0426 12.4098 16.4492 11.5115C16.8689 10.5803 17.0853 9.58361 17.0853 8.56066C17.0918 7.53115 16.8754 6.54098 16.4557 5.60328Z" 
+            stroke={color}
+            stroke-width="0.914286"
+        />
+        <path 
+            d="M12.3116 10.0623C11.9706 9.89184 11.7214 9.78692 11.5444 9.72135C11.4329 9.682 11.1706 9.56397 11.0788 9.6361C10.7903 9.87216 10.4821 10.541 10.1542 10.6656C9.34107 10.5082 8.58698 9.95085 7.99681 9.38036C7.73452 9.13118 7.24927 8.42298 7.14436 8.23282C7.12468 8.0361 7.47877 7.7738 7.55746 7.62298C7.96402 7.16397 7.65583 6.87544 7.60337 6.68528C7.51157 6.48856 7.3542 6.13446 7.21649 5.84594C7.09846 5.65577 7.07221 5.3738 6.86237 5.26889C5.97057 4.80987 5.45912 5.7279 5.24928 6.20659C3.98371 9.25577 11.5903 15.059 13.1378 11.059C13.2165 10.7115 13.1837 10.5804 13.0657 10.423C12.8296 10.259 12.5542 10.1869 12.3116 10.0623Z" 
+            stroke={color}
+            stroke-width="0.914286"
+        />
+    </svg>
+);
+
+