@digigov/react-icons 2.0.0-rc.24 → 2.0.0-rc.26

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"
+      />
     </>
   );
 }

package/src/PlusIcon/index.test.tsx

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

package/src/PrintIcon/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 PrintType { }
+export interface PrintType {}
 
 export function print(): React.ReactElement {
   return (
     <>
-      <Base as="rect" x="7" y="2" width="10" height="4" />
-      <Base as="path" d="M18.7,7.935H5.3c-1.823,0-3.3,1.477-3.3,3.3v6.7h2.4v4.065h15.2v-4.065h2.4v-6.7c0-1.823-1.477-3.3-3.3-3.3ZM17,19.4H7v-5h10v5ZM18.7,12.535c-.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="rect" x="7" y="2" width="10" height="4" />
+      <IconBase
+        as="path"
+        d="M18.7,7.935H5.3c-1.823,0-3.3,1.477-3.3,3.3v6.7h2.4v4.065h15.2v-4.065h2.4v-6.7c0-1.823-1.477-3.3-3.3-3.3ZM17,19.4H7v-5h10v5ZM18.7,12.535c-.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"
+      />
     </>
   );
 }

package/src/PrintIcon/index.test.tsx

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

package/src/ReplyIcon/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 ReplyType { }
+export interface ReplyType {}
 
 export function reply(): React.ReactElement {
   return (
     <>
-      <Base as="path" d="M16.35,9.517h-8.034l4.184-4.184-2.334-2.333L2,11.167l8.166,8.167,2.334-2.334-4.184-4.183h8.033c1.296,0,2.35,1.054,2.35,2.35v5.834h3.301v-5.834c0-3.115-2.535-5.65-5.65-5.65Z" />
+      <IconBase
+        as="path"
+        d="M16.35,9.517h-8.034l4.184-4.184-2.334-2.333L2,11.167l8.166,8.167,2.334-2.334-4.184-4.183h8.033c1.296,0,2.35,1.054,2.35,2.35v5.834h3.301v-5.834c0-3.115-2.535-5.65-5.65-5.65Z"
+      />
     </>
   );
 }

package/src/ReplyIcon/index.test.tsx

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

package/src/RestoreIcon/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 RestoreType { }
+export interface RestoreType {}
 
 export function restore(): React.ReactElement {
   return (
     <>
-      <Base as="path" d="M12,21.3c-2.37,0-4.691-.929-6.407-2.559l1.669-2.003c1.247,1.247,2.974,1.962,4.738,1.962,3.694,0,6.7-3.006,6.7-6.7s-3.006-6.7-6.7-6.7-6.7,3.006-6.7,6.7h-2.6C2.7,6.872,6.872,2.7,12,2.7s9.3,4.172,9.3,9.3-4.172,9.3-9.3,9.3Z" />
-      <Base as="path" d="M7.5,12H.5l3.5,4.2,3.5-4.2Z" />
-      <Base as="circle" cx="12" cy="12" r="1.65" />
+      <IconBase
+        as="path"
+        d="M12,21.3c-2.37,0-4.691-.929-6.407-2.559l1.669-2.003c1.247,1.247,2.974,1.962,4.738,1.962,3.694,0,6.7-3.006,6.7-6.7s-3.006-6.7-6.7-6.7-6.7,3.006-6.7,6.7h-2.6C2.7,6.872,6.872,2.7,12,2.7s9.3,4.172,9.3,9.3-4.172,9.3-9.3,9.3Z"
+      />
+      <IconBase as="path" d="M7.5,12H.5l3.5,4.2,3.5-4.2Z" />
+      <IconBase as="circle" cx="12" cy="12" r="1.65" />
     </>
   );
 }

package/src/RestoreIcon/index.test.tsx

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

package/src/SearchIcon/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 SearchType { }
+export interface SearchType {}
 
 export function search(): React.ReactElement {
   return (
     <>
-      <Base as="path" d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z" />
+      <IconBase
+        as="path"
+        d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"
+      />
     </>
   );
 }

package/src/SvgIcon/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-icons/Base';
+import IconBase, { IconBaseProps } from '@digigov/react-icons/IconBase';
 
-export interface SvgIconProps extends BaseProps<'svg'> {
+export interface SvgIconProps extends IconBaseProps<'svg'> {
   /**
    * size is optional.
    * size prop declares the size of the svg icon.
@@ -31,17 +31,17 @@ export interface SvgIconProps extends BaseProps<'svg'> {
    * @value 'link'
    */
   color?:
-  | 'base-content'
-  | 'dark'
-  | 'white'
-  | 'gray'
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'focus'
-  | 'info'
-  | 'link';
+    | 'base-content'
+    | 'dark'
+    | 'white'
+    | 'gray'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'focus'
+    | 'info'
+    | 'link';
 }
 /**
  * Use SvgIcon as global svg component.
@@ -50,7 +50,7 @@ export interface SvgIconProps extends BaseProps<'svg'> {
 export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
   function SvgIcon({ size, color, children, className, ...props }, ref) {
     return (
-      <Base
+      <IconBase
         as="svg"
         ref={ref}
         className={clsx(className, {
@@ -64,7 +64,7 @@ export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
         {...props}
       >
         {children}
-      </Base>
+      </IconBase>
     );
   }
 );

package/src/UncheckIcon/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 UncheckType { }
+export interface UncheckType {}
 
 export function uncheck(): React.ReactElement {
   return (
     <>
-      <Base as="polygon" points="20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74" />
+      <IconBase
+        as="polygon"
+        points="20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74"
+      />
     </>
   );
 }

package/src/UncheckIcon/index.test.tsx

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

package/src/icons.ts

@@ -1,26 +1,26 @@
 import type { AccessibilityType } from '@digigov/react-icons/AccessibilityIcon/config';
 import type { ArrowType } from '@digigov/react-icons/ArrowIcon/config';
 import type { BurgerType } from '@digigov/react-icons/BurgerIcon/config';
+import type { CancelType } from '@digigov/react-icons/CancelIcon/config';
 import type { CaretType } from '@digigov/react-icons/CaretIcon/config';
+import type { ChatType } from '@digigov/react-icons/ChatIcon/config';
 import type { CheckType } from '@digigov/react-icons/CheckIcon/config';
 import type { ChevronType } from '@digigov/react-icons/ChevronIcon/config';
 import type { CloseType } from '@digigov/react-icons/CloseIcon/config';
+import type { DownloadType } from '@digigov/react-icons/DownloadIcon/config';
+import type { ExclamationType } from '@digigov/react-icons/ExclamationIcon/config';
 import type { GlobeType } from '@digigov/react-icons/GlobeIcon/config';
-import type { MoreVertType } from '@digigov/react-icons/MoreVertIcon/config';
-import type { SearchType } from '@digigov/react-icons/SearchIcon/config';
-import type { UncheckType } from '@digigov/react-icons/UncheckIcon/config';
 import type { LockType } from '@digigov/react-icons/LockIcon/config';
-import type { DownloadType } from '@digigov/react-icons/DownloadIcon/config';
+import type { LoginType } from '@digigov/react-icons/LoginIcon/config';
+import type { MinusType } from '@digigov/react-icons/MinusIcon/config';
+import type { MoreVertType } from '@digigov/react-icons/MoreVertIcon/config';
 import type { PdfFileType } from '@digigov/react-icons/PdfFileIcon/config';
-import type { CancelType } from '@digigov/react-icons/CancelIcon/config';
 import type { PlusType } from '@digigov/react-icons/PlusIcon/config';
-import type { MinusType } from '@digigov/react-icons/MinusIcon/config';
-import type { LoginType } from '@digigov/react-icons/LoginIcon/config';
-import type { RestoreType } from '@digigov/react-icons/RestoreIcon/config';
-import type { ReplyType } from '@digigov/react-icons/ReplyIcon/config';
-import type { ChatType } from '@digigov/react-icons/ChatIcon/config';
-import type { ExclamationType } from '@digigov/react-icons/ExclamationIcon/config';
 import type { PrintType } from '@digigov/react-icons/PrintIcon/config';
+import type { ReplyType } from '@digigov/react-icons/ReplyIcon/config';
+import type { RestoreType } from '@digigov/react-icons/RestoreIcon/config';
+import type { SearchType } from '@digigov/react-icons/SearchIcon/config';
+import type { UncheckType } from '@digigov/react-icons/UncheckIcon/config';
 
 export * from '@digigov/react-icons/AccessibilityIcon/config';
 export * from '@digigov/react-icons/ArrowIcon/config';
@@ -46,7 +46,6 @@ export * from '@digigov/react-icons/ChatIcon/config';
 export * from '@digigov/react-icons/ExclamationIcon/config';
 export * from '@digigov/react-icons/PrintIcon/config';
 
-
 export interface IconTypes {
   accessibility: AccessibilityType;
   arrow: ArrowType;