@codecademy/gamut-icons 8.0.2-alpha.e0b3ae.0 → 8.0.2-alpha.f5e090.0

package/dist/icons/regular/ArrowChevronRightIcon.js

@@ -24,7 +24,7 @@ export var ArrowChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref,
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowChevronRightIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-right-1'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-right-1',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-right-1'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M5.5.75l10.72 10.72a.749.749 0 010 1.06L5.5 23.25",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-right-1)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M5.5.75l10.72 10.72a.749.749 0 010 1.06L5.5 23.25",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/ArrowChevronUpIcon.js

@@ -24,7 +24,7 @@ export var ArrowChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowChevronUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-up-1'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-up-1',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-up-1'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M.75 17.189L11.47 6.47a.749.749 0 011.06 0l10.72 10.719",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-up-1)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M.75 17.189L11.47 6.47a.749.749 0 011.06 0l10.72 10.719",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/ArrowDownIcon.js

@@ -24,7 +24,7 @@ export var ArrowDownIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-down'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-down',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-down'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M12 .75v22.5M1.5 12.75L12 23.25l10.5-10.5"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-down)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M12 .75v22.5M1.5 12.75L12 23.25l10.5-10.5"
     })]
   }));
 });

package/dist/icons/regular/ArrowLeftIcon.js

@@ -24,7 +24,7 @@ export var ArrowLeftIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowLeftIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-left'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-left',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-left'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M23.25 12H.75m10.5-10.5L.75 12l10.5 10.5"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-left)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M23.25 12H.75m10.5-10.5L.75 12l10.5 10.5"
     })]
   }));
 });

package/dist/icons/regular/ArrowRightIcon.js

@@ -24,7 +24,7 @@ export var ArrowRightIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowRightIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-right'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-right',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-right'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M.75 12h22.5m-10.5 10.5L23.25 12 12.75 1.5"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-right)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M.75 12h22.5m-10.5 10.5L23.25 12 12.75 1.5"
     })]
   }));
 });

package/dist/icons/regular/ArrowUpIcon.js

@@ -24,7 +24,7 @@ export var ArrowUpIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var ArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'arrow-up'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'arrow-up',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'arrow-up'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M12 23.25V.75m10.5 10.5L12 .75 1.5 11.25"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#arrow-up)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5,
+      d: "M12 23.25V.75m10.5 10.5L12 .75 1.5 11.25"
     })]
   }));
 });

package/dist/icons/regular/ArticleIcon.js

@@ -24,7 +24,7 @@ export var ArticleIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,40 +32,31 @@ export var ArticleIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'newspaper-fold'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'newspaper-fold',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'newspaper-fold'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M23.25 6v14.25a2.25 2.25 0 01-4.5 0V3a1.5 1.5 0 00-1.5-1.5h-15A1.5 1.5 0 00.75 3v17.25A2.25 2.25 0 003 22.5h18M4.5 15H15M4.5 18h6",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("rect", {
-        x: 4.5,
-        y: 5.25,
-        width: 10.5,
-        height: 6,
-        rx: 0.75,
-        ry: 0.75,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#newspaper-fold)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M23.25 6v14.25a2.25 2.25 0 01-4.5 0V3a1.5 1.5 0 00-1.5-1.5h-15A1.5 1.5 0 00.75 3v17.25A2.25 2.25 0 003 22.5h18M4.5 15H15M4.5 18h6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("rect", {
+      x: 4.5,
+      y: 5.25,
+      width: 10.5,
+      height: 6,
+      rx: 0.75,
+      ry: 0.75,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/BadgeIcon.js

@@ -24,7 +24,7 @@ export var BadgeIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,35 +32,26 @@ export var BadgeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'rating-star-badge'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'rating-star-badge',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'rating-star-badge'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M23.25 9.938A13.5 13.5 0 0112 23.25 13.5 13.5 0 01.75 9.938V.75h22.5zM.75 5.25h22.5",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M12.53 8.792l1.249 2.458h2.127a.582.582 0 01.419 1l-1.953 1.922 1.082 2.485a.589.589 0 01-.839.736L12 15.919l-2.615 1.47a.589.589 0 01-.839-.736l1.082-2.485-1.953-1.922a.582.582 0 01.419-1h2.127l1.249-2.454a.594.594 0 011.06 0z",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#rating-star-badge)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M23.25 9.938A13.5 13.5 0 0112 23.25 13.5 13.5 0 01.75 9.938V.75h22.5zM.75 5.25h22.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.53 8.792l1.249 2.458h2.127a.582.582 0 01.419 1l-1.953 1.922 1.082 2.485a.589.589 0 01-.839.736L12 15.919l-2.615 1.47a.589.589 0 01-.839-.736l1.082-2.485-1.953-1.922a.582.582 0 01.419-1h2.127l1.249-2.454a.594.594 0 011.06 0z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/BellIcon.js

