npm - @digigov/react-icons - Versions diffs - 2.0.0-85c27c19 → 2.0.0-87b6232d - Mend

@digigov/react-icons 2.0.0-85c27c19 → 2.0.0-87b6232d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/AccessibilityIcon/config/index.js +4 -2
package/AccessibilityIcon/config.js.map +2 -2
package/ArrowIcon/config/index.js +26 -1
package/ArrowIcon/config.js.map +2 -2
package/BurgerIcon/config/index.js +30 -4
package/BurgerIcon/config.d.ts +2 -2
package/BurgerIcon/config.js.map +2 -2
package/CancelIcon/config/index.js +8 -1
package/CancelIcon/config.js.map +2 -2
package/CaretIcon/config/index.js +2 -1
package/CaretIcon/config.js.map +2 -2
package/ChatIcon/config/index.js +8 -1
package/ChatIcon/config.js.map +2 -2
package/CheckIcon/config/index.js +8 -1
package/CheckIcon/config.js.map +2 -2
package/ChevronIcon/config/index.js +26 -1
package/ChevronIcon/config.js.map +2 -2
package/CloseIcon/config/index.js +8 -1
package/CloseIcon/config.js.map +2 -2
package/DownloadIcon/config/index.js +8 -1
package/DownloadIcon/config.js.map +2 -2
package/ExclamationIcon/config/index.js +8 -1
package/ExclamationIcon/config.js.map +2 -2
package/GlobeIcon/config/index.js +8 -1
package/GlobeIcon/config.js.map +2 -2
package/Icon/index.d.ts +1 -1
package/Icon/index.js +1 -1
package/Icon/index.js.map +2 -2
package/{Base → IconBase}/index.d.ts +6 -6
package/{Base → IconBase}/index.js +5 -4
package/IconBase/index.js.map +7 -0
package/{Base → IconBase}/package.json +1 -1
package/LockIcon/config/index.js +8 -1
package/LockIcon/config.js.map +2 -2
package/LoginIcon/config/index.js +14 -1
package/LoginIcon/config.js.map +2 -2
package/MinusIcon/config/index.js +2 -1
package/MinusIcon/config.js.map +2 -2
package/MoreVertIcon/config/index.js +2 -1
package/MoreVertIcon/config.js.map +2 -2
package/PdfFileIcon/config/index.js +20 -1
package/PdfFileIcon/config.js.map +2 -2
package/PlusIcon/config/index.js +8 -1
package/PlusIcon/config.js.map +2 -2
package/PrintIcon/config/index.js +8 -1
package/PrintIcon/config.js.map +2 -2
package/ReplyIcon/config/index.js +8 -1
package/ReplyIcon/config.js.map +2 -2
package/RestoreIcon/config/index.js +8 -1
package/RestoreIcon/config.js.map +2 -2
package/SearchIcon/config/index.js +8 -1
package/SearchIcon/config.js.map +2 -2
package/SvgIcon/index.d.ts +2 -2
package/SvgIcon/index.js +2 -2
package/SvgIcon/index.js.map +2 -2
package/UncheckIcon/config/index.js +8 -1
package/UncheckIcon/config.js.map +2 -2
package/cjs/AccessibilityIcon/config/index.js +4 -2
package/cjs/AccessibilityIcon/config.js.map +3 -3
package/cjs/ArrowIcon/config/index.js +26 -1
package/cjs/ArrowIcon/config.js.map +3 -3
package/cjs/BurgerIcon/config/index.js +30 -4
package/cjs/BurgerIcon/config.js.map +3 -3
package/cjs/CancelIcon/config/index.js +8 -1
package/cjs/CancelIcon/config.js.map +3 -3
package/cjs/CaretIcon/config/index.js +2 -1
package/cjs/CaretIcon/config.js.map +3 -3
package/cjs/ChatIcon/config/index.js +8 -1
package/cjs/ChatIcon/config.js.map +3 -3
package/cjs/CheckIcon/config/index.js +8 -1
package/cjs/CheckIcon/config.js.map +3 -3
package/cjs/ChevronIcon/config/index.js +26 -1
package/cjs/ChevronIcon/config.js.map +3 -3
package/cjs/CloseIcon/config/index.js +8 -1
package/cjs/CloseIcon/config.js.map +3 -3
package/cjs/DownloadIcon/config/index.js +8 -1
package/cjs/DownloadIcon/config.js.map +3 -3
package/cjs/ExclamationIcon/config/index.js +8 -1
package/cjs/ExclamationIcon/config.js.map +3 -3
package/cjs/GlobeIcon/config/index.js +8 -1
package/cjs/GlobeIcon/config.js.map +3 -3
package/cjs/Icon/index.js +1 -1
package/cjs/Icon/index.js.map +2 -2
package/cjs/{Base → IconBase}/index.js +9 -8
package/cjs/IconBase/index.js.map +7 -0
package/cjs/LockIcon/config/index.js +8 -1
package/cjs/LockIcon/config.js.map +3 -3
package/cjs/LoginIcon/config/index.js +14 -1
package/cjs/LoginIcon/config.js.map +3 -3
package/cjs/MinusIcon/config/index.js +2 -1
package/cjs/MinusIcon/config.js.map +3 -3
package/cjs/MoreVertIcon/config/index.js +2 -1
package/cjs/MoreVertIcon/config.js.map +3 -3
package/cjs/PdfFileIcon/config/index.js +20 -1
package/cjs/PdfFileIcon/config.js.map +3 -3
package/cjs/PlusIcon/config/index.js +8 -1
package/cjs/PlusIcon/config.js.map +3 -3
package/cjs/PrintIcon/config/index.js +8 -1
package/cjs/PrintIcon/config.js.map +3 -3
package/cjs/ReplyIcon/config/index.js +8 -1
package/cjs/ReplyIcon/config.js.map +3 -3
package/cjs/RestoreIcon/config/index.js +8 -1
package/cjs/RestoreIcon/config.js.map +3 -3
package/cjs/SearchIcon/config/index.js +8 -1
package/cjs/SearchIcon/config.js.map +3 -3
package/cjs/SvgIcon/index.js +2 -2
package/cjs/SvgIcon/index.js.map +3 -3
package/cjs/UncheckIcon/config/index.js +8 -1
package/cjs/UncheckIcon/config.js.map +3 -3
package/cjs/icons.js.map +1 -1
package/cjs/lazy/index.js +7 -7
package/cjs/lazy.js.map +3 -3
package/cjs/registry/index.js +56 -10
package/cjs/registry.js.map +3 -3
package/icons.d.ts +11 -11
package/icons.js.map +1 -1
package/index.js +1 -1
package/lazy/index.js +28 -32
package/package.json +2 -2
package/registry/index.js +87 -42
package/src/AccessibilityIcon/__snapshots__/index.test.tsx.snap +126 -27
package/src/AccessibilityIcon/config.tsx +5 -3
package/src/AccessibilityIcon/index.test.tsx +12 -4
package/src/ArrowIcon/__snapshots__/index.test.tsx.snap +13 -1
package/src/ArrowIcon/config.tsx +17 -4
package/src/BurgerIcon/__snapshots__/index.test.tsx.snap +53 -5
package/src/BurgerIcon/config.tsx +24 -7
package/src/BurgerIcon/index.test.tsx +6 -2
package/src/CancelIcon/__snapshots__/index.test.tsx.snap +28 -7
package/src/CancelIcon/config.tsx +5 -1
package/src/CancelIcon/index.test.tsx +6 -2
package/src/CaretIcon/__snapshots__/index.test.tsx.snap +13 -1
package/src/CaretIcon/config.tsx +5 -4
package/src/ChatIcon/__snapshots__/index.test.tsx.snap +31 -7
package/src/ChatIcon/config.tsx +6 -2
package/src/ChatIcon/index.test.tsx +7 -3
package/src/CheckIcon/__snapshots__/index.test.tsx.snap +32 -8
package/src/CheckIcon/config.tsx +5 -1
package/src/CheckIcon/index.test.tsx +6 -2
package/src/ChevronIcon/__snapshots__/index.test.tsx.snap +13 -1
package/src/ChevronIcon/config.tsx +17 -4
package/src/ChevronIcon/index.test.tsx +6 -2
package/src/CloseIcon/__snapshots__/index.test.tsx.snap +4 -1
package/src/CloseIcon/config.tsx +5 -1
package/src/DownloadIcon/__snapshots__/index.test.tsx.snap +70 -14
package/src/DownloadIcon/config.tsx +8 -4
package/src/DownloadIcon/index.test.tsx +9 -3
package/src/ExclamationIcon/__snapshots__/index.test.tsx.snap +42 -7
package/src/ExclamationIcon/config.tsx +6 -2
package/src/ExclamationIcon/index.test.tsx +12 -4
package/src/GlobeIcon/__snapshots__/index.test.tsx.snap +16 -4
package/src/GlobeIcon/config.tsx +5 -1
package/src/GlobeIcon/index.test.tsx +3 -1
package/src/Icon/__snapshots__/index.test.tsx.snap +40 -1
package/src/Icon/index.test.tsx +3 -1
package/src/Icon/index.tsx +1 -1
package/src/{Base → IconBase}/index.tsx +10 -9
package/src/LockIcon/__snapshots__/index.test.tsx.snap +28 -7
package/src/LockIcon/config.tsx +5 -1
package/src/LockIcon/index.test.tsx +6 -2
package/src/LoginIcon/__snapshots__/index.test.tsx.snap +42 -7
package/src/LoginIcon/config.tsx +9 -2
package/src/LoginIcon/index.test.tsx +6 -2
package/src/MinusIcon/__snapshots__/index.test.tsx.snap +28 -7
package/src/MinusIcon/config.tsx +3 -2
package/src/MinusIcon/index.test.tsx +6 -2
package/src/MoreVertIcon/__snapshots__/index.test.tsx.snap +72 -9
package/src/MoreVertIcon/config.tsx +4 -3
package/src/MoreVertIcon/index.test.tsx +12 -4
package/src/PdfFileIcon/__snapshots__/index.test.tsx.snap +126 -21
package/src/PdfFileIcon/config.tsx +18 -8
package/src/PdfFileIcon/index.test.tsx +6 -2
package/src/PlusIcon/__snapshots__/index.test.tsx.snap +28 -7
package/src/PlusIcon/config.tsx +5 -1
package/src/PlusIcon/index.test.tsx +6 -2
package/src/PrintIcon/__snapshots__/index.test.tsx.snap +42 -7
package/src/PrintIcon/config.tsx +6 -2
package/src/PrintIcon/index.test.tsx +6 -2
package/src/ReplyIcon/__snapshots__/index.test.tsx.snap +28 -7
package/src/ReplyIcon/config.tsx +5 -1
package/src/ReplyIcon/index.test.tsx +6 -2
package/src/RestoreIcon/__snapshots__/index.test.tsx.snap +56 -7
package/src/RestoreIcon/config.tsx +7 -3
package/src/RestoreIcon/index.test.tsx +6 -2
package/src/SearchIcon/__snapshots__/index.test.tsx.snap +4 -1
package/src/SearchIcon/config.tsx +5 -1
package/src/SvgIcon/__snapshots__/index.test.tsx.snap +34 -17
package/src/SvgIcon/index.tsx +4 -4
package/src/UncheckIcon/__snapshots__/index.test.tsx.snap +36 -9
package/src/UncheckIcon/config.tsx +5 -1
package/src/UncheckIcon/index.test.tsx +6 -2
package/src/icons.ts +11 -12
package/src/lazy.js +28 -29
package/src/registry.js +79 -35
package/Base/index.js.map +0 -7
package/cjs/Base/index.js.map +0 -7
package/lazy.d.ts +0 -29
package/lazy.js.map +0 -7
package/registry.d.ts +0 -31
package/registry.js.map +0 -7

package/src/AccessibilityIcon/config.tsx CHANGED Viewed

@@ -1,13 +1,15 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 export interface AccessibilityType {}
 export function accessibility(): React.ReactElement {
   return (
     <>
-      <title>Μενού Προσβασιμότητας</title>
-      <circle cx="12" cy="3" r="3" />
-      <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 CHANGED Viewed

@@ -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/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,15 +1,18 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the ArrowIcon with direction down prop 1`] = `
 <body>
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--arrow ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <polygon
+        as="polygon"
+        class=""
         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"
       />
     </svg>
@@ -22,11 +25,14 @@ exports[`renders the ArrowIcon with direction left prop 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--arrow ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <polygon
+        as="polygon"
+        class=""
         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"
       />
     </svg>
@@ -39,11 +45,14 @@ exports[`renders the ArrowIcon with direction up prop 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--arrow ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <polygon
+        as="polygon"
+        class=""
         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"
       />
     </svg>
@@ -56,11 +65,14 @@ exports[`renders the ArrowIcon with no props, direction prop is right by default
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--arrow ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <polygon
+        as="polygon"
+        class=""
         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"
       />
     </svg>

package/src/ArrowIcon/config.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 export interface ArrowType {
   /**
@@ -15,16 +16,28 @@ export const arrow: React.FC<ArrowType> = ({ direction = 'up' }) => {
   return (
     <>
       {direction === 'left' && (
-        <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' && (
-        <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' && (
-        <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' && (
-        <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/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,28 +1,36 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BurgerIcon prop color= "error" 1`] = `
 <body>
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--burger ds-svg-icon--error ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--burger ds-svg-icon ds-svg-icon--error"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class=""
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"
@@ -38,24 +46,32 @@ exports[`renders the BurgerIcon prop color= "white" 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--burger ds-svg-icon ds-svg-icon--white"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class=""
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"
@@ -71,24 +87,32 @@ exports[`renders the BurgerIcon props active color= "white" 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--burger ds-svg-icon ds-svg-icon--white"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class="ds-svg-icon--burger--active"
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"
@@ -104,24 +128,32 @@ exports[`renders the BurgerIcon with no props 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--burger ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class=""
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"
@@ -137,24 +169,32 @@ exports[`renders the BurgerIcon with prop active=true 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--burger ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class="ds-svg-icon--burger--active"
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"
@@ -170,24 +210,32 @@ exports[`renders the BurgerIcon with prop color=base-content 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--burger ds-svg-icon--base-content ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--burger ds-svg-icon ds-svg-icon--base-content"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <g
+        as="g"
         class=""
       >
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-1"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-2"
           width="20"
         />
         <rect
+          as="rect"
+          class=""
           height="3.3"
           id="ds-svg-icon--burger__line-3"
           width="20"

package/src/BurgerIcon/config.tsx CHANGED Viewed

@@ -1,21 +1,38 @@
 import React from 'react';
 import clsx from 'clsx';
+import IconBase from '@digigov/react-icons/IconBase';
-export type BurgerType = {
+export interface BurgerType {
   active?: boolean;
-};
+}
 export const burger: React.FC<BurgerType> = ({ active = false }) => {
   return (
-    <g
+    <IconBase
+      as="g"
       className={clsx({
         [`ds-svg-icon--burger--active`]: active,
       })}
     >
-      <rect id="ds-svg-icon--burger__line-1" width="20" height="3.3" />
-      <rect id="ds-svg-icon--burger__line-2" width="20" height="3.3" />
-      <rect id="ds-svg-icon--burger__line-3" width="20" height="3.3" />
-    </g>
+      <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 CHANGED Viewed

@@ -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/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,15 +1,18 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the CancelIcon with no props 1`] = `
 <body>
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--cancel ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -22,11 +25,14 @@ exports[`renders the CancelIcon with prop color=error and size= xl 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--warning ds-svg-icon--xl"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -39,11 +45,14 @@ exports[`renders the CancelIcon with prop color=warning 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--warning"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -56,11 +65,14 @@ exports[`renders the CancelIcon with prop color=warning and size=s 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--warning ds-svg-icon--sm"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -73,11 +85,14 @@ exports[`renders the CancelIcon with prop color=white 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--white ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--white"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -90,11 +105,14 @@ exports[`renders the CancelIcon with prop size=m 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--md"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>
@@ -107,11 +125,14 @@ exports[`renders the CancelIcon with prop size=xl 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
+      as="svg"
+      class="ds-svg-icon--cancel ds-svg-icon ds-svg-icon--xl"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         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"
       />
     </svg>

package/src/CancelIcon/config.tsx CHANGED Viewed

@@ -1,11 +1,15 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 export interface CancelType {}
 export function cancel(): React.ReactElement {
   return (
     <>
-      <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 CHANGED Viewed

@@ -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/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,15 +1,18 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the CaretIcon with direction down prop 1`] = `
 <body>
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--caret ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         d="M22,6H2l10,12L22,6z"
       />
     </svg>
@@ -22,11 +25,14 @@ exports[`renders the CaretIcon with direction right prop 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--caret ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         d="M6,2v20l12-10L6,2z"
       />
     </svg>
@@ -39,11 +45,14 @@ exports[`renders the CaretIcon with direction up prop 1`] = `
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--caret ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         d="M2,18h20L12,6L2,18z"
       />
     </svg>
@@ -56,11 +65,14 @@ exports[`renders the CaretIcon with no props, direction prop is left by default
   <div>
     <svg
       aria-hidden="true"
+      as="svg"
       class="ds-svg-icon--caret ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
       <path
+        as="path"
+        class=""
         d="M18,22V2L6,12L18,22z"
       />
     </svg>

package/src/CaretIcon/config.tsx CHANGED Viewed

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