@codecademy/gamut-icons 8.1.1 → 8.1.2-alpha.0dbbca.0

package/dist/icons/mini/MiniKebabMenuIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniKebabMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniKebabMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniKebabMenuIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "#fff",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,11 +41,21 @@ export var MiniKebabMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, svg
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("g", {
-      clipPath: "url(#mini-kebab-menu-icon_svg__mini-kebab-menu-icon_svg__clip0)",
-      fill: "currentColor",
-      children: /*#__PURE__*/_jsx("path", {
-        d: "M5.714 2.286a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.571 0 2.286 2.286 0 00-4.57 0z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("g", {
+        clipPath: "url(#mini-kebab-menu-icon_svg__mini-kebab-menu-icon_svg__clip0)",
+        fill: "#fff",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M5.714 2.286a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.572 0 2.286 2.286 0 00-4.572 0zm0 5.714a2.286 2.286 0 104.571 0 2.286 2.286 0 00-4.57 0z"
+        })
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
       })
     })]
   }));

package/dist/icons/mini/MiniRemoveCircleIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniRemoveCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniRemoveCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniRemoveCircleIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,8 +41,18 @@ export var MiniRemoveCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm25 80H45a10 10 0 010-20h50a10 10 0 010 20z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm25 80H45a10 10 0 010-20h50a10 10 0 010 20z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniRibbonIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniRibbonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniRibbonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniRibbonIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,13 +41,23 @@ export var MiniRibbonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.706 14.58l-4.118-2.662c-.17-.11-.377-.17-.588-.17-.211 0-.417.06-.588.17L3.294 14.58a.553.553 0 01-.52.037.483.483 0 01-.2-.163.409.409 0 01-.074-.232v-12c0-.236.105-.462.293-.629a1.07 1.07 0 01.707-.26h9c.265 0 .52.094.707.26a.842.842 0 01.293.629v12a.41.41 0 01-.074.232.483.483 0 01-.2.163.553.553 0 01-.52-.037v0z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M12.706 14.58l-4.118-2.662c-.17-.11-.377-.17-.588-.17-.211 0-.417.06-.588.17L3.294 14.58a.553.553 0 01-.52.037.483.483 0 01-.2-.163.409.409 0 01-.074-.232v-12c0-.236.105-.462.293-.629a1.07 1.07 0 01.707-.26h9c.265 0 .52.094.707.26a.842.842 0 01.293.629v12a.41.41 0 01-.074.232.483.483 0 01-.2.163.553.553 0 01-.52-.037v0z",
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniStarIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniStarIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniStarIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniStarIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,8 +41,18 @@ export var MiniStarIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M139.48 53.16A10.41 10.41 0 00131 46l-35.77-5.4L79.4 8.48a10.87 10.87 0 00-18.8 0L44.39 40.87 9 46a10.49 10.49 0 00-5.83 17.9L29 89.34l-6 35.32a10.48 10.48 0 0015.21 11.05L70.22 119l31.67 16.67a10.48 10.48 0 0015.21-11.05l-5.9-35.75 25.63-25a10.42 10.42 0 002.65-10.71z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M139.48 53.16A10.41 10.41 0 00131 46l-35.77-5.4L79.4 8.48a10.87 10.87 0 00-18.8 0L44.39 40.87 9 46a10.49 10.49 0 00-5.83 17.9L29 89.34l-6 35.32a10.48 10.48 0 0015.21 11.05L70.22 119l31.67 16.67a10.48 10.48 0 0015.21-11.05l-5.9-35.75 25.63-25a10.42 10.42 0 002.65-10.71z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/mini/MiniWarningTriangleIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MiniWarningTriangleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var MiniWarningTriangleIcon = /*#__PURE__*/React.forwardRef(function (_re
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('MiniWarningTriangleIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 140 140",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,8 +41,18 @@ export var MiniWarningTriangleIcon = /*#__PURE__*/React.forwardRef(function (_re
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AccountingCoinsIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AccountingCoinsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AccountingCoinsIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AccountingCoinsIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,22 +41,32 @@ export var AccountingCoinsIcon = /*#__PURE__*/React.forwardRef(function (_ref, s
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 15.75,
-      cy: 8.25,
-      r: 7.5,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M6.375 14.092a1.341 1.341 0 00.843 1.245l2.064.826a1.342 1.342 0 01-.5 2.587H6.75m1.5 1.5v-1.5M5.281 8.867a7.5 7.5 0 109.853 9.852M17.25 5.25h-2.033a1.342 1.342 0 00-.5 2.587l2.064.826a1.342 1.342 0 01-.5 2.587H14.25m1.5-6v-1.5m0 9v-1.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: 15.75,
+        cy: 8.25,
+        r: 7.5,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M6.375 14.092a1.341 1.341 0 00.843 1.245l2.064.826a1.342 1.342 0 01-.5 2.587H6.75m1.5 1.5v-1.5M5.281 8.867a7.5 7.5 0 109.853 9.852M17.25 5.25h-2.033a1.342 1.342 0 00-.5 2.587l2.064.826a1.342 1.342 0 01-.5 2.587H14.25m1.5-6v-1.5m0 9v-1.5",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AddBoldIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AddBoldIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AddBoldIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AddBoldIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,8 +41,18 @@ export var AddBoldIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M0 12a1.5 1.5 0 001.5 1.5h8.75a.25.25 0 01.25.25v8.75a1.5 1.5 0 003 0v-8.75a.25.25 0 01.25-.25h8.75a1.5 1.5 0 000-3h-8.75a.25.25 0 01-.25-.25V1.5a1.5 1.5 0 00-3 0v8.75a.25.25 0 01-.25.25H1.5A1.5 1.5 0 000 12z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M0 12a1.5 1.5 0 001.5 1.5h8.75a.25.25 0 01.25.25v8.75a1.5 1.5 0 003 0v-8.75a.25.25 0 01.25-.25h8.75a1.5 1.5 0 000-3h-8.75a.25.25 0 01-.25-.25V1.5a1.5 1.5 0 00-3 0v8.75a.25.25 0 01-.25.25H1.5A1.5 1.5 0 000 12z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AddIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AddIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,13 +41,23 @@ export var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5,
-      d: "M.75 12h22.5M12 .75v22.5"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: "".concat(maskId),
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M.75 12h22.5M12 .75v22.5"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AlarmClockIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AlarmClockIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AlarmClockIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AlarmClockIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,22 +41,32 @@ export var AlarmClockIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 12.75,
-      r: 9,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5,
-      d: "M6 23.25l1.386-2.771M12 12.75H8.609M12 7.5v5.25m-10.5-9l3.75-3M18 23.25l-1.386-2.772M22.5 3.75l-3.75-3"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 12.75,
+        r: 9,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M6 23.25l1.386-2.771M12 12.75H8.609M12 7.5v5.25m-10.5-9l3.75-3M18 23.25l-1.386-2.772M22.5 3.75l-3.75-3"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AlertIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AlertIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AlertIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AlertIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,28 +41,38 @@ export var AlertIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12 16.5a.375.375 0 10.375.375A.375.375 0 0012 16.5h0",
-      strokeLinejoin: "round",
-      strokeLinecap: "round",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      strokeMiterlimit: 10,
-      strokeLinecap: "round",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      d: "M12 13.5V5.25"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 12,
-      r: 11.25,
-      strokeMiterlimit: 10,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M12 16.5a.375.375 0 10.375.375A.375.375 0 0012 16.5h0",
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        strokeMiterlimit: 10,
+        strokeLinecap: "round",
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        d: "M12 13.5V5.25"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 12,
+        r: 11.25,
+        strokeMiterlimit: 10,
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/AmexIcon.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import { Svg } from '../../props';
+import { useIconId } from '../../useIconId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var AmexIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var AmexIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('AmexIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
@@ -38,18 +41,28 @@ export var AmexIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M.504 3.5h23v17h-23z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.5 14.5v-4a1 1 0 012 0v4m-1.996-2h2m5 2v-5l-1.5 2.5-1.5-2.5v5m9-5l2 5m0-5l-2 5m-2.004 0h-1a1 1 0 01-1-1v-3a1 1 0 011-1h1m-1.996 3h2",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "".concat(maskId),
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.504 3.5h23v17h-23z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M4.5 14.5v-4a1 1 0 012 0v4m-1.996-2h2m5 2v-5l-1.5 2.5-1.5-2.5v5m9-5l2 5m0-5l-2 5m-2.004 0h-1a1 1 0 01-1-1v-3a1 1 0 011-1h1m-1.996 3h2",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });