@digigov/react-icons 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/cjs/AccessibilityIcon/index.test/index.js

@@ -21,40 +21,40 @@ it('renders the AccessibilityIcon with prop size=l', function () {
   expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
 });
 var _ref4 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "dark"
+  color: "base-content"
 });
-it('renders the AccessibilityIcon with prop variant=dark', function () {
+it('renders the AccessibilityIcon with prop color=base-content', function () {
   expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
 });
 var _ref5 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "primary"
+  color: "primary"
 });
-it('renders the AccessibilityIcon with prop variant=primary', function () {
+it('renders the AccessibilityIcon with prop color=primary', function () {
   expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
 });
 var _ref6 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "success"
+  color: "success"
 });
-it('renders the AccessibilityIcon with prop variant=success', function () {
+it('renders the AccessibilityIcon with prop color=success', function () {
   expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
 });
 var _ref7 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "error"
+  color: "error"
 });
-it('renders the AccessibilityIcon with prop variant=error', function () {
+it('renders the AccessibilityIcon with prop color=error', function () {
   expect((0, _enzyme.mount)(_ref7)).toMatchSnapshot();
 });
 var _ref8 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "warning",
+  color: "warning",
   size: "sm"
 });
-it('renders the AccessibilityIcon with prop variant=warning and size=s', function () {
+it('renders the AccessibilityIcon with prop color=warning and size=s', function () {
   expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
 });
 var _ref9 = /*#__PURE__*/_react["default"].createElement(_AccessibilityIcon["default"], {
-  variant: "warning",
+  color: "warning",
   size: "xl"
 });
-it('renders the AccessibilityIcon with prop variant=error and size= xl', function () {
+it('renders the AccessibilityIcon with prop color=error and size= xl', function () {
   expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
 });

package/cjs/ArrowIcon/__snapshots__/index.test.tsx.snap

@@ -27,8 +27,8 @@ exports[`renders the ArrowIcon with direction down prop 1`] = `
           <arrow
             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"
             />
           </arrow>
         </svg>
@@ -65,8 +65,8 @@ exports[`renders the ArrowIcon with direction left prop 1`] = `
           <arrow
             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"
             />
           </arrow>
         </svg>
@@ -103,8 +103,8 @@ exports[`renders the ArrowIcon with direction up prop 1`] = `
           <arrow
             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"
             />
           </arrow>
         </svg>
@@ -136,8 +136,8 @@ exports[`renders the ArrowIcon with no props, direction prop is right by default
           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"
+            <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"
             />
           </arrow>
         </svg>

package/cjs/Base/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Base = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _excluded = ["as", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "m", "mt", "mb", "ml", "mr", "mx", "my", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "p", "pt", "pb", "pr", "pl", "px", "py", "printHidden", "printVisible", "hidden", "xsUpHidden", "smUpHidden", "mdUpHidden", "lgUpHidden", "xlUpHidden", "xsHidden", "smHidden", "mdHidden", "lgHidden", "xlHidden", "children", "className"];
+// This is the first reusable type utility we built
+
+// This is a new type utitlity with ref!
+
+// This is the type for the "ref" only
+
+/**
+ * This is the updated component props using PolymorphicComponentPropWithRef
+ */
+
+/**
+ * This is the type used in the type annotation for the component
+ */
+
+var Base = exports.Base = /*#__PURE__*/_react["default"].forwardRef(function Base(_ref, ref) {
+  var as = _ref.as,
+    margin = _ref.margin,
+    marginTop = _ref.marginTop,
+    marginBottom = _ref.marginBottom,
+    marginLeft = _ref.marginLeft,
+    marginRight = _ref.marginRight,
+    m = _ref.m,
+    mt = _ref.mt,
+    mb = _ref.mb,
+    ml = _ref.ml,
+    mr = _ref.mr,
+    mx = _ref.mx,
+    my = _ref.my,
+    padding = _ref.padding,
+    paddingTop = _ref.paddingTop,
+    paddingBottom = _ref.paddingBottom,
+    paddingLeft = _ref.paddingLeft,
+    paddingRight = _ref.paddingRight,
+    p = _ref.p,
+    pt = _ref.pt,
+    pb = _ref.pb,
+    pr = _ref.pr,
+    pl = _ref.pl,
+    px = _ref.px,
+    py = _ref.py,
+    printHidden = _ref.printHidden,
+    printVisible = _ref.printVisible,
+    hidden = _ref.hidden,
+    xsUpHidden = _ref.xsUpHidden,
+    smUpHidden = _ref.smUpHidden,
+    mdUpHidden = _ref.mdUpHidden,
+    lgUpHidden = _ref.lgUpHidden,
+    xlUpHidden = _ref.xlUpHidden,
+    xsHidden = _ref.xsHidden,
+    smHidden = _ref.smHidden,
+    mdHidden = _ref.mdHidden,
+    lgHidden = _ref.lgHidden,
+    xlHidden = _ref.xlHidden,
+    children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var Component = as || 'span';
+  return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+    className: (0, _clsx["default"])(className, (paddingBottom !== undefined ? true : undefined) && "ds-pb-".concat(paddingBottom), (marginBottom !== undefined ? true : undefined) && "ds-mb-".concat(marginBottom), (paddingRight !== undefined ? true : undefined) && "ds-pr-".concat(paddingRight), (marginRight !== undefined ? true : undefined) && "ds-mr-".concat(marginRight), (paddingLeft !== undefined ? true : undefined) && "ds-pl-".concat(paddingLeft), (marginLeft !== undefined ? true : undefined) && "ds-ml-".concat(marginLeft), (paddingTop !== undefined ? true : undefined) && "ds-pt-".concat(paddingTop), (marginTop !== undefined ? true : undefined) && "ds-mt-".concat(marginTop), (padding !== undefined ? true : undefined) && "ds-p-".concat(padding), (margin !== undefined ? true : undefined) && "ds-m-".concat(margin), (mt !== undefined ? true : undefined) && "ds-mt-".concat(mt), (mb !== undefined ? true : undefined) && "ds-mb-".concat(mb), (mr !== undefined ? true : undefined) && "ds-mr-".concat(mr), (ml !== undefined ? true : undefined) && "ds-ml-".concat(ml), (mx !== undefined ? true : undefined) && "ds-mx-".concat(mx), (my !== undefined ? true : undefined) && "ds-my-".concat(my), (pt !== undefined ? true : undefined) && "ds-pt-".concat(pt), (pb !== undefined ? true : undefined) && "ds-pb-".concat(pb), (pr !== undefined ? true : undefined) && "ds-pr-".concat(pr), (pl !== undefined ? true : undefined) && "ds-pl-".concat(pl), (px !== undefined ? true : undefined) && "ds-px-".concat(px), (py !== undefined ? true : undefined) && "ds-py-".concat(py), (m !== undefined ? true : undefined) && "ds-m-".concat(m), (p !== undefined ? true : undefined) && "ds-p-".concat(p), printVisible === 'inline' && 'ds-print-visible-inline', printVisible === 'block' && 'ds-print-visible-block', !!printHidden && 'ds-print-hidden', !!xsUpHidden && 'ds-hidden-xs-up', !!smUpHidden && 'ds-hidden-sm-up', !!mdUpHidden && 'ds-hidden-md-up', !!lgUpHidden && 'ds-hidden-lg-up', !!xlUpHidden && 'ds-hidden-xl-up', !!xsHidden && 'ds-hidden-xs', !!smHidden && 'ds-hidden-sm', !!mdHidden && 'ds-hidden-md', !!lgHidden && 'ds-hidden-lg', !!xlHidden && 'ds-hidden-xl', !!hidden && 'ds-hidden'),
+    ref: ref
+  }, props), children);
+});
+var _default = exports["default"] = Base;

package/cjs/BurgerIcon/__snapshots__/index.test.tsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the BurgerIcon prop variant= "error" 1`] = `
+exports[`renders the BurgerIcon prop color= "error" 1`] = `
 <BurgerIcon
-  variant="error"
+  color="error"
 >
   <ForwardRef(Icon)
+    color="error"
     icon="burger"
-    variant="error"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="error"
+      color="error"
     >
       <ForwardRef(Base)
         aria-hidden="true"
@@ -53,28 +53,28 @@ exports[`renders the BurgerIcon prop variant= "error" 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon prop variant= "light" 1`] = `
+exports[`renders the BurgerIcon prop color= "white" 1`] = `
 <BurgerIcon
-  variant="light"
+  color="white"
 >
   <ForwardRef(Icon)
+    color="white"
     icon="burger"
-    variant="light"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="light"
+      color="white"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--burger ds-svg-icon--light ds-svg-icon"
+        className="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--burger ds-svg-icon--light ds-svg-icon"
+          className="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -106,30 +106,30 @@ exports[`renders the BurgerIcon prop variant= "light" 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon props active variant= "light" 1`] = `
+exports[`renders the BurgerIcon props active color= "white" 1`] = `
 <BurgerIcon
   active={true}
-  variant="light"
+  color="white"
 >
   <ForwardRef(Icon)
     active={true}
+    color="white"
     icon="burger"
-    variant="light"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="light"
+      color="white"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--burger ds-svg-icon--light ds-svg-icon"
+        className="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--burger ds-svg-icon--light ds-svg-icon"
+          className="ds-svg-icon--burger ds-svg-icon--white ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -266,28 +266,28 @@ exports[`renders the BurgerIcon with prop active=true 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon with prop variant=dark 1`] = `
+exports[`renders the BurgerIcon with prop color=base-content 1`] = `
 <BurgerIcon
-  variant="dark"
+  color="base-content"
 >
   <ForwardRef(Icon)
+    color="base-content"
     icon="burger"
-    variant="dark"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="dark"
+      color="base-content"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--burger ds-svg-icon--dark ds-svg-icon"
+        className="ds-svg-icon--burger ds-svg-icon--base-content ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--burger ds-svg-icon--dark ds-svg-icon"
+          className="ds-svg-icon--burger ds-svg-icon--base-content ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >

package/cjs/BurgerIcon/index.test/index.js

@@ -15,27 +15,27 @@ it('renders the BurgerIcon with prop active=true', function () {
   expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
 });
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], {
-  variant: "dark"
+  color: "base-content"
 });
-it('renders the BurgerIcon with prop variant=dark', function () {
+it('renders the BurgerIcon with prop color=base-content', function () {
   expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
 });
 var _ref4 = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], {
-  variant: "light"
+  color: "white"
 });
-it('renders the BurgerIcon prop variant= "light"', function () {
+it('renders the BurgerIcon prop color= "white"', function () {
   expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
 });
 var _ref5 = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], {
-  variant: "error"
+  color: "error"
 });
-it('renders the BurgerIcon prop variant= "error"', function () {
+it('renders the BurgerIcon prop color= "error"', function () {
   expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
 });
 var _ref6 = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], {
   active: true,
-  variant: "light"
+  color: "white"
 });
-it('renders the BurgerIcon props active variant= "light"', function () {
+it('renders the BurgerIcon props active color= "white"', function () {
   expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
 });

package/cjs/CancelIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CancelIcon with no props 1`] = `
+<CancelIcon>
+  <ForwardRef(Icon)
+    icon="cancel"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop color=error and size= xl 1`] = `
+<CancelIcon
+  color="warning"
+  size="xl"
+>
+  <ForwardRef(Icon)
+    color="warning"
+    icon="cancel"
+    size="xl"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      color="warning"
+      size="xl"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop color=warning 1`] = `
+<CancelIcon
+  color="warning"
+>
+  <ForwardRef(Icon)
+    color="warning"
+    icon="cancel"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      color="warning"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop color=warning and size=s 1`] = `
+<CancelIcon
+  color="warning"
+  size="sm"
+>
+  <ForwardRef(Icon)
+    color="warning"
+    icon="cancel"
+    size="sm"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      color="warning"
+      size="sm"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop color=white 1`] = `
+<CancelIcon
+  color="white"
+>
+  <ForwardRef(Icon)
+    color="white"
+    icon="cancel"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      color="white"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--white ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--white ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop size=m 1`] = `
+<CancelIcon
+  size="md"
+>
+  <ForwardRef(Icon)
+    icon="cancel"
+    size="md"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      size="md"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;
+
+exports[`renders the CancelIcon with prop size=xl 1`] = `
+<CancelIcon
+  size="xl"
+>
+  <ForwardRef(Icon)
+    icon="cancel"
+    size="xl"
+  >
+    <ForwardRef(SvgIcon)
+      className="ds-svg-icon--cancel"
+      size="xl"
+    >
+      <ForwardRef(Base)
+        aria-hidden="true"
+        as="svg"
+        className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <svg
+          aria-hidden="true"
+          className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <cancel>
+            <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"
+            />
+          </cancel>
+        </svg>
+      </ForwardRef(Base)>
+    </ForwardRef(SvgIcon)>
+  </ForwardRef(Icon)>
+</CancelIcon>
+`;

package/cjs/CancelIcon/config/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cancel = cancel;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ref = /*#__PURE__*/_react["default"].createElement("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"
+});
+function cancel() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref);
+}
+cancel.props = [];
+var _default = exports["default"] = cancel;

package/cjs/CancelIcon/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CancelIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("@digigov/react-icons/Icon"));
+var CancelIcon = exports.CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({}, props, {
+    icon: "cancel"
+  }));
+};
+var _default = exports["default"] = CancelIcon;