Merge pull request #56 from Giveth/add/dots-icon

fix: add Dots icon

package.json

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

src/components/icons/Dots/Dots.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconDots16 } from './Dots16';
+import { IconDots24 } from './Dots24';
+import { IconDots32 } from './Dots32';
+
+export const IconDots: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconDots16 color={color} />;
+		case '24':
+			return <IconDots24 color={color} />;
+		case '32':
+			return <IconDots32 color={color} />;
+		default:
+			return <IconDots24 size={size} color={color} />;
+	}
+};

src/components/icons/Dots/Dots16.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconDots16: 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='M9.25 3.25C9.25 2.55964 8.69036 2 8 2C7.30964 2 6.75 2.55964 6.75 3.25C6.75 3.94036 7.30964 4.5 8 4.5C8.69036 4.5 9.25 3.94036 9.25 3.25Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M9.25 8C9.25 7.30964 8.69036 6.75 8 6.75C7.30964 6.75 6.75 7.30964 6.75 8C6.75 8.69036 7.30964 9.25 8 9.25C8.69036 9.25 9.25 8.69036 9.25 8Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M9.25 12.75C9.25 12.0596 8.69036 11.5 8 11.5C7.30964 11.5 6.75 12.0596 6.75 12.75C6.75 13.4404 7.30964 14 8 14C8.69036 14 9.25 13.4404 9.25 12.75Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeMiterlimit='10'
+		/>
+	</svg>
+);

src/components/icons/Dots/Dots24.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconDots24: 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='M13.875 4.875C13.875 3.83947 13.0355 3 12 3C10.9645 3 10.125 3.83947 10.125 4.875C10.125 5.91053 10.9645 6.75 12 6.75C13.0355 6.75 13.875 5.91053 13.875 4.875Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M13.875 12C13.875 10.9645 13.0355 10.125 12 10.125C10.9645 10.125 10.125 10.9645 10.125 12C10.125 13.0355 10.9645 13.875 12 13.875C13.0355 13.875 13.875 13.0355 13.875 12Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M13.875 19.125C13.875 18.0895 13.0355 17.25 12 17.25C10.9645 17.25 10.125 18.0895 10.125 19.125C10.125 20.1605 10.9645 21 12 21C13.0355 21 13.875 20.1605 13.875 19.125Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='1.5'
+			strokeMiterlimit='10'
+		/>
+	</svg>
+);

src/components/icons/Dots/Dots32.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconDots32: 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='M18.5 6.5C18.5 5.11929 17.3807 4 16 4C14.6193 4 13.5 5.11929 13.5 6.5C13.5 7.88071 14.6193 9 16 9C17.3807 9 18.5 7.88071 18.5 6.5Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='2'
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M18.5 16C18.5 14.6193 17.3807 13.5 16 13.5C14.6193 13.5 13.5 14.6193 13.5 16C13.5 17.3807 14.6193 18.5 16 18.5C17.3807 18.5 18.5 17.3807 18.5 16Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='2'
+			strokeMiterlimit='10'
+		/>
+		<path
+			d='M18.5 25.5C18.5 24.1193 17.3807 23 16 23C14.6193 23 13.5 24.1193 13.5 25.5C13.5 26.8807 14.6193 28 16 28C17.3807 28 18.5 26.8807 18.5 25.5Z'
+			fill='#1D1E1F'
+			stroke={color}
+			strokeWidth='2'
+			strokeMiterlimit='10'
+		/>
+	</svg>
+);

src/components/index.ts

@@ -96,6 +96,11 @@ export * from './icons/Options/Options16';
 export * from './icons/Options/Options24';
 export * from './icons/Options/Options32';
 
+export * from './icons/Dots/Dots';
+export * from './icons/Dots/Dots16';
+export * from './icons/Dots/Dots24';
+export * from './icons/Dots/Dots32';
+
 export * from './icons/arrowCircles/ArrowCircleBottom';
 export * from './icons/arrowCircles/ArrowCircleLeft';
 export * from './icons/arrowCircles/ArrowCircleRight';