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

package/dist/icons/regular/CheckCircledIcon.js

@@ -24,36 +24,46 @@ export var CheckCircledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
   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: 'check-circle-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M6 13.223L8.45 16.7a1.049 1.049 0 001.707.051L18 6.828",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 11.999,
-      r: 11.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "check-circle-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'check-circle-1'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M6 13.223L8.45 16.7a1.049 1.049 0 001.707.051L18 6.828",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 11.999,
+        r: 11.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#check-circle-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CheckFilledIcon.js

@@ -24,22 +24,32 @@ export var CheckFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
   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: 'check-circle-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "check-circle-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'check-circle-1'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#check-circle-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CheckHeavyIcon.js

@@ -24,22 +24,32 @@ export var CheckHeavyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
   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: 'check'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M23.146 5.4l-2.792-2.8a.5.5 0 00-.708 0L7.854 14.4a.5.5 0 01-.708 0l-2.792-2.8a.5.5 0 00-.708 0L.854 14.4a.5.5 0 000 .707L7.146 21.4a.5.5 0 00.708 0L23.146 6.1a.5.5 0 000-.7z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "check-heavy-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'check-heavy'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M23.146 5.4l-2.792-2.8a.5.5 0 00-.708 0L7.854 14.4a.5.5 0 01-.708 0l-2.792-2.8a.5.5 0 00-.708 0L.854 14.4a.5.5 0 000 .707L7.146 21.4a.5.5 0 00.708 0L23.146 6.1a.5.5 0 000-.7z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#check-heavy-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CheckIcon.js

@@ -23,26 +23,36 @@ export var CheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   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: 'check'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M23.552 3.93a1.5 1.5 0 01.017 2.122l-13.778 14a1.5 1.5 0 01-2.056.077L.513 13.813a1.5 1.5 0 011.974-2.258l6.158 5.385L21.431 3.948a1.5 1.5 0 012.121-.017z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "check-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'check'
+      }), /*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M23.552 3.93a1.5 1.5 0 01.017 2.122l-13.778 14a1.5 1.5 0 01-2.056.077L.513 13.813a1.5 1.5 0 011.974-2.258l6.158 5.385L21.431 3.948a1.5 1.5 0 012.121-.017z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#check-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ChecklistIcon.js

@@ -24,39 +24,49 @@ export var ChecklistIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   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: 'checklist'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("rect", {
-      x: 0.75,
-      y: 0.749,
-      width: 22.5,
-      height: 22.5,
-      rx: 1.5,
-      ry: 1.5,
-      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: "M12 4.499l-4.5 6-3-3m9.75.75h4.5M12 13.499l-4.5 6-3-3m9.75.75h4.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "checklist-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'checklist'
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.75,
+        y: 0.749,
+        width: 22.5,
+        height: 22.5,
+        rx: 1.5,
+        ry: 1.5,
+        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: "M12 4.499l-4.5 6-3-3m9.75.75h4.5M12 13.499l-4.5 6-3-3m9.75.75h4.5"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#checklist-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ClockIcon.js

@@ -24,36 +24,46 @@ export var ClockIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   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: 'time-clock-circle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 12,
-      r: 10.5,
-      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: "M12 12V8.25M12 12l4.687 4.688"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "time-clock-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'time-clock-circle'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 12,
+        r: 10.5,
+        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: "M12 12V8.25M12 12l4.687 4.688"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#time-clock-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CloseCircleIcon.js

@@ -24,36 +24,46 @@ export var CloseCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
   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: 'remove-circle'
-    }) : 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: "M15.182 8.818l-6.364 6.363m0-6.363l6.364 6.363"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 12,
-      r: 11.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "remove-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'remove-circle'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M15.182 8.818l-6.364 6.363m0-6.363l6.364 6.363"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 12,
+        r: 11.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#remove-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CloseIcon.js

@@ -24,27 +24,37 @@ export var CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   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: 'close'
-    }) : 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: "M.75 23.249l22.5-22.5m0 22.5L.75.749"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "close-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'close'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M.75 23.249l22.5-22.5m0 22.5L.75.749"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#close-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CloudCheckIcon.js

@@ -23,31 +23,41 @@ export var CloudCheckIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   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: 'Cloud Check Icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M15.178 6.58a6.27 6.27 0 00-4.186-.785 6.277 6.277 0 00-5.12 4.83.208.208 0 01-.189.166 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72 4.757 4.757 0 00-1.58-3.528l-1.183 1.183a3.05 3.05 0 011.093 2.345 3.089 3.089 0 01-2.731 3.061H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 016.55-3.908l1.235-1.235z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M18.207 7.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414l1.293 1.293 4.293-4.293a1 1 0 011.414 0z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "cloud-check-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'Cloud Check Icon'
+      }), /*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M15.178 6.58a6.27 6.27 0 00-4.186-.785 6.277 6.277 0 00-5.12 4.83.208.208 0 01-.189.166 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72 4.757 4.757 0 00-1.58-3.528l-1.183 1.183a3.05 3.05 0 011.093 2.345 3.089 3.089 0 01-2.731 3.061H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 016.55-3.908l1.235-1.235z",
+        fill: "#fff"
+      }), /*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M18.207 7.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414l1.293 1.293 4.293-4.293a1 1 0 011.414 0z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#cloud-check-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CloudIcon.js

@@ -23,24 +23,34 @@ export var CloudIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     props = _objectWithoutProperties(_ref, ["title", "titleId", "size", "height", "width"]);
   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: 'Cloud Icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M21.792 13.557a4.757 4.757 0 00-1.45-3.406 4.667 4.667 0 00-2.807-1.295.208.208 0 01-.158-.1 6.277 6.277 0 00-11.505 1.868.208.208 0 01-.189.167 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72zM17.39 16.62H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 018.774-1.695.799.799 0 00.784.475 3.054 3.054 0 013.17 3.055 3.089 3.089 0 01-2.73 3.062z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "cloud-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'Cloud Icon'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M21.792 13.557a4.757 4.757 0 00-1.45-3.406 4.667 4.667 0 00-2.807-1.295.208.208 0 01-.158-.1 6.277 6.277 0 00-11.505 1.868.208.208 0 01-.189.167 3.756 3.756 0 00-3.475 3.74A3.543 3.543 0 003.22 17.16a4.39 4.39 0 002.91 1.126h11.323a.758.758 0 00.107-.008 4.75 4.75 0 004.232-4.72zM17.39 16.62H6.145a2.75 2.75 0 01-1.755-.647 1.918 1.918 0 01-.515-1.44 2.09 2.09 0 012.518-2.044.834.834 0 001-.766 4.61 4.61 0 018.774-1.695.799.799 0 00.784.475 3.054 3.054 0 013.17 3.055 3.089 3.089 0 01-2.73 3.062z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#cloud-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/CommentsIcon.js

@@ -24,27 +24,37 @@ export var CommentsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
   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: 'messages-bubble-square-text'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M21.75 18.75h-10.5l-6 4.5v-4.5h-3a1.5 1.5 0 01-1.5-1.5v-15a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5v15a1.5 1.5 0 01-1.5 1.5zM5.25 7.5h13.5M5.25 12h10.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "messages-bubble-square-text-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'messages-bubble-square-text'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M21.75 18.75h-10.5l-6 4.5v-4.5h-3a1.5 1.5 0 01-1.5-1.5v-15a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5v15a1.5 1.5 0 01-1.5 1.5zM5.25 7.5h13.5M5.25 12h10.5",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#messages-bubble-square-text-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });