@codecademy/gamut-icons 8.0.2-alpha.2c40eb.0 → 8.0.2-alpha.917dbd.0

package/dist/icons/regular/PersonChatIcon.js

@@ -24,7 +24,7 @@ export var PersonChatIcon = /*#__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",
     width: width,
@@ -32,28 +32,37 @@ export var PersonChatIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'single-neutral-actions-chat'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 7.5,
-      cy: 4.875,
-      r: 4.125,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M8.25 10.558a6.409 6.409 0 00-.75-.058 6.75 6.75 0 00-6.75 6.75m21 3h-3l-4.5 3v-3h-1.5a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h9a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5zm-7.5-6h6m-6 3h6",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'single-neutral-actions-chat',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'single-neutral-actions-chat'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 7.5,
+        cy: 4.875,
+        r: 4.125,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M8.25 10.558a6.409 6.409 0 00-.75-.058 6.75 6.75 0 00-6.75 6.75m21 3h-3l-4.5 3v-3h-1.5a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h9a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5zm-7.5-6h6m-6 3h6",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#single-neutral-actions-chat)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PersonIcon.js

@@ -24,7 +24,7 @@ export var PersonIcon = /*#__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",
     width: width,
@@ -32,28 +32,37 @@ export var PersonIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'single-neutral'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 6,
-      r: 5.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M2.25 23.25a9.75 9.75 0 0119.5 0",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'single-neutral',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'single-neutral'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 6,
+        r: 5.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M2.25 23.25a9.75 9.75 0 0119.5 0",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#single-neutral)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PhoneIcon.js

@@ -24,7 +24,7 @@ export var PhoneIcon = /*#__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",
     width: width,
@@ -32,31 +32,40 @@ export var PhoneIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'mobile-phone'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("rect", {
-      x: 5.251,
-      y: 0.75,
-      width: 13.5,
-      height: 22.5,
-      rx: 3,
-      ry: 3,
-      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: "M5.251 18.75h13.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'mobile-phone',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'mobile-phone'
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 5.251,
+        y: 0.75,
+        width: 13.5,
+        height: 22.5,
+        rx: 3,
+        ry: 3,
+        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: "M5.251 18.75h13.5"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#mobile-phone)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PieLineGraphIcon.js

@@ -24,7 +24,7 @@ export var PieLineGraphIcon = /*#__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",
     width: width,
@@ -32,47 +32,56 @@ export var PieLineGraphIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'pie-line-graph'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M8.246 19.5l3.97-3.97a.75.75 0 011.061 0l1.939 1.939a.75.75 0 001.061 0l3.969-3.969",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("rect", {
-      x: 0.746,
-      y: 0.75,
-      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("circle", {
-      cx: 8.246,
-      cy: 8.25,
-      r: 4.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: "M8.246 3.75v4.5l3.182 3.182m5.068-6.182h3m-3 3h3"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'pie-line-graph',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'pie-line-graph'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M8.246 19.5l3.97-3.97a.75.75 0 011.061 0l1.939 1.939a.75.75 0 001.061 0l3.969-3.969",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 0.746,
+        y: 0.75,
+        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("circle", {
+        cx: 8.246,
+        cy: 8.25,
+        r: 4.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: "M8.246 3.75v4.5l3.182 3.182m5.068-6.182h3m-3 3h3"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#pie-line-graph)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PinIcon.js

@@ -24,7 +24,7 @@ export var PinIcon = /*#__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",
     width: width,
@@ -32,19 +32,28 @@ export var PinIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'pin'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M4.949 8.783a1.5 1.5 0 00-.3 2.356l8.213 8.213a1.5 1.5 0 002.356-.3 7.522 7.522 0 00.81-5.54l6.529-4.155a1.5 1.5 0 00.256-2.326L16.97 1.188a1.5 1.5 0 00-2.326.255l-4.155 6.53a7.522 7.522 0 00-5.54.81zm3.804 6.463L.75 23.249",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'pin',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'pin'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M4.949 8.783a1.5 1.5 0 00-.3 2.356l8.213 8.213a1.5 1.5 0 002.356-.3 7.522 7.522 0 00.81-5.54l6.529-4.155a1.5 1.5 0 00.256-2.326L16.97 1.188a1.5 1.5 0 00-2.326.255l-4.155 6.53a7.522 7.522 0 00-5.54.81zm3.804 6.463L.75 23.249",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#pin)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PlayCircledIcon.js

@@ -24,7 +24,7 @@ export var PlayCircledIcon = /*#__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",
     width: width,
@@ -32,28 +32,37 @@ export var PlayCircledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRe
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'button-play-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("circle", {
-      cx: 12,
-      cy: 11.998,
-      r: 11.25,
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9 15.613a1.636 1.636 0 002.712 1.231L17.25 12l-5.538-4.847A1.635 1.635 0 009 8.384z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'button-play-1',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'button-play-1'
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: 12,
+        cy: 11.998,
+        r: 11.25,
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9 15.613a1.636 1.636 0 002.712 1.231L17.25 12l-5.538-4.847A1.635 1.635 0 009 8.384z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#button-play-1)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PlayIcon.js

@@ -24,7 +24,7 @@ export var PlayIcon = /*#__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",
     width: width,
@@ -32,19 +32,28 @@ export var PlayIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'controls-play'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M2.338 3.255v17.49a1.5 1.5 0 002.209 1.322l16.323-8.745a1.5 1.5 0 000-2.644L4.547 1.933a1.5 1.5 0 00-2.209 1.322z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'controls-play',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'controls-play'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M2.338 3.255v17.49a1.5 1.5 0 002.209 1.322l16.323-8.745a1.5 1.5 0 000-2.644L4.547 1.933a1.5 1.5 0 00-2.209 1.322z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#controls-play)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/PortfolioProjectIcon.js

@@ -24,7 +24,7 @@ export var PortfolioProjectIcon = /*#__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",
     width: width,
@@ -32,19 +32,28 @@ export var PortfolioProjectIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'rating-star'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.729 1.2l3.346 6.629 6.44.638a.805.805 0 01.5 1.374l-5.3 5.253 1.965 7.138a.813.813 0 01-1.151.935L12 19.934l-6.52 3.229a.813.813 0 01-1.151-.935l1.965-7.138L.99 9.837a.805.805 0 01.5-1.374l6.44-.638L11.271 1.2a.819.819 0 011.458 0z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'rating-star',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'rating-star'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.729 1.2l3.346 6.629 6.44.638a.805.805 0 01.5 1.374l-5.3 5.253 1.965 7.138a.813.813 0 01-1.151.935L12 19.934l-6.52 3.229a.813.813 0 01-1.151-.935l1.965-7.138L.99 9.837a.805.805 0 01.5-1.374l6.44-.638L11.271 1.2a.819.819 0 011.458 0z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#rating-star)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/ProgrammingBrowserIcon.js

@@ -24,7 +24,7 @@ export var ProgrammingBrowserIcon = /*#__PURE__*/React.forwardRef(function (_ref
   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",
     width: width,
@@ -32,23 +32,32 @@ export var ProgrammingBrowserIcon = /*#__PURE__*/React.forwardRef(function (_ref
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'programming-browser-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    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: "M13.125 126.875a8.75 8.75 0 01-8.75-8.75v-95.58a9.45 9.45 0 019.42-9.42h112.456a9.403 9.403 0 019.374 9.374v94.955a9.45 9.45 0 01-9.42 9.421zm122.5-87.5H4.375m70 43.75h26.25"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M39.375 65.625l17.5 17.5-17.5 17.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'programming-browser-1',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'programming-browser-1'
+      }), /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 8.75,
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M13.125 126.875a8.75 8.75 0 01-8.75-8.75v-95.58a9.45 9.45 0 019.42-9.42h112.456a9.403 9.403 0 019.374 9.374v94.955a9.45 9.45 0 01-9.42 9.421zm122.5-87.5H4.375m70 43.75h26.25"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M39.375 65.625l17.5 17.5-17.5 17.5"
+        })]
       })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#programming-browser-1)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });

package/dist/icons/regular/ProjectsIcon.js

@@ -24,7 +24,7 @@ export var ProjectsIcon = /*#__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",
     width: width,
@@ -32,19 +32,28 @@ export var ProjectsIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef)
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'module-puzzle'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M19.5 15.75l3.311-3.311a1.5 1.5 0 000-2.121L20.7 8.212A3.75 3.75 0 1115.788 3.3l-2.106-2.111a1.5 1.5 0 00-2.121 0L8.25 4.5A3.75 3.75 0 104.5 8.25l-3.311 3.311a1.5 1.5 0 000 2.121L3.3 15.788A3.75 3.75 0 118.212 20.7l2.106 2.107a1.5 1.5 0 002.121 0L15.75 19.5a3.75 3.75 0 103.75-3.75z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'module-puzzle',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'module-puzzle'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M19.5 15.75l3.311-3.311a1.5 1.5 0 000-2.121L20.7 8.212A3.75 3.75 0 1115.788 3.3l-2.106-2.111a1.5 1.5 0 00-2.121 0L8.25 4.5A3.75 3.75 0 104.5 8.25l-3.311 3.311a1.5 1.5 0 000 2.121L3.3 15.788A3.75 3.75 0 118.212 20.7l2.106 2.107a1.5 1.5 0 002.121 0L15.75 19.5a3.75 3.75 0 103.75-3.75z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#module-puzzle)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '100%',
+        height: '100%',
+        fill: 'currentColor'
+      })
     })]
   }));
 });