@@ -24,7 +24,7 @@ export var BellIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,28 +32,19 @@ export var BellIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'alarm-bell'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'alarm-bell',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'alarm-bell'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M10 21.75a2.087 2.087 0 004.005 0M12 3V.75M12 3a7.5 7.5 0 017.5 7.5c0 7.046 1.5 8.25 1.5 8.25H3s1.5-1.916 1.5-8.25A7.5 7.5 0 0112 3z",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#alarm-bell)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M10 21.75a2.087 2.087 0 004.005 0M12 3V.75M12 3a7.5 7.5 0 017.5 7.5c0 7.046 1.5 8.25 1.5 8.25H3s1.5-1.916 1.5-8.25A7.5 7.5 0 0112 3z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/BookClosedBookmarkIcon.js

@@ -24,7 +24,7 @@ export var BookClosedBookmarkIcon = /*#__PURE__*/React.forwardRef(function (_ref
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,35 +32,26 @@ export var BookClosedBookmarkIcon = /*#__PURE__*/React.forwardRef(function (_ref
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'book-close-bookmark'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'book-close-bookmark',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'book-close-bookmark'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M18 2.25h1.5a1.5 1.5 0 011.5 1.5v18a1.5 1.5 0 01-1.5 1.5h-15a1.5 1.5 0 01-1.5-1.5v-18a1.5 1.5 0 011.5-1.5H12m-4.5 0v21",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M18 12.75l-3-3-3 3V2.25a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5z",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#book-close-bookmark)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M18 2.25h1.5a1.5 1.5 0 011.5 1.5v18a1.5 1.5 0 01-1.5 1.5h-15a1.5 1.5 0 01-1.5-1.5v-18a1.5 1.5 0 011.5-1.5H12m-4.5 0v21",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M18 12.75l-3-3-3 3V2.25a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/BookFlipPageIcon.js

@@ -24,7 +24,7 @@ export var BookFlipPageIcon = /*#__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: "#fff",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,35 +32,26 @@ export var BookFlipPageIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title ? /*#__PURE__*/_jsx("title", {
+    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
+      id: titleId,
+      children: 'book-flip-page'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'book-flip-page',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'book-flip-page'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M18 4.144a31.156 31.156 0 014.732-.394.517.517 0 01.366.144.5.5 0 01.152.356v15.768a.505.505 0 01-.5.5C14.457 20.621 12 23.25 12 23.25V6.482S9.545 3.856 1.268 3.75a.517.517 0 00-.368.144.5.5 0 00-.15.356v15.768a.505.505 0 00.5.5C9.543 20.621 12 23.25 12 23.25",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M12 22.757a6.035 6.035 0 011.636-3.448A8.228 8.228 0 0118 16.846V1.243a.481.481 0 00-.228-.4.6.6 0 00-.494-.066 7.8 7.8 0 00-3.642 2.277A6.035 6.035 0 0012 6.5",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#book-flip-page)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M18 4.144a31.156 31.156 0 014.732-.394.517.517 0 01.366.144.5.5 0 01.152.356v15.768a.505.505 0 01-.5.5C14.457 20.621 12 23.25 12 23.25V6.482S9.545 3.856 1.268 3.75a.517.517 0 00-.368.144.5.5 0 00-.15.356v15.768a.505.505 0 00.5.5C9.543 20.621 12 23.25 12 23.25",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12 22.757a6.035 6.035 0 011.636-3.448A8.228 8.228 0 0118 16.846V1.243a.481.481 0 00-.228-.4.6.6 0 00-.494-.066 7.8 7.8 0 00-3.642 2.277A6.035 6.035 0 0012 6.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });