@digigov/react-icons 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/{es/registry.js → registry/index.js}

@@ -1,15 +1,17 @@
-import * as _digigov_react_icons_AccessibilityIcon from '@digigov/react-icons/AccessibilityIcon';
-import * as _digigov_react_icons_ArrowIcon from '@digigov/react-icons/ArrowIcon';
-import * as _digigov_react_icons_BurgerIcon from '@digigov/react-icons/BurgerIcon';
-import * as _digigov_react_icons_CaretIcon from '@digigov/react-icons/CaretIcon';
-import * as _digigov_react_icons_CheckIcon from '@digigov/react-icons/CheckIcon';
-import * as _digigov_react_icons_CloseIcon from '@digigov/react-icons/CloseIcon';
-import * as _digigov_react_icons_GlobeIcon from '@digigov/react-icons/GlobeIcon';
-import * as _digigov_react_icons_icons from '@digigov/react-icons/icons';
-import * as _digigov_react_icons from '@digigov/react-icons';
-import * as _digigov_react_icons_MoreVertIcon from '@digigov/react-icons/MoreVertIcon';
-import * as _digigov_react_icons_SearchIcon from '@digigov/react-icons/SearchIcon';
-import * as _digigov_react_icons_UncheckIcon from '@digigov/react-icons/UncheckIcon';
+import * as _digigov_react_icons_AccessibilityIcon from "./AccessibilityIcon";
+import * as _digigov_react_icons_ArrowIcon from "./ArrowIcon";
+import * as _digigov_react_icons_BurgerIcon from "./BurgerIcon";
+import * as _digigov_react_icons_CaretIcon from "./CaretIcon";
+import * as _digigov_react_icons_CheckIcon from "./CheckIcon";
+import * as _digigov_react_icons_ChevronIcon from "./ChevronIcon";
+import * as _digigov_react_icons_CloseIcon from "./CloseIcon";
+import * as _digigov_react_icons_GlobeIcon from "./GlobeIcon";
+import * as _digigov_react_icons_Icon from "./Icon";
+import * as _digigov_react_icons_icons from "./icons";
+import * as _digigov_react_icons from "./";
+import * as _digigov_react_icons_MoreVertIcon from "./MoreVertIcon";
+import * as _digigov_react_icons_SearchIcon from "./SearchIcon";
+import * as _digigov_react_icons_UncheckIcon from "./UncheckIcon";
 
 function lazyImport(pkgImport) {
   // eslint-disable-next-line no-undef
@@ -32,8 +34,10 @@ export default {
   '@digigov/react-icons/BurgerIcon': lazyImport(_digigov_react_icons_BurgerIcon),
   '@digigov/react-icons/CaretIcon': lazyImport(_digigov_react_icons_CaretIcon),
   '@digigov/react-icons/CheckIcon': lazyImport(_digigov_react_icons_CheckIcon),
+  '@digigov/react-icons/ChevronIcon': lazyImport(_digigov_react_icons_ChevronIcon),
   '@digigov/react-icons/CloseIcon': lazyImport(_digigov_react_icons_CloseIcon),
   '@digigov/react-icons/GlobeIcon': lazyImport(_digigov_react_icons_GlobeIcon),
+  '@digigov/react-icons/Icon': lazyImport(_digigov_react_icons_Icon),
   '@digigov/react-icons/icons': lazyImport(_digigov_react_icons_icons),
   '@digigov/react-icons': lazyImport(_digigov_react_icons),
   '@digigov/react-icons/MoreVertIcon': lazyImport(_digigov_react_icons_MoreVertIcon),

package/registry/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/registry/index.js"
+}

package/registry.d.ts

@@ -4,8 +4,10 @@ declare var _default: {
     '@digigov/react-icons/BurgerIcon': {};
     '@digigov/react-icons/CaretIcon': {};
     '@digigov/react-icons/CheckIcon': {};
+    '@digigov/react-icons/ChevronIcon': {};
     '@digigov/react-icons/CloseIcon': {};
     '@digigov/react-icons/GlobeIcon': {};
+    '@digigov/react-icons/Icon': {};
     '@digigov/react-icons/icons': {};
     '@digigov/react-icons': {};
     '@digigov/react-icons/MoreVertIcon': {};

package/src/AccessibilityIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const AccessibilityIcon: React.FC<IconProps<'accessibility'>> = (
   props

package/src/ArrowIcon/config.tsx

@@ -6,25 +6,25 @@ export interface ArrowType {
   * @value 'right'
   * @value 'up'
   * @value 'down'
-  * @default 'right'
+  * @default 'up'
   */
   direction?: 'left' | 'right' | 'up' | 'down'
 }
 
-export const arrow: React.FC<ArrowType> = ({ direction = 'right' }) => {
+export const arrow: React.FC<ArrowType> = ({ direction = 'up' }) => {
   return (
     <>
       {direction === 'left' && (
-        <path d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z" />
+        <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' && (
-        <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" />
+        <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' && (
-        <path d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z" />
+        <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' && (
-        <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
+        <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/ArrowIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const ArrowIcon: React.FC<IconProps<'arrow'>> = (props) => {
   return <Icon {...props} icon="arrow"></Icon>;

package/src/BurgerIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const BurgerIcon: React.FC<IconProps<'burger'>> = (props) => {
   return <Icon {...props} icon="burger"></Icon>;

package/src/CaretIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const CaretIcon: React.FC<IconProps<'caret'>> = (props) => {
   return <Icon {...props} icon="caret"></Icon>;

package/src/CheckIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const CheckIcon: React.FC<IconProps<'check'>> = (props) => {
   return <Icon {...props} icon="check"></Icon>;

package/src/ChevronIcon/config.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface ChevronType {
+  /**
+  * direction sets the direction of the chevron icon.
+  * @value 'left'
+  * @value 'right'
+  * @value 'up'
+  * @value 'down'
+  * @default 'right'
+  */
+  direction?: 'left' | 'right' | 'up' | 'down'
+}
+
+export const chevron: React.FC<ChevronType> = ({ direction = 'right' }) => {
+  return (
+    <>
+      {direction === 'left' && (
+        <path d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z" />
+      )}
+      {direction === 'right' && (
+        <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" />
+      )}
+      {direction === 'up' && (
+        <path d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z" />
+      )}
+      {direction === 'down' && (
+        <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
+      )}
+    </>
+  );
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+chevron.props = ['direction'];
+
+export default chevron;

package/src/ChevronIcon/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ChevronIcon from '@digigov/react-icons/ChevronIcon';
+
+it('renders the ChevronIcon with no props, direction prop is right by default', () => {
+  expect(mount(<ChevronIcon />)).toMatchSnapshot();
+});
+
+it('renders the ChevronIcon with direction left prop', () => {
+  expect(mount(<ChevronIcon direction="left" />)).toMatchSnapshot();
+});
+
+it('renders the ChevronIcon with direction up prop', () => {
+  expect(mount(<ChevronIcon direction="up" />)).toMatchSnapshot();
+});
+
+it('renders the ChevronIcon with direction down prop', () => {
+  expect(mount(<ChevronIcon direction="down" />)).toMatchSnapshot();
+});

package/src/ChevronIcon/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
+
+export const ChevronIcon: React.FC<IconProps<'chevron'>> = (props) => {
+  return <Icon {...props} icon="chevron"></Icon>;
+};
+
+export default ChevronIcon;

package/src/CloseIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const CloseIcon: React.FC<IconProps<'close'>> = (props) => {
   return <Icon {...props} icon="close"></Icon>;

package/src/GlobeIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const GlobeIcon: React.FC<IconProps<'globe'>> = (props) => {
   return <Icon {...props} icon="globe"></Icon>;

package/src/Icon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Icon prop icon= "caret" 1`] = `
+<ForwardRef(Icon)
+  icon="caret"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--caret"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--caret govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--caret govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <caret>
+          <path
+            d="M18,22V2L6,12L18,22z"
+          />
+        </caret>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon prop icon= "caret" and direction=left 1`] = `
+<ForwardRef(Icon)
+  direction="left"
+  icon="caret"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--caret"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--caret govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--caret govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <caret
+          direction="left"
+        >
+          <path
+            d="M18,22V2L6,12L18,22z"
+          />
+        </caret>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon prop icon= "check" 1`] = `
+<ForwardRef(Icon)
+  icon="check"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <check>
+          <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"
+          />
+        </check>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon prop icon= "close" 1`] = `
+<ForwardRef(Icon)
+  icon="close"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--close"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--close govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--close govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <close>
+          <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 "
+          />
+        </close>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon prop icon= "uncheck" 1`] = `
+<ForwardRef(Icon)
+  icon="uncheck"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--uncheck"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--uncheck govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--uncheck govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <uncheck>
+          <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"
+          />
+        </uncheck>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon props icon= "moreVert" 1`] = `
+<ForwardRef(Icon)
+  icon="moreVert"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--moreVert"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--moreVert govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--moreVert govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <moreVert>
+          <circle
+            cx="12"
+            cy="5"
+            r="2"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="2"
+          />
+          <circle
+            cx="12"
+            cy="19"
+            r="2"
+          />
+        </moreVert>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon with no props 1`] = `
+<ForwardRef(Icon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--arrow"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--arrow govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--arrow govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <arrow>
+          <path
+            d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+          />
+        </arrow>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon with prop icon=arrow and direction=up 1`] = `
+<ForwardRef(Icon)
+  direction="up"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--arrow"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--arrow govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--arrow govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <arrow
+          direction="up"
+        >
+          <path
+            d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
+          />
+        </arrow>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon with prop prop icon=burger 1`] = `
+<ForwardRef(Icon)
+  icon="burger"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--burger"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--burger govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--burger govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <burger>
+          <g
+            className=""
+          >
+            <rect
+              height="3.3"
+              id="govgr-svg-icon--burger__line-1"
+              width="20"
+            />
+            <rect
+              height="3.3"
+              id="govgr-svg-icon--burger__line-2"
+              width="20"
+            />
+            <rect
+              height="3.3"
+              id="govgr-svg-icon--burger__line-3"
+              width="20"
+            />
+          </g>
+        </burger>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;
+
+exports[`renders the Icon with prop prop icon=globe 1`] = `
+<ForwardRef(Icon)
+  icon="globe"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--globe"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-svg-icon--globe govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--globe govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <globe>
+          <path
+            d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+          />
+           
+        </globe>
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(Icon)>
+`;

package/src/Icon/index.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Icon from '@digigov/react-icons/Icon';
+
+it('renders the Icon with no props', () => {
+  expect(mount(<Icon />)).toMatchSnapshot();
+});
+
+it('renders the Icon with prop icon=arrow and direction=up', () => {
+  expect(mount(<Icon direction="up" />)).toMatchSnapshot();
+});
+it('renders the Icon with prop prop icon=burger', () => {
+  expect(mount(<Icon icon="burger" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "caret"', () => {
+  expect(mount(<Icon icon="caret" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "caret" and direction=left', () => {
+  expect(mount(<Icon icon="caret" direction="left" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "check"', () => {
+  expect(mount(<Icon icon="check" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "close"', () => {
+  expect(mount(<Icon icon="close" />)).toMatchSnapshot();
+});
+it('renders the Icon with prop prop icon=globe', () => {
+  expect(mount(<Icon icon="globe" />)).toMatchSnapshot();
+});
+it('renders the Icon props icon= "moreVert"', () => {
+  expect(mount(<Icon icon="moreVert" />)).toMatchSnapshot();
+});
+it('renders the Icon prop icon= "uncheck"', () => {
+  expect(mount(<Icon icon="uncheck" />)).toMatchSnapshot();
+});

package/src/Icon/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import * as icons from '@digigov/react-icons/icons';
+import type { IconTypes } from '@digigov/react-icons/icons';
+
+export type IconProps<N extends keyof IconTypes> = SvgIconProps &
+  IconTypes[N] & {
+    /**
+     * ref is optional.
+     * ref prop declares the reference of the svg icon component.
+     * It can be used to to access the DOM element and the React element.
+     */
+    ref?: React.Ref<SVGSVGElement>;
+    /**
+     * icon is optional, but strongly recommended.
+     * Default value is 'chevron'.
+     * Use this prop to display the icon you want.
+     */
+    icon?: N;
+  };
+
+type IconComponent = <C extends keyof IconTypes>(
+  props: IconProps<C>
+) => React.ReactElement | null;
+export type IconNames = keyof IconTypes;
+/**
+ * Icon is used whenever we need a GOV.GR icon.
+ * Choose the icon from the list in icon prop.
+ */
+export const Icon: IconComponent = React.forwardRef<
+  SVGSVGElement,
+  IconProps<IconNames>
+>(function Icon(
+  { icon = 'chevron', className, ...props }: IconProps<IconNames>,
+  ref
+) {
+  const IconComponent = icons[icon];
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const iconProps = IconComponent?.props.reduce((compProps, propName) => {
+    const value = props[propName];
+    delete props[propName];
+    return {
+      ...compProps,
+      [propName]: value,
+    };
+  }, {});
+
+  return (
+    <SvgIcon
+      ref={ref}
+      {...props}
+      className={clsx(className, {
+        [`govgr-svg-icon--${icon}`]: true,
+      })}
+    >
+      <IconComponent {...iconProps} />
+    </SvgIcon>
+  );
+});
+
+export default Icon;

package/src/MoreVertIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconProps } from '@digigov/react-core/Icon';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
 
 export const MoreVertIcon: React.FC<IconProps<'moreVert'>> = (props) => {
   return <Icon {...props} icon="moreVert"></Icon>;