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

package/dist/icons/regular/RailsIcon.js

@@ -24,22 +24,32 @@ export var RailsIcon = /*#__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: 'Rails Icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M9.196 11.888c-1.19 2.646-1.718 5.531-1.579 8.67h5.487c-.911-2.22-1.183-4.879-.834-7.955.266-2.346 1.3-4.336 3.065-5.966-2.972.959-4.998 2.713-6.139 5.25zm-2.781 9.974c-.363-3.821.173-7.326 1.607-10.514C10.1 6.724 14.727 4.43 21.899 4.47c-5.135 1.726-7.917 4.486-8.347 8.282-.43 3.796.143 6.832 1.72 9.11H6.415zM2 19.174h2.581v2.609H2zm1.108-7.014l2.022.736-.744 2.042-2.021-.735zM6.09 7.223l1.49.86-.87 1.506-1.489-.86zm4.775-2.826l.645 1.117-1.129.652-.645-1.117zM15.5 2.874l.343.94-.94.341-.342-.94zM20 3v1h-1V3z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "rails-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'Rails Icon'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9.196 11.888c-1.19 2.646-1.718 5.531-1.579 8.67h5.487c-.911-2.22-1.183-4.879-.834-7.955.266-2.346 1.3-4.336 3.065-5.966-2.972.959-4.998 2.713-6.139 5.25zm-2.781 9.974c-.363-3.821.173-7.326 1.607-10.514C10.1 6.724 14.727 4.43 21.899 4.47c-5.135 1.726-7.917 4.486-8.347 8.282-.43 3.796.143 6.832 1.72 9.11H6.415zM2 19.174h2.581v2.609H2zm1.108-7.014l2.022.736-.744 2.042-2.021-.735zM6.09 7.223l1.49.86-.87 1.506-1.489-.86zm4.775-2.826l.645 1.117-1.129.652-.645-1.117zM15.5 2.874l.343.94-.94.341-.342-.94zM20 3v1h-1V3z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#rails-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/RatingStarCircleIcon.js

@@ -24,36 +24,46 @@ export var RatingStarCircleIcon = /*#__PURE__*/React.forwardRef(function (_ref,
   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: 'rating-star-circle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.593 6.8l1.4 2.95h2.377a.651.651 0 01.469 1.114l-2.187 1.946 1.209 2.778a.658.658 0 01-.938.823L12 14.767l-2.923 1.644a.658.658 0 01-.938-.823l1.209-2.778-2.183-1.946a.651.651 0 01.469-1.114h2.377l1.4-2.95a.665.665 0 011.182 0z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__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: "rating-star-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'rating-star-circle'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.593 6.8l1.4 2.95h2.377a.651.651 0 01.469 1.114l-2.187 1.946 1.209 2.778a.658.658 0 01-.938.823L12 14.767l-2.923 1.644a.658.658 0 01-.938-.823l1.209-2.778-2.183-1.946a.651.651 0 01.469-1.114h2.377l1.4-2.95a.665.665 0 011.182 0z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__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(#rating-star-circle-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/RatingStarGiveIcon.js

@@ -24,27 +24,37 @@ export var RatingStarGiveIcon = /*#__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: "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: 'rating-star-give-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 14.25v9m0-1.5h15a3 3 0 00-3-3H9a3 3 0 00-3-3H.75m5.25 3h3m7.932-17.517l2.005 3.946h3.428a.884.884 0 01.62 1.513L19.868 9.76l1.741 4a.883.883 0 01-1.243 1.122l-4.222-2.374-4.222 2.374a.883.883 0 01-1.243-1.122l1.742-4L9.3 6.692a.883.883 0 01.62-1.513h3.428l2-3.946a.883.883 0 011.584 0z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "rating-star-give-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'rating-star-give-1'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M.75 14.25v9m0-1.5h15a3 3 0 00-3-3H9a3 3 0 00-3-3H.75m5.25 3h3m7.932-17.517l2.005 3.946h3.428a.884.884 0 01.62 1.513L19.868 9.76l1.741 4a.883.883 0 01-1.243 1.122l-4.222-2.374-4.222 2.374a.883.883 0 01-1.243-1.122l1.742-4L9.3 6.692a.883.883 0 01.62-1.513h3.428l2-3.946a.883.883 0 011.584 0z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#rating-star-give-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ReactIcon.js

@@ -24,50 +24,60 @@ export var ReactIcon = /*#__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: 'React Icon'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("g", {
-      transform: "translate(2 2)",
-      fill: "none",
-      stroke: "currentColor",
-      children: [/*#__PURE__*/_jsx("ellipse", {
-        transform: "rotate(30 9.816 10.082)",
-        cx: 9.816,
-        cy: 10.082,
-        rx: 3.136,
-        ry: 9.599
-      }), /*#__PURE__*/_jsx("ellipse", {
-        fill: "currentColor",
-        cx: 9.792,
-        cy: 9.809,
-        rx: 1.667,
-        ry: 1.683,
-        stroke: "none"
-      }), /*#__PURE__*/_jsx("ellipse", {
-        transform: "scale(-1 1) rotate(30 0 -26.551)",
-        cx: 9.816,
-        cy: 10.082,
-        rx: 3.136,
-        ry: 9.599
-      }), /*#__PURE__*/_jsx("ellipse", {
-        transform: "matrix(0 1 1 0 .095 -.095)",
-        cx: 10,
-        cy: 9.905,
-        rx: 3.136,
-        ry: 9.599
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "react-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'React Icon'
+      }), /*#__PURE__*/_jsxs("g", {
+        transform: "translate(2 2)",
+        fill: "none",
+        stroke: "#fff",
+        children: [/*#__PURE__*/_jsx("ellipse", {
+          transform: "rotate(30 9.816 10.082)",
+          cx: 9.816,
+          cy: 10.082,
+          rx: 3.136,
+          ry: 9.599
+        }), /*#__PURE__*/_jsx("ellipse", {
+          fill: "#fff",
+          cx: 9.792,
+          cy: 9.809,
+          rx: 1.667,
+          ry: 1.683,
+          stroke: "none"
+        }), /*#__PURE__*/_jsx("ellipse", {
+          transform: "scale(-1 1) rotate(30 0 -26.551)",
+          cx: 9.816,
+          cy: 10.082,
+          rx: 3.136,
+          ry: 9.599
+        }), /*#__PURE__*/_jsx("ellipse", {
+          transform: "matrix(0 1 1 0 .095 -.095)",
+          cx: 10,
+          cy: 9.905,
+          rx: 3.136,
+          ry: 9.599
+        })]
       })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#react-icon-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/RedditIcon.js

@@ -24,53 +24,63 @@ export var RedditIcon = /*#__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: 'social-media-reddit'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("ellipse", {
-      cx: 12,
-      cy: 15.33,
-      rx: 9.29,
-      ry: 6.36,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15.46 18.15A7 7 0 0112 19a7 7 0 01-3.48-.87m8.14-4.26a.75.75 0 11-.75-.75.75.75 0 01.75.75m-7.82 0a.75.75 0 11-.75-.75.75.75 0 01.75.75m9.76-3.02a2.45 2.45 0 112.58 3.47",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: 19.53,
-      cy: 4.46,
-      r: 2.15,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M5.4 10.86a2.45 2.45 0 10-2.58 3.47M12 9s0-6.67 5.38-4.91",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "social-media-reddit-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'social-media-reddit'
+      }), /*#__PURE__*/_jsx("ellipse", {
+        cx: 12,
+        cy: 15.33,
+        rx: 9.29,
+        ry: 6.36,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M15.46 18.15A7 7 0 0112 19a7 7 0 01-3.48-.87m8.14-4.26a.75.75 0 11-.75-.75.75.75 0 01.75.75m-7.82 0a.75.75 0 11-.75-.75.75.75 0 01.75.75m9.76-3.02a2.45 2.45 0 112.58 3.47",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 19.53,
+        cy: 4.46,
+        r: 2.15,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M5.4 10.86a2.45 2.45 0 10-2.58 3.47M12 9s0-6.67 5.38-4.91",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#social-media-reddit-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/RefreshIcon.js

@@ -24,27 +24,37 @@ export var RefreshIcon = /*#__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: 'button-refresh-arrow'
-    }) : 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: "M6 14.248v4.5H1.5m4.217.003A9.753 9.753 0 0116.5 3M5.712 18.746A9.72 9.72 0 119 21"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "button-refresh-arrow-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'button-refresh-arrow'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M6 14.248v4.5H1.5m4.217.003A9.753 9.753 0 0116.5 3M5.712 18.746A9.72 9.72 0 119 21"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#button-refresh-arrow-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ResetIcon.js

@@ -24,27 +24,37 @@ export var ResetIcon = /*#__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: 'button-refresh-arrows'
-    }) : 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: "M5.25 14.248v4.5H.75m18-9v-4.5h4.5m-4.218-.003A9.752 9.752 0 018.246 21m-3.279-2.249A9.753 9.753 0 0115.754 3"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "button-refresh-arrows-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'button-refresh-arrows'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M5.25 14.248v4.5H.75m18-9v-4.5h4.5m-4.218-.003A9.752 9.752 0 018.246 21m-3.279-2.249A9.753 9.753 0 0115.754 3"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#button-refresh-arrows-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/ResponsiveIcon.js

@@ -24,46 +24,56 @@ export var ResponsiveIcon = /*#__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: 'responsive-design-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: "M15.75 14.25l.75 4.5m-1.5 0h3.75m-3-7.5h7.5m-7.5 3h6a1.5 1.5 0 001.5-1.5V2.25a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: 0.75,
-      y: 11.25,
-      width: 7.5,
-      height: 12,
-      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: "M.75 20.25h7.5m-4.5-12v-1.5a1.5 1.5 0 011.5-1.5h6a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5m0-3h1.5m-9-6h9"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "responsive-design-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'responsive-design-1'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M15.75 14.25l.75 4.5m-1.5 0h3.75m-3-7.5h7.5m-7.5 3h6a1.5 1.5 0 001.5-1.5V2.25a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.75,
+        y: 11.25,
+        width: 7.5,
+        height: 12,
+        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: "M.75 20.25h7.5m-4.5-12v-1.5a1.5 1.5 0 011.5-1.5h6a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5m0-3h1.5m-9-6h9"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#responsive-design-1-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });

package/dist/icons/regular/RibbonDoubleFilledIcon.js

@@ -24,34 +24,44 @@ export var RibbonDoubleFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref
   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: 'ribbon-double-filled'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M7 4V2.31c0-.347.134-.68.373-.926.238-.246.562-.384.9-.384h11.454c.338 0 .662.138.9.384.239.246.373.579.373.926V20",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      fill: "none"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M16.99 22.879l-5.242-3.794a1.277 1.277 0 00-1.496 0L5.01 22.88A.637.637 0 014 22.368V5.267A1.272 1.272 0 015.273 4h11.454A1.272 1.272 0 0118 5.267v17.101a.632.632 0 01-.687.63.637.637 0 01-.323-.12v0z",
-      fill: "currentColor",
-      stroke: "currentColor",
-      strokeWidth: 1.5,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: "ribbon-double-filled-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default'),
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'ribbon-double-filled'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M7 4V2.31c0-.347.134-.68.373-.926.238-.246.562-.384.9-.384h11.454c.338 0 .662.138.9.384.239.246.373.579.373.926V20",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        fill: "none"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M16.99 22.879l-5.242-3.794a1.277 1.277 0 00-1.496 0L5.01 22.88A.637.637 0 014 22.368V5.267A1.272 1.272 0 015.273 4h11.454A1.272 1.272 0 0118 5.267v17.101a.632.632 0 01-.687.63.637.637 0 01-.323-.12v0z",
+        fill: "#fff",
+        stroke: "#fff",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: "url(#ribbon-double-filled-".concat(titleId !== null && titleId !== void 0 ? titleId : 'default', ")"),
+      children: /*#__PURE__*/_jsx("rect", {
+        width: "100%",
+        height: "100%",
+        fill: "currentColor"
+      })
     })]
   }));
 });