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

package/dist/icons/regular/PathCompleteIcon.js

@@ -24,6 +24,7 @@ export var PathCompleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgR
   return /*#__PURE__*/_jsxs(Svg, _objectSpread(_objectSpread({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
+    fill: "currentColor",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -31,28 +32,19 @@ export var PathCompleteIcon = /*#__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: 'flags'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'flags',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'flags'
-      }), /*#__PURE__*/_jsx("path", {
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5,
-        d: "M16.32 3.027L9.035 20.973m6.721-16.556l7.26 2.948a.375.375 0 01.042.675L20.6 9.418a1.5 1.5 0 00-.705 1.737l.8 2.705a.375.375 0 01-.5.454l-7.26-2.947M7.68 3.027l7.285 17.946M8.244 4.417L.984 7.365a.375.375 0 00-.042.675L3.4 9.418a1.5 1.5 0 01.705 1.737l-.8 2.705a.375.375 0 00.5.454l7.261-2.947"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#flags)',
-      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: "M16.32 3.027L9.035 20.973m6.721-16.556l7.26 2.948a.375.375 0 01.042.675L20.6 9.418a1.5 1.5 0 00-.705 1.737l.8 2.705a.375.375 0 01-.5.454l-7.26-2.947M7.68 3.027l7.285 17.946M8.244 4.417L.984 7.365a.375.375 0 00-.042.675L3.4 9.418a1.5 1.5 0 01.705 1.737l-.8 2.705a.375.375 0 00.5.454l7.261-2.947"
     })]
   }));
 });

package/dist/icons/regular/PathIcon.js

@@ -24,6 +24,7 @@ export var PathIcon = /*#__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,
@@ -31,64 +32,55 @@ export var PathIcon = /*#__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: 'hierarchy-1'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'hierarchy-1',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'hierarchy-1'
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 3,
-        cy: 20.998,
-        r: 2.25,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 8.25,
-        cy: 8.998,
-        r: 2.25,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 15.75,
-        cy: 14.998,
-        r: 2.25,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 21,
-        cy: 2.998,
-        r: 2.25,
-        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: "M3.902 18.936l3.446-7.876m2.659-.656l3.986 3.189m6.105-8.533l-3.446 7.876"
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#hierarchy-1)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("circle", {
+      cx: 3,
+      cy: 20.998,
+      r: 2.25,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 8.25,
+      cy: 8.998,
+      r: 2.25,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 15.75,
+      cy: 14.998,
+      r: 2.25,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 21,
+      cy: 2.998,
+      r: 2.25,
+      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: "M3.902 18.936l3.446-7.876m2.659-.656l3.986 3.189m6.105-8.533l-3.446 7.876"
     })]
   }));
 });

package/dist/icons/regular/PauseIcon.js

@@ -24,6 +24,7 @@ export var PauseIcon = /*#__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,
@@ -31,45 +32,36 @@ export var PauseIcon = /*#__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: 'controls-pause'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'controls-pause',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'controls-pause'
-      }), /*#__PURE__*/_jsx("rect", {
-        x: 5.25,
-        y: 3.75,
-        width: 4.5,
-        height: 16.5,
-        rx: 1.5,
-        ry: 1.5,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("rect", {
-        x: 14.25,
-        y: 3.75,
-        width: 4.5,
-        height: 16.5,
-        rx: 1.5,
-        ry: 1.5,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#controls-pause)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("rect", {
+      x: 5.25,
+      y: 3.75,
+      width: 4.5,
+      height: 16.5,
+      rx: 1.5,
+      ry: 1.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("rect", {
+      x: 14.25,
+      y: 3.75,
+      width: 4.5,
+      height: 16.5,
+      rx: 1.5,
+      ry: 1.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/PdfIcon.js

@@ -24,6 +24,7 @@ export var PdfIcon = /*#__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,
@@ -31,42 +32,33 @@ export var PdfIcon = /*#__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: 'office-file-adobe-alternate'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'office-file-adobe-alternate',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'office-file-adobe-alternate'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M8.515 6.723a3.954 3.954 0 00-.509-1.465A1.569 1.569 0 006.717 4.5a1.5 1.5 0 00-1.325 1.284 2.756 2.756 0 00.487 1.893 42.285 42.285 0 003.936 3.972 17.631 17.631 0 005.236 2.929 3.789 3.789 0 001.664.354 1.379 1.379 0 001.265-.981 1.311 1.311 0 00-.484-1.206 2.752 2.752 0 00-1.237-.535 10.789 10.789 0 00-5.321.564c-1.622.5-6.362 2.067-6.144 6.052a.858.858 0 00.089.382.758.758 0 00.758.284 2.583 2.583 0 001.708-1.186c1.093-1.543 1.207-3.51 1.35-5.331a24.062 24.062 0 00-.184-6.252z",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M22.81 5.56a1.5 1.5 0 01.439 1.06V21A2.25 2.25 0 0121 23.249H3A2.25 2.25 0 01.749 21V3A2.25 2.25 0 013 .749h14.378a1.5 1.5 0 011.061.439z",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M17.249.749v4.5a1.5 1.5 0 001.5 1.5h4.5",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#office-file-adobe-alternate)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M8.515 6.723a3.954 3.954 0 00-.509-1.465A1.569 1.569 0 006.717 4.5a1.5 1.5 0 00-1.325 1.284 2.756 2.756 0 00.487 1.893 42.285 42.285 0 003.936 3.972 17.631 17.631 0 005.236 2.929 3.789 3.789 0 001.664.354 1.379 1.379 0 001.265-.981 1.311 1.311 0 00-.484-1.206 2.752 2.752 0 00-1.237-.535 10.789 10.789 0 00-5.321.564c-1.622.5-6.362 2.067-6.144 6.052a.858.858 0 00.089.382.758.758 0 00.758.284 2.583 2.583 0 001.708-1.186c1.093-1.543 1.207-3.51 1.35-5.331a24.062 24.062 0 00-.184-6.252z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M22.81 5.56a1.5 1.5 0 01.439 1.06V21A2.25 2.25 0 0121 23.249H3A2.25 2.25 0 01.749 21V3A2.25 2.25 0 013 .749h14.378a1.5 1.5 0 011.061.439z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M17.249.749v4.5a1.5 1.5 0 001.5 1.5h4.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/PeopleIcon.js

@@ -24,6 +24,7 @@ export var PeopleIcon = /*#__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,
@@ -31,44 +32,35 @@ export var PeopleIcon = /*#__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: 'multiple-man-woman-2'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : null, /*#__PURE__*/_jsxs("mask", {
-      id: 'multiple-man-woman-2',
-      children: [/*#__PURE__*/_jsx("title", {
-        children: 'multiple-man-woman-2'
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M14.251 4.416a4.125 4.125 0 11.756 7.305M15 13.667a6.757 6.757 0 018.25 6.583",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M14.248 6.834a6.807 6.807 0 003.627 1.041 6.843 6.843 0 002.712-.558M.75 20.25a6.75 6.75 0 0113.5 0M3.388 8.2l-.012.778a5.9 5.9 0 01-.859 3.272m9.106-4.264v1a5.9 5.9 0 00.86 3.272M3.388 8.2A5.483 5.483 0 007.5 6.305a5.483 5.483 0 004.112 1.9",
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: 7.5,
-        cy: 7.875,
-        r: 4.125,
-        fill: "none",
-        stroke: "#fff",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 1.5
-      })]
-    }), /*#__PURE__*/_jsx("g", {
-      mask: 'url(#multiple-man-woman-2)',
-      children: /*#__PURE__*/_jsx("rect", {
-        width: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : null, /*#__PURE__*/_jsx("path", {
+      d: "M14.251 4.416a4.125 4.125 0 11.756 7.305M15 13.667a6.757 6.757 0 018.25 6.583",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M14.248 6.834a6.807 6.807 0 003.627 1.041 6.843 6.843 0 002.712-.558M.75 20.25a6.75 6.75 0 0113.5 0M3.388 8.2l-.012.778a5.9 5.9 0 01-.859 3.272m9.106-4.264v1a5.9 5.9 0 00.86 3.272M3.388 8.2A5.483 5.483 0 007.5 6.305a5.483 5.483 0 004.112 1.9",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: 7.5,
+      cy: 7.875,
+      r: 4.125,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
     })]
   }));
 });

package/dist/icons/regular/PersonChatIcon.js

@@ -24,6 +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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -31,37 +32,28 @@ export var PersonChatIcon = /*#__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: 'single-neutral-actions-chat'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : 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: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : 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
     })]
   }));
 });

package/dist/icons/regular/PersonIcon.js

@@ -24,6 +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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -31,37 +32,28 @@ export var PersonIcon = /*#__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: 'single-neutral'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : 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: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : 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
     })]
   }));
 });

package/dist/icons/regular/PhoneIcon.js

@@ -24,6 +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",
     role: "img",
     "aria-hidden": "true",
     width: width,
@@ -31,40 +32,31 @@ export var PhoneIcon = /*#__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: 'mobile-phone'
+    }) : title ? /*#__PURE__*/_jsx("title", {
       id: titleId,
       children: title
-    }) : 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: '24',
-        height: '24',
-        fill: 'red'
-      })
+    }) : 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"
     })]
   }));
 });