@codecademy/gamut-icons 8.0.2-alpha.daf06c.0 → 8.0.2-alpha.fa9cd1.0

package/dist/icons/regular/TrashIcon.js

@@ -24,7 +24,6 @@ export var TrashIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,19 +31,28 @@ export var TrashIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'bin-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: "M1.5 4.5h21m-8.25-3h-4.5A1.5 1.5 0 008.25 3v1.5h7.5V3a1.5 1.5 0 00-1.5-1.5zm-4.5 15.75v-7.5m4.5 7.5v-7.5m4.615 11.374A1.5 1.5 0 0117.37 22.5H6.631a1.5 1.5 0 01-1.495-1.376L3.75 4.5h16.5z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'bin-1',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'bin-1'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M1.5 4.5h21m-8.25-3h-4.5A1.5 1.5 0 008.25 3v1.5h7.5V3a1.5 1.5 0 00-1.5-1.5zm-4.5 15.75v-7.5m4.5 7.5v-7.5m4.615 11.374A1.5 1.5 0 0117.37 22.5H6.631a1.5 1.5 0 01-1.495-1.376L3.75 4.5h16.5z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#bin-1)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/TrophyFilledIcon.js

@@ -24,7 +24,6 @@ export var TrophyFilledIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,14 +31,23 @@ export var TrophyFilledIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'award-trophy-star'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M22 5.5h-.684a29.2 29.2 0 00.284-3.493A1.957 1.957 0 0019.646 0H4.365a1.959 1.959 0 00-1.956 2.005 29.54 29.54 0 00.282 3.5H2a2 2 0 00-2 2V10a5.019 5.019 0 003.266 4.691 1 1 0 10.693-1.877A3.012 3.012 0 012 10V7.5h1.066c1.377 5.529 5.389 7.674 8.8 7.674 5.609 0 8.222-4.32 9.071-7.674H22V10a3.012 3.012 0 01-1.959 2.814 1 1 0 10.693 1.877A5.02 5.02 0 0024 10V7.5a2 2 0 00-2-2zM9.683 10.709a.523.523 0 01-.746-.654L9.83 8a.249.249 0 00-.054-.278L8.163 6.138a.49.49 0 01.344-.856h1.84a.249.249 0 00.227-.144l.962-2.071a.531.531 0 01.942 0l.961 2.07a.248.248 0 00.226.145h1.841a.49.49 0 01.345.856l-1.614 1.587a.252.252 0 00-.054.275l.894 2.052a.523.523 0 01-.746.654l-2.2-1.238a.249.249 0 00-.245 0zm2.18 5.965a10.55 10.55 0 01-1.561-.117.25.25 0 00-.286.254c.09 3.362-2.324 3.223-2.508 3.242A1.979 1.979 0 007.7 24h8.609a1.969 1.969 0 001.956-2 1.948 1.948 0 00-1.765-1.947c-1.517-.149-2.664-.8-2.571-3.253a.252.252 0 00-.083-.2.248.248 0 00-.2-.062 12.313 12.313 0 01-1.783.136z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'award-trophy-star',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'award-trophy-star'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M22 5.5h-.684a29.2 29.2 0 00.284-3.493A1.957 1.957 0 0019.646 0H4.365a1.959 1.959 0 00-1.956 2.005 29.54 29.54 0 00.282 3.5H2a2 2 0 00-2 2V10a5.019 5.019 0 003.266 4.691 1 1 0 10.693-1.877A3.012 3.012 0 012 10V7.5h1.066c1.377 5.529 5.389 7.674 8.8 7.674 5.609 0 8.222-4.32 9.071-7.674H22V10a3.012 3.012 0 01-1.959 2.814 1 1 0 10.693 1.877A5.02 5.02 0 0024 10V7.5a2 2 0 00-2-2zM9.683 10.709a.523.523 0 01-.746-.654L9.83 8a.249.249 0 00-.054-.278L8.163 6.138a.49.49 0 01.344-.856h1.84a.249.249 0 00.227-.144l.962-2.071a.531.531 0 01.942 0l.961 2.07a.248.248 0 00.226.145h1.841a.49.49 0 01.345.856l-1.614 1.587a.252.252 0 00-.054.275l.894 2.052a.523.523 0 01-.746.654l-2.2-1.238a.249.249 0 00-.245 0zm2.18 5.965a10.55 10.55 0 01-1.561-.117.25.25 0 00-.286.254c.09 3.362-2.324 3.223-2.508 3.242A1.979 1.979 0 007.7 24h8.609a1.969 1.969 0 001.956-2 1.948 1.948 0 00-1.765-1.947c-1.517-.149-2.664-.8-2.571-3.253a.252.252 0 00-.083-.2.248.248 0 00-.2-.062 12.313 12.313 0 01-1.783.136z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#award-trophy-star)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/TrophyIcon.js

@@ -24,7 +24,6 @@ export var TrophyIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,26 +31,35 @@ export var TrophyIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'award-trophy-star-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12.53 4.3l1.249 2.458h2.127a.582.582 0 01.419 1l-1.953 1.917 1.082 2.485a.589.589 0 01-.839.737L12 11.426 9.385 12.9a.589.589 0 01-.839-.737l1.082-2.488-1.953-1.922a.582.582 0 01.419-1h2.127L11.47 4.3a.594.594 0 011.06 0zm6.97.2c3.365 0 2.756-.452 3.75 7.5M4.5 4.5C.71 4.5 1.843 3.26.75 12m16.866 11.25H6.384",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.5 10.5V2.25A1.5 1.5 0 016 .75h12a1.5 1.5 0 011.5 1.5v8.25c0 9.008-15 9.02-15 0zM12 23.25v-6",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'award-trophy-star-1',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'award-trophy-star-1'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12.53 4.3l1.249 2.458h2.127a.582.582 0 01.419 1l-1.953 1.917 1.082 2.485a.589.589 0 01-.839.737L12 11.426 9.385 12.9a.589.589 0 01-.839-.737l1.082-2.488-1.953-1.922a.582.582 0 01.419-1h2.127L11.47 4.3a.594.594 0 011.06 0zm6.97.2c3.365 0 2.756-.452 3.75 7.5M4.5 4.5C.71 4.5 1.843 3.26.75 12m16.866 11.25H6.384",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M4.5 10.5V2.25A1.5 1.5 0 016 .75h12a1.5 1.5 0 011.5 1.5v8.25c0 9.008-15 9.02-15 0zM12 23.25v-6",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#award-trophy-star-1)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/TwitterIcon.js

@@ -24,7 +24,6 @@ export var TwitterIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -35,9 +34,19 @@ export var TwitterIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      fill: "currentColor",
-      d: "M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.8-2.7-.2-5.2-1.5-6.8-3.5-.3.5-.4 1.1-.4 1.6 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.2-.6.2-.9.2-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"
+    }) : null, /*#__PURE__*/_jsx("mask", {
+      id: '',
+      children: /*#__PURE__*/_jsx("path", {
+        fill: "#fff",
+        d: "M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.8-2.7-.2-5.2-1.5-6.8-3.5-.3.5-.4 1.1-.4 1.6 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.2-.6.2-.9.2-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/TwitterOutlineIcon.js

@@ -25,7 +25,6 @@ export var TwitterOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     "data-name": "Outline Version",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -33,14 +32,23 @@ export var TwitterOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, sv
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'twitter-2'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M.09 18.91a.75.75 0 00.43.84 20.55 20.55 0 008.29 1.93 13.13 13.13 0 007.26-2.06 12.73 12.73 0 005.76-10.56v-.45l1.79-1.29A.75.75 0 0023.47 6l-1.39-.6.78-1.7a.75.75 0 00-.92-1l-2.17.72a5.2 5.2 0 00-3.2-1.11 5.26 5.26 0 00-5.25 5.25v.36C8.6 8.24 6 6.85 3.14 3.57a.75.75 0 00-1.3.35A7.8 7.8 0 002.33 9L.94 8.82a.75.75 0 00-.85.89 5.38 5.38 0 002.63 3.92l-.65.24a.75.75 0 00-.41 1 4.78 4.78 0 003.56 2.61 11.82 11.82 0 01-4.39.8.75.75 0 00-.74.63zM8 17.67a.75.75 0 00-.38-1.35c-2.12-.17-3.37-.43-4.17-1.37l1.87-.68a.75.75 0 00-.17-1.45 3.69 3.69 0 01-3.29-2.33l2.14.32a.75.75 0 00.61-1.3 4.55 4.55 0 01-1.47-3.74c3 3 6 4.17 9.09 3.53a.75.75 0 00.6-.73v-1a3.73 3.73 0 016.27-2.75.75.75 0 00.75.16l.93-.31-.38.83a.75.75 0 000 .59c.09.23.11.28 1.28.79l-1 .74a.75.75 0 00-.31.61v.83a11.21 11.21 0 01-5.07 9.3c-3 2-6.95 2.33-11.22 1.09A11.11 11.11 0 008 17.67z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'twitter-2',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'twitter-2'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M.09 18.91a.75.75 0 00.43.84 20.55 20.55 0 008.29 1.93 13.13 13.13 0 007.26-2.06 12.73 12.73 0 005.76-10.56v-.45l1.79-1.29A.75.75 0 0023.47 6l-1.39-.6.78-1.7a.75.75 0 00-.92-1l-2.17.72a5.2 5.2 0 00-3.2-1.11 5.26 5.26 0 00-5.25 5.25v.36C8.6 8.24 6 6.85 3.14 3.57a.75.75 0 00-1.3.35A7.8 7.8 0 002.33 9L.94 8.82a.75.75 0 00-.85.89 5.38 5.38 0 002.63 3.92l-.65.24a.75.75 0 00-.41 1 4.78 4.78 0 003.56 2.61 11.82 11.82 0 01-4.39.8.75.75 0 00-.74.63zM8 17.67a.75.75 0 00-.38-1.35c-2.12-.17-3.37-.43-4.17-1.37l1.87-.68a.75.75 0 00-.17-1.45 3.69 3.69 0 01-3.29-2.33l2.14.32a.75.75 0 00.61-1.3 4.55 4.55 0 01-1.47-3.74c3 3 6 4.17 9.09 3.53a.75.75 0 00.6-.73v-1a3.73 3.73 0 016.27-2.75.75.75 0 00.75.16l.93-.31-.38.83a.75.75 0 000 .59c.09.23.11.28 1.28.79l-1 .74a.75.75 0 00-.31.61v.83a11.21 11.21 0 01-5.07 9.3c-3 2-6.95 2.33-11.22 1.09A11.11 11.11 0 008 17.67z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#twitter-2)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/TypeIcon.js

@@ -24,7 +24,6 @@ export var TypeIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,31 +31,40 @@ export var TypeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'app-window-type'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("rect", {
-      x: 1.51,
-      y: 2.254,
-      width: 21,
-      height: 19.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: "M1.51 6.754h21m-10.5 11.953V10.48m4.5 1.5v-.75a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v.75"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'app-window-type',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'app-window-type'
+      }), /*#__PURE__*/_jsx("rect", {
+        x: 1.51,
+        y: 2.254,
+        width: 21,
+        height: 19.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: "M1.51 6.754h21m-10.5 11.953V10.48m4.5 1.5v-.75a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v.75"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#app-window-type)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/UploadIcon.js

@@ -24,7 +24,6 @@ export var UploadIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,19 +31,28 @@ export var UploadIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'upload-bottom'
-    }) : 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: "M12.001 15.75v-12m4.5 4.5l-4.5-4.5-4.5 4.5m15.75 7.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'upload-bottom',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'upload-bottom'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M12.001 15.75v-12m4.5 4.5l-4.5-4.5-4.5 4.5m15.75 7.5v1.5a3 3 0 01-3 3h-16.5a3 3 0 01-3-3v-1.5"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#upload-bottom)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/VideoPlayerMovieIcon.js

@@ -24,7 +24,6 @@ export var VideoPlayerMovieIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,26 +31,35 @@ export var VideoPlayerMovieIcon = /*#__PURE__*/React.forwardRef(function (_ref,
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'video-player-movie'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M23.25 9v12.75a1.5 1.5 0 01-1.5 1.5H2.25a1.5 1.5 0 01-1.5-1.5V9m22.5-3H.75V2.25a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5zM7.5 6L9 .75M15 6L16.5.75",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M9.488 18.66a.856.856 0 01-1.238-.766v-5.788a.856.856 0 011.238-.766l5.789 2.895a.855.855 0 010 1.53z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'video-player-movie',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'video-player-movie'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M23.25 9v12.75a1.5 1.5 0 01-1.5 1.5H2.25a1.5 1.5 0 01-1.5-1.5V9m22.5-3H.75V2.25a1.5 1.5 0 011.5-1.5h19.5a1.5 1.5 0 011.5 1.5zM7.5 6L9 .75M15 6L16.5.75",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M9.488 18.66a.856.856 0 01-1.238-.766v-5.788a.856.856 0 011.238-.766l5.789 2.895a.855.855 0 010 1.53z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#video-player-movie)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/ViewIcon.js

@@ -24,7 +24,6 @@ export var ViewIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,26 +31,35 @@ export var ViewIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'view-1'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 000 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226C20.2 8 16.031 5.183 12 5.251z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15.75 12A3.75 3.75 0 1112 8.249 3.749 3.749 0 0115.75 12z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'view-1',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'view-1'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M12 5.251C7.969 5.183 3.8 8 1.179 10.885a1.663 1.663 0 000 2.226C3.743 15.935 7.9 18.817 12 18.748c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226C20.2 8 16.031 5.183 12 5.251z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M15.75 12A3.75 3.75 0 1112 8.249 3.749 3.749 0 0115.75 12z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#view-1)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/ViewOffIcon.js

@@ -24,7 +24,6 @@ export var ViewOffIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,26 +31,35 @@ export var ViewOffIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'view-off'
-    }) : 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: "M2.783 21l18.75-18M8.964 19.051A9.985 9.985 0 0012 19.5c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226A20.568 20.568 0 0019.75 8.88m-5.337-2.598A9.549 9.549 0 0012 6c-4.031-.067-8.2 2.752-10.821 5.635a1.663 1.663 0 000 2.226 20.8 20.8 0 002.6 2.4M8.25 12.75A3.749 3.749 0 0112 9"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M15.75 12.749h0A3.75 3.75 0 0112 16.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 1.5
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'view-off',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'view-off'
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        d: "M2.783 21l18.75-18M8.964 19.051A9.985 9.985 0 0012 19.5c4.1.069 8.258-2.813 10.824-5.637a1.663 1.663 0 000-2.226A20.568 20.568 0 0019.75 8.88m-5.337-2.598A9.549 9.549 0 0012 6c-4.031-.067-8.2 2.752-10.821 5.635a1.663 1.663 0 000 2.226 20.8 20.8 0 002.6 2.4M8.25 12.75A3.749 3.749 0 0112 9"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M15.75 12.749h0A3.75 3.75 0 0112 16.5",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#view-off)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/VisaIcon.js

@@ -24,7 +24,6 @@ export var VisaIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,24 +31,33 @@ export var VisaIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'visa'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M.504 3.5h23v17h-23z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4.957 10h1.281l.362 3.6a.448.448 0 00.85.148L9.3 9.891m1.813.078l-.812 4.062m4.531-4.109s-1.375-.36-1.844.422.266 1.281.75 1.578 1.016.75.875 1.281-.734 1.313-2.3.766m3.687.062l1.88-3.789a.436.436 0 01.825.158l.3 3.569m-2.407-1.141h2.328",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'visa',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'visa'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M.504 3.5h23v17h-23z",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M4.957 10h1.281l.362 3.6a.448.448 0 00.85.148L9.3 9.891m1.813.078l-.812 4.062m4.531-4.109s-1.375-.36-1.844.422.266 1.281.75 1.578 1.016.75.875 1.281-.734 1.313-2.3.766m3.687.062l1.88-3.789a.436.436 0 01.825.158l.3 3.569m-2.407-1.141h2.328",
+        fill: "none",
+        stroke: "#fff",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#visa)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });

package/dist/icons/regular/YoutubeIcon.js

@@ -24,7 +24,6 @@ export var YoutubeIcon = /*#__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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -32,16 +31,25 @@ export var YoutubeIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
     ref: svgRef,
     "aria-labelledby": titleId
   }, props), {}, {
-    children: [title === undefined ? /*#__PURE__*/_jsx("title", {
-      id: titleId,
-      children: 'social-video-youtube'
-    }) : title ? /*#__PURE__*/_jsx("title", {
+    children: [title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsx("path", {
-      d: "M5.9 5.12v4.26a.75.75 0 001.5 0V5.12l2.85-3.8A.75.75 0 109 .42l-2.4 3.2L4.25.42a.75.75 0 10-1.2.9zm3.55-.24v3a2.25 2.25 0 004.5 0v-3a2.25 2.25 0 10-4.5 0zm1.5 0a.75.75 0 111.5 0v3a.75.75 0 01-1.5 0zm4.86 4.44a2.73 2.73 0 001.94.8 2.72 2.72 0 001.36-.38.74.74 0 00.64.38.75.75 0 00.75-.75v-6a.75.75 0 00-1.5 0v4a1.25 1.25 0 01-1.25 1.25 1.25 1.25 0 01-1.25-1.25v-4a.75.75 0 10-1.5 0v4a2.73 2.73 0 00.81 1.95zm2.69 8.05a.5.5 0 00-1 0v.5h1zm-4.5-.5a.5.5 0 00-.5.5v2a.5.5 0 001 0v-2a.5.5 0 00-.5-.5z"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M19 11.87H5a4.5 4.5 0 00-4.5 4.5v3a4.5 4.5 0 004.5 4.5h14a4.5 4.5 0 004.5-4.5v-3a4.5 4.5 0 00-4.5-4.5zm-11 4H6.5v4.48a.5.5 0 01-1 0v-4.48H4a.5.5 0 010-1h4a.5.5 0 110 1zm3.48 3.5v1a.5.5 0 01-.86.35 1.48 1.48 0 01-.64.15 1.5 1.5 0 01-1.5-1.5v-3a.5.5 0 011 0v3a.5.5 0 001 0v-3a.5.5 0 011 0zm4 0a1.5 1.5 0 01-1.5 1.5 1.48 1.48 0 01-.66-.16.5.5 0 01-.84-.36v-6a.5.5 0 011 0V16a1.48 1.48 0 01.5-.09 1.5 1.5 0 011.5 1.5zm2.59 1.5a1.69 1.69 0 01-1.59-1.62v-1.88a1.5 1.5 0 013 0v1a.5.5 0 01-.5.5H17.5v.38a.7.7 0 00.59.62c.23 0 .59-.1.59-.37a.5.5 0 011 0 1.46 1.46 0 01-1.59 1.37z"
+    }) : null, /*#__PURE__*/_jsxs("mask", {
+      id: 'social-video-youtube',
+      children: [/*#__PURE__*/_jsx("title", {
+        children: 'social-video-youtube'
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M5.9 5.12v4.26a.75.75 0 001.5 0V5.12l2.85-3.8A.75.75 0 109 .42l-2.4 3.2L4.25.42a.75.75 0 10-1.2.9zm3.55-.24v3a2.25 2.25 0 004.5 0v-3a2.25 2.25 0 10-4.5 0zm1.5 0a.75.75 0 111.5 0v3a.75.75 0 01-1.5 0zm4.86 4.44a2.73 2.73 0 001.94.8 2.72 2.72 0 001.36-.38.74.74 0 00.64.38.75.75 0 00.75-.75v-6a.75.75 0 00-1.5 0v4a1.25 1.25 0 01-1.25 1.25 1.25 1.25 0 01-1.25-1.25v-4a.75.75 0 10-1.5 0v4a2.73 2.73 0 00.81 1.95zm2.69 8.05a.5.5 0 00-1 0v.5h1zm-4.5-.5a.5.5 0 00-.5.5v2a.5.5 0 001 0v-2a.5.5 0 00-.5-.5z"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M19 11.87H5a4.5 4.5 0 00-4.5 4.5v3a4.5 4.5 0 004.5 4.5h14a4.5 4.5 0 004.5-4.5v-3a4.5 4.5 0 00-4.5-4.5zm-11 4H6.5v4.48a.5.5 0 01-1 0v-4.48H4a.5.5 0 010-1h4a.5.5 0 110 1zm3.48 3.5v1a.5.5 0 01-.86.35 1.48 1.48 0 01-.64.15 1.5 1.5 0 01-1.5-1.5v-3a.5.5 0 011 0v3a.5.5 0 001 0v-3a.5.5 0 011 0zm4 0a1.5 1.5 0 01-1.5 1.5 1.48 1.48 0 01-.66-.16.5.5 0 01-.84-.36v-6a.5.5 0 011 0V16a1.48 1.48 0 01.5-.09 1.5 1.5 0 011.5 1.5zm2.59 1.5a1.69 1.69 0 01-1.59-1.62v-1.88a1.5 1.5 0 013 0v1a.5.5 0 01-.5.5H17.5v.38a.7.7 0 00.59.62c.23 0 .59-.1.59-.37a.5.5 0 011 0 1.46 1.46 0 01-1.59 1.37z"
+      })]
+    }), /*#__PURE__*/_jsx("g", {
+      mask: 'url(#social-video-youtube)',
+      children: /*#__PURE__*/_jsx("rect", {
+        width: '24',
+        height: '24',
+        fill: 'red'
+      })
     })]
   }));
 });