@digigov/react-icons 2.0.0-834daea4 → 2.0.0-87b6232d

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 {
   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 {
   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 {
   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 {
   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 {
   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,11 +147,11 @@ 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<
+export const IconBase: IconBaseComponent = React.forwardRef(function Base<
   C extends React.ElementType = 'span',
 >(
   {
@@ -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 {
   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();
 });

package/src/LoginIcon/config.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface LoginType { }
+export interface LoginType {}
 
 export function login(): React.ReactElement {
   return (
     <>
-      <Base as="polygon" points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081" />
-      <Base as="polygon" points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2" />
+      <IconBase
+        as="polygon"
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <IconBase
+        as="polygon"
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
     </>
   );
 }

package/src/LoginIcon/index.test.tsx

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

package/src/MinusIcon/config.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface MinusType { }
+export interface MinusType {}
 
 export function minus(): React.ReactElement {
   return (
     <>
-      <Base as="rect" x="2" y="10.35" width="20" height="3.3" />
+      <IconBase as="rect" x="2" y="10.35" width="20" height="3.3" />
     </>
   );
 }

package/src/MinusIcon/index.test.tsx

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

package/src/MoreVertIcon/config.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface MoreVertType { }
+export interface MoreVertType {}
 
 export function moreVert(): React.ReactElement {
   return (
     <>
-      <Base as="circle" cx="12" cy="5" r="2" />
-      <Base as="circle" cx="12" cy="12" r="2" />
-      <Base as="circle" cx="12" cy="19" r="2" />
+      <IconBase as="circle" cx="12" cy="5" r="2" />
+      <IconBase as="circle" cx="12" cy="12" r="2" />
+      <IconBase as="circle" cx="12" cy="19" r="2" />
     </>
   );
 }

package/src/MoreVertIcon/index.test.tsx

@@ -16,17 +16,25 @@ it('renders the MoreVertIcon with prop color=dark', () => {
   expect(render(<MoreVertIcon color="dark" />).baseElement).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop color=primary', () => {
-  expect(render(<MoreVertIcon color="primary" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<MoreVertIcon color="primary" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop color=success', () => {
-  expect(render(<MoreVertIcon color="success" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<MoreVertIcon color="success" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop color=focus', () => {
   expect(render(<MoreVertIcon color="focus" />).baseElement).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop color=warning and size=s', () => {
-  expect(render(<MoreVertIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<MoreVertIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the MoreVertIcon with prop color=error and size= xl', () => {
-  expect(render(<MoreVertIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<MoreVertIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/PdfFileIcon/config.tsx

@@ -1,18 +1,27 @@
 import React from 'react';
-import Base from '@digigov/react-icons/Base';
+import IconBase from '@digigov/react-icons/IconBase';
 
-export interface PdfFileType { }
+export interface PdfFileType {}
 
 export function pdfFile(): React.ReactElement {
   return (
-    <Base as="g">
-      <Base as="polygon" points="4 19 4 7 2 7 2 21 18 21 18 19 4 19" />
-      <Base as="g">
-        <Base as="path" d="M9.594,8.364h-.838v1.504h.823c.243,0,.429-.061.557-.183.128-.122.192-.294.192-.516,0-.243-.066-.438-.197-.584-.131-.146-.31-.22-.537-.222Z" />
-        <Base as="path" d="M13.952,8.364h-.422v3.276h.437c.36,0,.637-.128.831-.385.193-.257.29-.638.29-1.144v-.226c0-.504-.097-.883-.29-1.139-.193-.255-.475-.383-.845-.383Z" />
-        <Base as="path" d="M6,3v14h16V3H6ZM11.057,10.381c-.364.304-.863.456-1.498.456h-.802v1.769h-1.257v-5.213h2.08c.399,0,.751.073,1.058.22s.544.356.712.627c.168.271.252.578.252.922,0,.508-.182.915-.546,1.219ZM16.368,10.111c0,.477-.101.905-.303,1.284-.202.378-.486.674-.852.888-.366.214-.775.322-1.226.324h-1.715v-5.213h1.679c.461,0,.875.104,1.242.313.368.209.655.504.861.884.206.381.311.807.313,1.28v.24ZM20.5,8.364h-2.231v1.199h2.026v.967h-2.026v2.077h-1.257v-5.213h3.487v.97Z" />
-      </Base>
-    </Base>
+    <IconBase as="g">
+      <IconBase as="polygon" points="4 19 4 7 2 7 2 21 18 21 18 19 4 19" />
+      <IconBase as="g">
+        <IconBase
+          as="path"
+          d="M9.594,8.364h-.838v1.504h.823c.243,0,.429-.061.557-.183.128-.122.192-.294.192-.516,0-.243-.066-.438-.197-.584-.131-.146-.31-.22-.537-.222Z"
+        />
+        <IconBase
+          as="path"
+          d="M13.952,8.364h-.422v3.276h.437c.36,0,.637-.128.831-.385.193-.257.29-.638.29-1.144v-.226c0-.504-.097-.883-.29-1.139-.193-.255-.475-.383-.845-.383Z"
+        />
+        <IconBase
+          as="path"
+          d="M6,3v14h16V3H6ZM11.057,10.381c-.364.304-.863.456-1.498.456h-.802v1.769h-1.257v-5.213h2.08c.399,0,.751.073,1.058.22s.544.356.712.627c.168.271.252.578.252.922,0,.508-.182.915-.546,1.219ZM16.368,10.111c0,.477-.101.905-.303,1.284-.202.378-.486.674-.852.888-.366.214-.775.322-1.226.324h-1.715v-5.213h1.679c.461,0,.875.104,1.242.313.368.209.655.504.861.884.206.381.311.807.313,1.28v.24ZM20.5,8.364h-2.231v1.199h2.026v.967h-2.026v2.077h-1.257v-5.213h3.487v.97Z"
+        />
+      </IconBase>
+    </IconBase>
   );
 }
 

package/src/PdfFileIcon/index.test.tsx

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

package/src/PlusIcon/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 PlusType { }
+export interface PlusType {}
 
 export function plus(): React.ReactElement {
   return (
     <>
-      <Base as="polygon" points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35" />
+      <IconBase
+        as="polygon"
+        points="22 10.35 13.65 10.35 13.65 2 10.35 2 10.35 10.35 2 10.35 2 13.65 10.35 13.65 10.35 22 13.65 22 13.65 13.65 22 13.65 22 10.35"
+      />
     </>
   );
 }