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

package/dist/icons/regular/NarrativeIcon.js

@@ -24,27 +24,37 @@ export var NarrativeIcon = /*#__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: 'book-open-2'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M11.458 21.269a1.6 1.6 0 001.085 0 13.66 13.66 0 018.7-.448 1.607 1.607 0 002.006-1.559V4.928a1.607 1.607 0 00-1.12-1.528 13.878 13.878 0 00-9.586.2 1.61 1.61 0 01-1.085 0 13.881 13.881 0 00-9.587-.2A1.607 1.607 0 00.75 4.928v14.334a1.607 1.607 0 002.006 1.559 13.663 13.663 0 018.702.448zM12 3.682v17.682",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "book-open-2-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'book-open-2'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M11.458 21.269a1.6 1.6 0 001.085 0 13.66 13.66 0 018.7-.448 1.607 1.607 0 002.006-1.559V4.928a1.607 1.607 0 00-1.12-1.528 13.878 13.878 0 00-9.586.2 1.61 1.61 0 01-1.085 0 13.881 13.881 0 00-9.587-.2A1.607 1.607 0 00.75 4.928v14.334a1.607 1.607 0 002.006 1.559 13.663 13.663 0 018.702.448zM12 3.682v17.682",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#book-open-2-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/NetworkUserIcon.js

@@ -24,9 +24,10 @@ export var NetworkUserIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     viewBox: "0 0 140 140",
     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,
@@ -35,17 +36,29 @@ export var NetworkUserIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
     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: "M56.787 134.3a65.63 65.63 0 1178.272-72.98m-80.873 72.392C45.313 120.686 39.375 97.032 39.375 70s5.938-50.68 14.81-63.706M4.52 65.63h69.855m-56.881-35H122.5m-110.553 70H61.25M85.814 6.294a94.407 94.407 0 0112.834 37.45"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M89.688 76.568a15.313 15.313 0 1030.624 0 15.313 15.313 0 10-30.624 0zM105 96.25a30.625 30.625 0 00-30.625 30.625v8.75h61.25v-8.75A30.62 30.62 0 00105 96.25z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "network-user-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'network-user'
+      }), /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 8.75,
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M56.787 134.3a65.63 65.63 0 1178.272-72.98m-80.873 72.392C45.313 120.686 39.375 97.032 39.375 70s5.938-50.68 14.81-63.706M4.52 65.63h69.855m-56.881-35H122.5m-110.553 70H61.25M85.814 6.294a94.407 94.407 0 0112.834 37.45"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M89.688 76.568a15.313 15.313 0 1030.624 0 15.313 15.313 0 10-30.624 0zM105 96.25a30.625 30.625 0 00-30.625 30.625v8.75h61.25v-8.75A30.62 30.62 0 00105 96.25z"
+        })]
       })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#network-user-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/NotebookIcon.js

@@ -24,58 +24,68 @@ export var NotebookIcon = /*#__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: 'notes-book'
-    }) : 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 4.5h3m-3 7.5h3m-3 6h3"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: 2.25,
-      y: 0.75,
-      width: 17.25,
-      height: 22.5,
-      rx: 1.5,
-      ry: 1.5,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("rect", {
-      x: 7.501,
-      y: 5.25,
-      width: 8.249,
-      height: 5.25,
-      rx: 1.5,
-      ry: 1.5,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M19.5 2.25v13.5h2.25a1.5 1.5 0 001.5-1.5V3.75a1.5 1.5 0 00-1.5-1.5zm0 4.5h3.75m-3.75 4.5h3.75",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "notes-book-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'notes-book'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M.75 4.5h3m-3 7.5h3m-3 6h3"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 2.25,
+        y: 0.75,
+        width: 17.25,
+        height: 22.5,
+        rx: 1.5,
+        ry: 1.5,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 7.501,
+        y: 5.25,
+        width: 8.249,
+        height: 5.25,
+        rx: 1.5,
+        ry: 1.5,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M19.5 2.25v13.5h2.25a1.5 1.5 0 001.5-1.5V3.75a1.5 1.5 0 00-1.5-1.5zm0 4.5h3.75m-3.75 4.5h3.75",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#notes-book-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ObjectiveIcon.js

@@ -24,27 +24,37 @@ export var ObjectiveIcon = /*#__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: 'target-center'
-    }) : 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: "M11.016 11.859l4.167-4.167m0 0l.568-3.75L18.999.75l.502 2.624 2.624.502-3.192 3.248-3.75.568zm5.872 1.821A9.75 9.75 0 1112.614 2.3m4.108 8.437a5.251 5.251 0 11-5.1-3.987m-5.106 13.5l-.75 3m11.25-3l.75 3"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "target-center-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'target-center'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M11.016 11.859l4.167-4.167m0 0l.568-3.75L18.999.75l.502 2.624 2.624.502-3.192 3.248-3.75.568zm5.872 1.821A9.75 9.75 0 1112.614 2.3m4.108 8.437a5.251 5.251 0 11-5.1-3.987m-5.106 13.5l-.75 3m11.25-3l.75 3"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#target-center-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/OneTimeIcon.js

@@ -23,10 +23,11 @@ export var OneTimeIcon = /*#__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,
@@ -35,13 +36,23 @@ export var OneTimeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fillRule: "evenodd",
-      d: "M1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M8.706 7.783c-.42.896-1.088 1.043-2.46 1.077v.714h2.097v5.53H6.247V16h4.862v-.895H9.386V7.783h-.68zm9.866 2.12h-1.156l-1.428 2.096-1.417-2.096h-1.168l1.995 2.97L13.278 16h1.18l1.53-2.267L17.518 16h1.178l-2.13-3.14 2.006-2.957z",
-      fill: "currentColor"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("path", {
+        fillRule: "evenodd",
+        d: "M1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0z",
+        fill: "#fff"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M8.706 7.783c-.42.896-1.088 1.043-2.46 1.077v.714h2.097v5.53H6.247V16h4.862v-.895H9.386V7.783h-.68zm9.866 2.12h-1.156l-1.428 2.096-1.417-2.096h-1.168l1.995 2.97L13.278 16h1.18l1.53-2.267L17.518 16h1.178l-2.13-3.14 2.006-2.957z",
+        fill: "#fff"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/OpenIcon.js

@@ -24,27 +24,37 @@ export var OpenIcon = /*#__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: 'expand-6'
-    }) : 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: "M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "expand-6-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'expand-6'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#expand-6-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/OverviewIcon.js

@@ -24,39 +24,49 @@ export var OverviewIcon = /*#__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: 'paginate-filter-text'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("rect", {
-      x: 3.75,
-      y: 0.746,
-      width: 19.5,
-      height: 19.5,
-      rx: 1.5,
-      ry: 1.5,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M20.25 23.246h-18a1.5 1.5 0 01-1.5-1.5v-18m7.5 3h10.5m-10.5 3h10.5m-10.5 3h7.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "paginate-filter-text-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'paginate-filter-text'
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 3.75,
+        y: 0.746,
+        width: 19.5,
+        height: 19.5,
+        rx: 1.5,
+        ry: 1.5,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M20.25 23.246h-18a1.5 1.5 0 01-1.5-1.5v-18m7.5 3h10.5m-10.5 3h10.5m-10.5 3h7.5",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#paginate-filter-text-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/PathChangeIcon.js

@@ -24,27 +24,37 @@ export var PathChangeIcon = /*#__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: 'flag-1'
-    }) : 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.75v22.5m0-21H22.5a.75.75 0 01.56 1.248L19.055 8a1.5 1.5 0 000 1.994l4 4.505a.75.75 0 01-.56 1.248H.75"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "flag-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'flag-1'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M.75.75v22.5m0-21H22.5a.75.75 0 01.56 1.248L19.055 8a1.5 1.5 0 000 1.994l4 4.505a.75.75 0 01-.56 1.248H.75"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#flag-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/PathCompleteIcon.js

@@ -24,27 +24,37 @@ export var PathCompleteIcon = /*#__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: 'flags'
-    }) : 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: "M16.32 3.027L9.035 20.973m6.721-16.556l7.26 2.948a.375.375 0 01.042.675L20.6 9.418a1.5 1.5 0 00-.705 1.737l.8 2.705a.375.375 0 01-.5.454l-7.26-2.947M7.68 3.027l7.285 17.946M8.244 4.417L.984 7.365a.375.375 0 00-.042.675L3.4 9.418a1.5 1.5 0 01.705 1.737l-.8 2.705a.375.375 0 00.5.454l7.261-2.947"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "flags-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'flags'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M16.32 3.027L9.035 20.973m6.721-16.556l7.26 2.948a.375.375 0 01.042.675L20.6 9.418a1.5 1.5 0 00-.705 1.737l.8 2.705a.375.375 0 01-.5.454l-7.26-2.947M7.68 3.027l7.285 17.946M8.244 4.417L.984 7.365a.375.375 0 00-.042.675L3.4 9.418a1.5 1.5 0 01.705 1.737l-.8 2.705a.375.375 0 00.5.454l7.261-2.947"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#flags-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });