@digigov/react-icons 2.0.0-6452adf3 → 2.0.0-66d7c5e2

package/src/AccessibilityIcon/config.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface AccessibilityType { }
+export interface AccessibilityType {}
 
-export function accessibility(): React.ReactElement {
+export function accessibility(): React.ReactElement<any> {
   return (
     <>
-      <Base as="title">Μενού Προσβασιμότητας</Base>
-      <Base as="circle" cx="12" cy="3" r="3" />
-      <Base as="path"
+      <IconBase as="title">Μενού Προσβασιμότητας</IconBase>
+      <IconBase as="circle" cx="12" cy="3" r="3" />
+      <IconBase
+        as="path"
         d="M19.76,6.13c-4.94,2.01-10.57,2.01-15.51,0c-0.71-0.3-1.55-0.04-1.98,0.66c-1.41,2.6,3.27,3.76,4.94,4.37
 	c0.4,0.11,0.81,0.2,1.22,0.28c0.56,0.11,0.92,0.67,0.79,1.25c-0.79,3.66-1.96,9.1-1.96,9.1c-0.46,2.27,2.72,3.15,3.39,0.92L12,17.93
 	l1.36,4.78c0.67,2.22,3.85,1.36,3.39-0.92c0,0-1.16-5.4-1.95-9.06c-0.12-0.57,0.22-1.16,0.77-1.27c2.01-0.41,3.94-1.17,5.68-2.31

package/src/AccessibilityIcon/index.test.tsx

@@ -13,16 +13,24 @@ it('renders the AccessibilityIcon with prop size=l', () => {
   expect(render(<AccessibilityIcon size="lg" />).baseElement).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop color=base-content', () => {
-  expect(render(<AccessibilityIcon color="base-content" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<AccessibilityIcon color="base-content" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop color=primary', () => {
-  expect(render(<AccessibilityIcon color="primary" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<AccessibilityIcon color="primary" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop color=success', () => {
-  expect(render(<AccessibilityIcon color="success" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<AccessibilityIcon color="success" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop color=error', () => {
-  expect(render(<AccessibilityIcon color="error" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<AccessibilityIcon color="error" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop color=warning and size=s', () => {
   expect(

package/src/ArrowIcon/config.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface ArrowType {
   /**
@@ -16,16 +16,28 @@ export const arrow: React.FC<ArrowType> = ({ direction = 'up' }) => {
   return (
     <>
       {direction === 'left' && (
-        <Base as="polygon" points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7" />
+        <IconBase
+          as="polygon"
+          points="14.4 19.7 8.48 13.7 21.93 13.7 22 10.37 8.48 10.32 14.4 4.4 12 2 2 12 12 22 14.4 19.7"
+        />
       )}
       {direction === 'right' && (
-        <Base as="polygon" points="9.6 4.3 15.52 10.3 2.07 10.3 2 13.63 15.52 13.68 9.6 19.6 12 22 22 12 12 2 9.6 4.3" />
+        <IconBase
+          as="polygon"
+          points="9.6 4.3 15.52 10.3 2.07 10.3 2 13.63 15.52 13.68 9.6 19.6 12 22 22 12 12 2 9.6 4.3"
+        />
       )}
       {direction === 'up' && (
-        <Base as="polygon" points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12" />
+        <IconBase
+          as="polygon"
+          points="22 12 12 2 2 12 4.3 14.4 10.3 8.48 10.3 21.93 13.63 22 13.68 8.48 19.6 14.4 22 12"
+        />
       )}
       {direction === 'down' && (
-        <Base as="polygon" points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6" />
+        <IconBase
+          as="polygon"
+          points="19.7 9.6 13.7 15.52 13.7 2.07 10.37 2 10.32 15.52 4.4 9.6 2 12 12 22 22 12 19.7 9.6"
+        />
       )}
     </>
   );

package/src/BurgerIcon/config.tsx

@@ -1,22 +1,38 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export type BurgerType = {
+export interface BurgerType {
   active?: boolean;
-};
+}
 
 export const burger: React.FC<BurgerType> = ({ active = false }) => {
   return (
-    <Base as="g"
+    <IconBase
+      as="g"
       className={clsx({
         [`ds-svg-icon--burger--active`]: active,
       })}
     >
-      <Base as="rect" id="ds-svg-icon--burger__line-1" width="20" height="3.3" />
-      <Base as="rect" id="ds-svg-icon--burger__line-2" width="20" height="3.3" />
-      <Base as="rect" id="ds-svg-icon--burger__line-3" width="20" height="3.3" />
-    </Base>
+      <IconBase
+        as="rect"
+        id="ds-svg-icon--burger__line-1"
+        width="20"
+        height="3.3"
+      />
+      <IconBase
+        as="rect"
+        id="ds-svg-icon--burger__line-2"
+        width="20"
+        height="3.3"
+      />
+      <IconBase
+        as="rect"
+        id="ds-svg-icon--burger__line-3"
+        width="20"
+        height="3.3"
+      />
+    </IconBase>
   );
 };
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/BurgerIcon/index.test.tsx

@@ -12,7 +12,9 @@ it('renders the BurgerIcon with prop active=true', () => {
 });
 
 it('renders the BurgerIcon with prop color=base-content', () => {
-  expect(render(<BurgerIcon color="base-content" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<BurgerIcon color="base-content" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the BurgerIcon prop color= "white"', () => {
@@ -22,5 +24,7 @@ it('renders the BurgerIcon prop color= "error"', () => {
   expect(render(<BurgerIcon color="error" />).baseElement).toMatchSnapshot();
 });
 it('renders the BurgerIcon props active color= "white"', () => {
-  expect(render(<BurgerIcon active color="white" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<BurgerIcon active color="white" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/CancelIcon/config.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface CancelType { }
+export interface CancelType {}
 
-export function cancel(): React.ReactElement {
+export function cancel(): React.ReactElement<any> {
   return (
     <>
-      <Base as="path" d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10,10-4.477,10-10S17.523,2,12,2ZM17.419,15.581l-1.838,1.838-3.581-3.581-3.581,3.581-1.838-1.838,3.581-3.581-3.581-3.581,1.838-1.839,3.581,3.581,3.581-3.581,1.838,1.839-3.581,3.581,3.581,3.581Z" />
+      <IconBase
+        as="path"
+        d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10,10-4.477,10-10S17.523,2,12,2ZM17.419,15.581l-1.838,1.838-3.581-3.581-3.581,3.581-1.838-1.838,3.581-3.581-3.581-3.581,1.838-1.839,3.581,3.581,3.581-3.581,1.838,1.839-3.581,3.581,3.581,3.581Z"
+      />
     </>
   );
 }

package/src/CancelIcon/index.test.tsx

@@ -19,8 +19,12 @@ it('renders the CancelIcon with prop color=warning', () => {
   expect(render(<CancelIcon color="warning" />).baseElement).toMatchSnapshot();
 });
 it('renders the CancelIcon with prop color=warning and size=s', () => {
-  expect(render(<CancelIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<CancelIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the CancelIcon with prop color=error and size= xl', () => {
-  expect(render(<CancelIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<CancelIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/CaretIcon/config.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface CaretType {
   /**
@@ -15,10 +15,10 @@ export interface CaretType {
 export const caret: React.FC<CaretType> = ({ direction = 'left' }) => {
   return (
     <>
-      {direction === 'left' && <Base as="path" d="M18,22V2L6,12L18,22z" />}
-      {direction === 'right' && <Base as="path" d="M6,2v20l12-10L6,2z" />}
-      {direction === 'up' && <Base as="path" d="M2,18h20L12,6L2,18z" />}
-      {direction === 'down' && <Base as="path" d="M22,6H2l10,12L22,6z" />}
+      {direction === 'left' && <IconBase as="path" d="M18,22V2L6,12L18,22z" />}
+      {direction === 'right' && <IconBase as="path" d="M6,2v20l12-10L6,2z" />}
+      {direction === 'up' && <IconBase as="path" d="M2,18h20L12,6L2,18z" />}
+      {direction === 'down' && <IconBase as="path" d="M22,6H2l10,12L22,6z" />}
     </>
   );
 };

package/src/ChatIcon/config.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface ChatType {
   /**
@@ -14,9 +14,12 @@ export const chat: React.FC<ChatType> = ({ dots = false }) => {
   return (
     <>
       {dots ? (
-        <Base as="path" d="M2,3.5v13h4.35l2.5,3,2.5-3h10.65V3.5H2ZM7.65,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3ZM12,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3ZM16.35,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3Z" />
+        <IconBase
+          as="path"
+          d="M2,3.5v13h4.35l2.5,3,2.5-3h10.65V3.5H2ZM7.65,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3ZM12,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3ZM16.35,11.3c-.718,0-1.3-.582-1.3-1.3s.582-1.3,1.3-1.3,1.3.582,1.3,1.3-.582,1.3-1.3,1.3Z"
+        />
       ) : (
-        <Base as="path" d="M2,3.5v13h4.35l2.5,3,2.5-3h10.65V3.5H2Z" />
+        <IconBase as="path" d="M2,3.5v13h4.35l2.5,3,2.5-3h10.65V3.5H2Z" />
       )}
     </>
   );

package/src/ChatIcon/index.test.tsx

@@ -7,7 +7,7 @@ it('renders the ChatIcon with no props', () => {
   expect(render(<ChatIcon />).baseElement).toMatchSnapshot();
 });
 it('renders the ChatIcon with dots', () => {
-  expect(render(<ChatIcon dots/>).baseElement).toMatchSnapshot();
+  expect(render(<ChatIcon dots />).baseElement).toMatchSnapshot();
 });
 it('renders the ChatIcon with prop size=md', () => {
   expect(render(<ChatIcon size="md" />).baseElement).toMatchSnapshot();
@@ -22,8 +22,12 @@ it('renders the ChatIcon with prop color=warning', () => {
   expect(render(<ChatIcon color="warning" />).baseElement).toMatchSnapshot();
 });
 it('renders the ChatIcon with prop color=warning and size=sm', () => {
-  expect(render(<ChatIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ChatIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the ChatIcon with prop color=error and size= xl', () => {
-  expect(render(<ChatIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ChatIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/CheckIcon/config.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface CheckType { }
+export interface CheckType {}
 
-export function check(): React.ReactElement {
+export function check(): React.ReactElement<any> {
   return (
     <>
-      <Base as="polygon" points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94" />
+      <IconBase
+        as="polygon"
+        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+      />
     </>
   );
 }

package/src/CheckIcon/index.test.tsx

@@ -22,8 +22,12 @@ it('renders the CheckIcon with prop color=warning', () => {
   expect(render(<CheckIcon color="warning" />).baseElement).toMatchSnapshot();
 });
 it('renders the CheckIcon with prop color=warning and size=s', () => {
-  expect(render(<CheckIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<CheckIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the CheckIcon with prop color=error and size= xl', () => {
-  expect(render(<CheckIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<CheckIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/ChevronIcon/config.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base'
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface ChevronType {
   /**
@@ -17,16 +17,28 @@ export const chevron: React.FC<ChevronType> = ({ direction = 'right' }) => {
   return (
     <>
       {direction === 'left' && (
-        <Base as="path" d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z" />
+        <IconBase
+          as="path"
+          d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
+        />
       )}
       {direction === 'right' && (
-        <Base as="path" d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" />
+        <IconBase
+          as="path"
+          d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+        />
       )}
       {direction === 'up' && (
-        <Base as="path" d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z" />
+        <IconBase
+          as="path"
+          d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+        />
       )}
       {direction === 'down' && (
-        <Base as="path" d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
+        <IconBase
+          as="path"
+          d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+        />
       )}
     </>
   );

package/src/ChevronIcon/index.test.tsx

@@ -8,7 +8,9 @@ it('renders the ChevronIcon with no props, direction prop is right by default',
 });
 
 it('renders the ChevronIcon with direction left prop', () => {
-  expect(render(<ChevronIcon direction="left" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ChevronIcon direction="left" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the ChevronIcon with direction up prop', () => {
@@ -16,5 +18,7 @@ it('renders the ChevronIcon with direction up prop', () => {
 });
 
 it('renders the ChevronIcon with direction down prop', () => {
-  expect(render(<ChevronIcon direction="down" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ChevronIcon direction="down" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/CloseIcon/config.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface CloseType { }
+export interface CloseType {}
 
-export function close(): React.ReactElement {
+export function close(): React.ReactElement<any> {
   return (
     <>
-      <Base as="polygon" points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " />
+      <IconBase
+        as="polygon"
+        points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+      />
     </>
   );
 }

package/src/DownloadIcon/config.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface DownloadType { }
+export interface DownloadType {}
 
-export function download(): React.ReactElement {
+export function download(): React.ReactElement<any> {
   return (
-    <Base as="g">
-      <Base as="polygon" points="12 18 20 10 15.3 10 15.3 2 8.7 2 8.7 10 4 10 12 18" />
-      <Base as="rect" x="6" y="18.699" width="12" height="3.301" />
-    </Base>
+    <IconBase as="g">
+      <IconBase
+        as="polygon"
+        points="12 18 20 10 15.3 10 15.3 2 8.7 2 8.7 10 4 10 12 18"
+      />
+      <IconBase as="rect" x="6" y="18.699" width="12" height="3.301" />
+    </IconBase>
   );
 }
 

package/src/DownloadIcon/index.test.tsx

@@ -16,11 +16,17 @@ it('renders the DownloadIcon with prop color=white', () => {
   expect(render(<DownloadIcon color="white" />).baseElement).toMatchSnapshot();
 });
 it('renders the DownloadIcon with prop color=warning', () => {
-  expect(render(<DownloadIcon color="warning" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<DownloadIcon color="warning" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the DownloadIcon with prop color=warning and size=s', () => {
-  expect(render(<DownloadIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<DownloadIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the DownloadIcon with prop color=error and size= xl', () => {
-  expect(render(<DownloadIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<DownloadIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/ExclamationIcon/config.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface ExclamationType { }
+export interface ExclamationType {}
 
-export function exclamation(): React.ReactElement {
+export function exclamation(): React.ReactElement<any> {
   return (
     <>
-      <Base as="path" d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z" />
-      <Base as="circle" cx="11.993" cy="19.9" r="2.1" />
+      <IconBase
+        as="path"
+        d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
+      />
+      <IconBase as="circle" cx="11.993" cy="19.9" r="2.1" />
     </>
   );
 }

package/src/ExclamationIcon/index.test.tsx

@@ -13,14 +13,22 @@ it('renders the ExclamationIcon with prop size=xl', () => {
   expect(render(<ExclamationIcon size="xl" />).baseElement).toMatchSnapshot();
 });
 it('renders the ExclamationIcon with prop color=white', () => {
-  expect(render(<ExclamationIcon color="white" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ExclamationIcon color="white" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the ExclamationIcon with prop color=warning', () => {
-  expect(render(<ExclamationIcon color="warning" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ExclamationIcon color="warning" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the ExclamationIcon with prop color=error and size=sm', () => {
-  expect(render(<ExclamationIcon color="error" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ExclamationIcon color="error" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the ExclamationIcon with prop color=info and size= xl', () => {
-  expect(render(<ExclamationIcon color="info" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ExclamationIcon color="info" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/GlobeIcon/config.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface GlobeType { }
+export interface GlobeType {}
 
-export function globe(): React.ReactElement {
+export function globe(): React.ReactElement<any> {
   return (
     <>
-      <Base as="path" d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z" />
+      <IconBase
+        as="path"
+        d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
+      />
     </>
   );
 }

package/src/GlobeIcon/index.test.tsx

@@ -8,7 +8,9 @@ it('renders the GlobeIcon with no props', () => {
 });
 
 it('renders the GlobeIcon with prop color=base-content', () => {
-  expect(render(<GlobeIcon color="base-content" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<GlobeIcon color="base-content" />).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the GlobeIcon prop color= "white"', () => {

package/src/Icon/index.test.tsx

@@ -17,7 +17,9 @@ it('renders the Icon prop icon= "caret"', () => {
   expect(render(<Icon icon="caret" />).baseElement).toMatchSnapshot();
 });
 it('renders the Icon prop icon= "caret" and direction=left', () => {
-  expect(render(<Icon icon="caret" direction="left" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<Icon icon="caret" direction="left" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Icon prop icon= "check"', () => {
   expect(render(<Icon icon="check" />).baseElement).toMatchSnapshot();

package/src/Icon/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import SvgIcon, { SvgIconProps } from '@digigov/react-icons/SvgIcon';
 import * as icons from '@digigov/react-icons/icons';
 import type { IconTypes } from '@digigov/react-icons/icons';
+import SvgIcon, { SvgIconProps } from '@digigov/react-icons/SvgIcon';
 
 export type IconProps<N extends keyof IconTypes> = SvgIconProps &
   IconTypes[N] & {

package/src/{Base → IconBase}/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 
-type AsProp<C extends React.ElementType> = {
+interface AsProp<C extends React.ElementType> {
   as?: C;
-};
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -14,7 +14,7 @@ type PolymorphicComponentProp<
 > = React.PropsWithChildren<Props & AsProp<C>> &
   Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
-// This is a new type utitlity with ref!
+// This is a new type utility with ref!
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
   Props = Record<string, unknown>,
@@ -27,7 +27,7 @@ type PolymorphicRef<C extends React.ElementType> =
 /**
  * This is the updated component props using PolymorphicComponentPropWithRef
  */
-export type BaseProps<C extends React.ElementType> =
+export type IconBaseProps<C extends React.ElementType> =
   PolymorphicComponentPropWithRef<
     C,
     {
@@ -147,12 +147,12 @@ type spacingValues =
 /**
  * This is the type used in the type annotation for the component
  */
-type BaseComponent = <C extends React.ElementType = 'span'>(
-  props: BaseProps<C>
+type IconBaseComponent = <C extends React.ElementType = 'span'>(
+  props: IconBaseProps<C>
 ) => React.ReactNode | null;
 
-export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+export const IconBase: IconBaseComponent = React.forwardRef(function Base<
+  C extends React.ElementType,
 >(
   {
     as,
@@ -196,7 +196,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     children,
     className,
     ...props
-  }: BaseProps<C>,
+  }: IconBaseProps<C>,
   ref?: PolymorphicRef<C>
 ) {
   const Component = as || 'span';
@@ -255,4 +255,4 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   );
 });
 
-export default Base;
+export default IconBase;

package/src/LockIcon/config.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface LockType { }
+export interface LockType {}
 
-export function lock(): React.ReactElement {
+export function lock(): React.ReactElement<any> {
   return (
     <>
-      <Base as="path" d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z" />
+      <IconBase
+        as="path"
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
     </>
   );
 }

package/src/LockIcon/index.test.tsx

@@ -19,8 +19,12 @@ it('renders the LockIcon with prop color=warning', () => {
   expect(render(<LockIcon color="warning" />).baseElement).toMatchSnapshot();
 });
 it('renders the LockIcon with prop color=warning and size=sm', () => {
-  expect(render(<LockIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<LockIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the LockIcon with prop color=error and size= xl', () => {
-  expect(render(<LockIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<LockIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });