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

package/dist/icons/regular/DataFileBarsShareIcon.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 DataFileBarsShareIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,57 +22,68 @@ export var DataFileBarsShareIcon = /*#__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('DataFileBarsShareIcon');
   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,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'data-file-bars-share'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 13.5,
-      cy: 18,
-      r: 2.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 21,
-      cy: 21,
-      r: 2.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 21,
-      cy: 13.5,
-      r: 2.25,
-      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: "M15.425 16.845l3.65-2.19m-3.487 4.18l3.324 1.33M3.75 14.25h4.5m0 0v-7.5m3 5.25V8.25m-6 6v-4.5m2.25 10.5H2.25a1.5 1.5 0 01-1.5-1.5V2.25a1.5 1.5 0 011.5-1.5h10.629a1.5 1.5 0 011.06.439l2.872 2.872a1.5 1.5 0 01.439 1.06V7.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "data-file-bars-share-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'data-file-bars-share'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 13.5,
+        cy: 18,
+        r: 2.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 21,
+        cy: 21,
+        r: 2.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 21,
+        cy: 13.5,
+        r: 2.25,
+        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: "M15.425 16.845l3.65-2.19m-3.487 4.18l3.324 1.33M3.75 14.25h4.5m0 0v-7.5m3 5.25V8.25m-6 6v-4.5m2.25 10.5H2.25a1.5 1.5 0 01-1.5-1.5V2.25a1.5 1.5 0 011.5-1.5h10.629a1.5 1.5 0 011.06.439l2.872 2.872a1.5 1.5 0 01.439 1.06V7.5"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#data-file-bars-share-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DataTransferVerticalIcon.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 DataTransferVerticalIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,30 +22,41 @@ export var DataTransferVerticalIcon = /*#__PURE__*/React.forwardRef(function (_r
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('DataTransferVerticalIcon');
   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,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'data-transfer-vertical'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5,
-      d: "M9 10.5v12.75m3-3l-3 3-3-3m9-6.75V.75m-3 3l3-3 3 3"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "data-transfer-vertical-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'data-transfer-vertical'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M9 10.5v12.75m3-3l-3 3-3-3m9-6.75V.75m-3 3l3-3 3 3"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#data-transfer-vertical-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DeleteFilledIcon.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 DeleteFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,25 +22,36 @@ export var DeleteFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('DeleteFilledIcon');
   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,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'delete-2'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M20.488 3.515a11.994 11.994 0 100 16.97 12.014 12.014 0 000-16.97zm-3.779 11.764a1 1 0 01-1.409 1.415l-3.11-3.11a.252.252 0 00-.354 0l-3.109 3.11a1.019 1.019 0 01-1.415 0 1 1 0 010-1.415l3.11-3.109a.249.249 0 000-.353l-3.11-3.11a1 1 0 011.41-1.415l3.109 3.11a.25.25 0 00.354 0l3.11-3.11a1 1 0 011.414 1.415l-3.11 3.11a.25.25 0 000 .353z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "delete-2-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'delete-2'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M20.488 3.515a11.994 11.994 0 100 16.97 12.014 12.014 0 000-16.97zm-3.779 11.764a1 1 0 01-1.409 1.415l-3.11-3.11a.252.252 0 00-.354 0l-3.109 3.11a1.019 1.019 0 01-1.415 0 1 1 0 010-1.415l3.11-3.109a.249.249 0 000-.353l-3.11-3.11a1 1 0 011.41-1.415l3.109 3.11a.25.25 0 00.354 0l3.11-3.11a1 1 0 011.414 1.415l-3.11 3.11a.25.25 0 000 .353z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#delete-2-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DeleteIcon.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 DeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,39 +22,50 @@ export var DeleteIcon = /*#__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('DeleteIcon');
   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,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'delete'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 12,
-      r: 11.25,
-      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: "M4.045 19.955l15.91-15.91"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "delete-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'delete'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 12,
+        r: 11.25,
+        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: "M4.045 19.955l15.91-15.91"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#delete-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DiamondIcon.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 DiamondIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,36 +22,47 @@ export var DiamondIcon = /*#__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('DiamondIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     strokeWidth: 1.5,
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'diamond-icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M19.237 3.225a1.5 1.5 0 00-1.2-.6h-12a1.5 1.5 0 00-1.2.6L1.5 7.676a1.5 1.5 0 00.048 1.86l9.338 11.3a1.5 1.5 0 002.3 0l9.338-11.3a1.5 1.5 0 00.048-1.86zM5.349 2.792l6.688 18.583m6.687-18.583l-6.687 18.583M1.198 8.625h21.673",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M7.537 8.625l4.5-6 4.5 6",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "diamond-icon-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'diamond-icon'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M19.237 3.225a1.5 1.5 0 00-1.2-.6h-12a1.5 1.5 0 00-1.2.6L1.5 7.676a1.5 1.5 0 00.048 1.86l9.338 11.3a1.5 1.5 0 002.3 0l9.338-11.3a1.5 1.5 0 00.048-1.86zM5.349 2.792l6.688 18.583m6.687-18.583l-6.687 18.583M1.198 8.625h21.673",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M7.537 8.625l4.5-6 4.5 6",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#diamond-icon-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DiscountStarPremiumFilledIcon.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 DiscountStarPremiumFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,29 +22,40 @@ export var DiscountStarPremiumFilledIcon = /*#__PURE__*/React.forwardRef(functio
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? size : _ref$width,
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
+  var maskId = useIconId('DiscountStarPremiumFilledIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
-    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,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'discount-star-premium-filled'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm0 4.941A7.059 7.059 0 114.941 12 7.066 7.066 0 0112 4.941z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.356 12.854l-.922 2.118a.886.886 0 00.223 1.023.903.903 0 001.064.119l2.287-1.288 2.289 1.288a.914.914 0 001.343-.594.885.885 0 00-.057-.548l-.92-2.118 1.664-1.638a.893.893 0 00.213-.974.87.87 0 00-.824-.536h-1.892l-1.001-2.15a.904.904 0 00-.813-.497.908.908 0 00-.815.495v.011l-.988 2.14H8.304a.871.871 0 00-.613 1.511l1.665 1.638z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "discount-star-premium-filled-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'discount-star-premium-filled'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm0 4.941A7.059 7.059 0 114.941 12 7.066 7.066 0 0112 4.941z",
+        fill: "#fff"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9.356 12.854l-.922 2.118a.886.886 0 00.223 1.023.903.903 0 001.064.119l2.287-1.288 2.289 1.288a.914.914 0 001.343-.594.885.885 0 00-.057-.548l-.92-2.118 1.664-1.638a.893.893 0 00.213-.974.87.87 0 00-.824-.536h-1.892l-1.001-2.15a.904.904 0 00-.813-.497.908.908 0 00-.815.495v.011l-.988 2.14H8.304a.871.871 0 00-.613 1.511l1.665 1.638z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#discount-star-premium-filled-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/DownloadIcon.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 DownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,30 +22,41 @@ export var DownloadIcon = /*#__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('DownloadIcon');
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
+    fill: "#fff",
     role: "img",
     "aria-hidden": "true",
+    "pointer-events": "none",
     width: width,
     height: height,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'download'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.001 3.75v12m-4.5-4.5l4.5 4.5 4.5-4.5m6.75 4.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "download-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'download'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.001 3.75v12m-4.5-4.5l4.5 4.5 4.5-4.5m6.75 4.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#download-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/EarthIcon.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 EarthIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
@@ -21,12 +22,14 @@ export var EarthIcon = /*#__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('EarthIcon');
   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,
@@ -35,17 +38,29 @@ export var EarthIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("g", {
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 8.75,
-      children: [/*#__PURE__*/_jsx("path", {
-        d: "M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0z"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M54.186 133.706C45.307 120.686 39.375 97.026 39.375 70s5.933-50.686 14.81-63.706M4.375 70h131.25M14.478 105h111.044M14.478 35h111.044M85.814 6.294c8.879 13.02 14.811 36.68 14.811 63.706s-5.932 50.686-14.81 63.706"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "earth-".concat(maskId),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'earth'
+      }), /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 8.75,
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0z"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M54.186 133.706C45.307 120.686 39.375 97.026 39.375 70s5.933-50.686 14.81-63.706M4.375 70h131.25M14.478 105h111.044M14.478 35h111.044M85.814 6.294c8.879 13.02 14.811 36.68 14.811 63.706s-5.932 50.686-14.81 63.706"
+        })]
       })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#earth-".concat(maskId, ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });