@telus-uds/palette-koodo 3.2.0 → 3.3.0

package/build/web/icons/Tag.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M24 10.208v.055a1 1 0 0 1-.293.683L11.048 23.605a1 1 0 0 1-1.414 0L.397 14.368a1 1 0 0 1 0-1.414L13.057.293A1 1 0 0 1 13.774 0l9.125.074a1 1 0 0 1 .992.988l.11 9.146ZM10.341 21.484 2.518 13.66 14.176 2.003l7.726.063.093 7.764-11.654 11.654Zm8.954-14.302a1.75 1.75 0 1 0-2.475-2.475 1.75 1.75 0 0 0 2.475 2.475Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M24 10.208v.055a1 1 0 0 1-.293.683L11.048 23.605a1 1 0 0 1-1.414 0L.397 14.368a1 1 0 0 1 0-1.414L13.057.293A1 1 0 0 1 13.774 0l9.125.074a1 1 0 0 1 .992.988l.11 9.146ZM10.341 21.484 2.518 13.66 14.176 2.003l7.726.063.093 7.764-11.654 11.654Zm8.954-14.302a1.75 1.75 0 1 0-2.475-2.475 1.75 1.75 0 0 0 2.475 2.475Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/TagFilled.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M13.714 0h9.429c.473 0 .857.384.857.857v9.428c0 .228-.09.446-.251.607L10.892 23.75a.857.857 0 0 1-1.212 0L.25 14.321a.857.857 0 0 1 0-1.213L13.108.25a.857.857 0 0 1 .606-.25Zm2.572 6a1.714 1.714 0 1 0 3.428 0 1.714 1.714 0 0 0-3.428 0Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M13.714 0h9.429c.473 0 .857.384.857.857v9.428c0 .228-.09.446-.251.607L10.892 23.75a.857.857 0 0 1-1.212 0L.25 14.321a.857.857 0 0 1 0-1.213L13.108.25a.857.857 0 0 1 .606-.25Zm2.572 6a1.714 1.714 0 1 0 3.428 0 1.714 1.714 0 0 0-3.428 0Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/Times.js

@@ -6,20 +6,36 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "m14.943 12 7.44-7.42a2.107 2.107 0 0 0 .023-2.956 2.05 2.05 0 0 0-2.92-.023L12 9.066 4.515 1.601a2.047 2.047 0 0 0-2.92.023 2.109 2.109 0 0 0 .021 2.957L9.057 12l-7.44 7.418a2.108 2.108 0 0 0-.023 2.957 2.046 2.046 0 0 0 2.92.022L12 14.935l7.485 7.463a2.045 2.045 0 0 0 2.92-.022 2.109 2.109 0 0 0-.021-2.957l-7.441-7.418z"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      d: "m14.943 12 7.44-7.42a2.107 2.107 0 0 0 .023-2.956 2.05 2.05 0 0 0-2.92-.023L12 9.066 4.515 1.601a2.047 2.047 0 0 0-2.92.023 2.109 2.109 0 0 0 .021 2.957L9.057 12l-7.44 7.418a2.108 2.108 0 0 0-.023 2.957 2.046 2.046 0 0 0 2.92.022L12 14.935l7.485 7.463a2.045 2.045 0 0 0 2.92-.022 2.109 2.109 0 0 0-.021-2.957l-7.441-7.418z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/TimesCircled.js

@@ -6,41 +6,57 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  viewBox: "0 0 14 14",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    fill: "none",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M7 0a7 7 0 1 0 7 7 7 7 0 0 0-7-7",
-      fill: "#df3d0c",
-      mask: "url(#prefix__mask-2)"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      fill: "#fff",
-      transform: "rotate(45 7 7)",
-      x: 3,
-      y: 6,
-      width: 8,
-      height: 2,
-      rx: 1
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      fill: "#fff",
-      transform: "rotate(135 7 7)",
-      x: 3,
-      y: 6,
-      width: 8,
-      height: 2,
-      rx: 1
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    viewBox: "0 0 14 14",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsxs)("g", {
+      fill: "none",
+      children: [(0, _jsxRuntime.jsx)("path", {
+        d: "M7 0a7 7 0 1 0 7 7 7 7 0 0 0-7-7",
+        fill: "#df3d0c",
+        mask: "url(#prefix__mask-2)"
+      }), (0, _jsxRuntime.jsx)("rect", {
+        fill: "#fff",
+        transform: "rotate(45 7 7)",
+        x: 3,
+        y: 6,
+        width: 8,
+        height: 2,
+        rx: 1
+      }), (0, _jsxRuntime.jsx)("rect", {
+        fill: "#fff",
+        transform: "rotate(135 7 7)",
+        x: 3,
+        y: 6,
+        width: 8,
+        height: 2,
+        rx: 1
+      })]
     })]
-  })]
-});
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/ToolTipFilled.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm.888-12.452v7.15h-2.774V9.725h1.729c.912 0 1.045.304 1.045 1.824Zm.133-5.066c0 .817-.665 1.463-1.501 1.463-.836 0-1.52-.646-1.52-1.463C10 5.665 10.684 5 11.52 5s1.5.665 1.5 1.482Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm.888-12.452v7.15h-2.774V9.725h1.729c.912 0 1.045.304 1.045 1.824Zm.133-5.066c0 .817-.665 1.463-1.501 1.463-.836 0-1.52-.646-1.52-1.463C10 5.665 10.684 5 11.52 5s1.5.665 1.5 1.482Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/Tooltip.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm2 0c0 6.625-5.369 11.996-11.993 12h-.014C5.37 23.996 0 18.625 0 12 0 5.373 5.373 0 12 0s12 5.373 12 12Zm-10.726.03v7.152H10.5v-8.975h1.73c.911 0 1.044.304 1.044 1.824Zm.133-5.065c0 .817-.665 1.463-1.5 1.463-.837 0-1.52-.646-1.52-1.463 0-.817.683-1.482 1.52-1.482.835 0 1.5.665 1.5 1.482Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm2 0c0 6.625-5.369 11.996-11.993 12h-.014C5.37 23.996 0 18.625 0 12 0 5.373 5.373 0 12 0s12 5.373 12 12Zm-10.726.03v7.152H10.5v-8.975h1.73c.911 0 1.044.304 1.044 1.824Zm.133-5.065c0 .817-.665 1.463-1.5 1.463-.837 0-1.52-.646-1.52-1.463 0-.817.683-1.482 1.52-1.482.835 0 1.5.665 1.5 1.482Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/TooltipSymbol.js

@@ -6,21 +6,37 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M13.274 19.182V12.03c0-1.52-.133-1.824-1.045-1.824H10.5v8.975h2.774ZM11.906 8.428c.836 0 1.501-.646 1.501-1.463 0-.817-.665-1.482-1.5-1.482-.837 0-1.52.665-1.52 1.482s.683 1.463 1.52 1.463Z"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      d: "M13.274 19.182V12.03c0-1.52-.133-1.824-1.045-1.824H10.5v8.975h2.774ZM11.906 8.428c.836 0 1.501-.646 1.501-1.463 0-.817-.665-1.482-1.5-1.482-.837 0-1.52.665-1.52 1.482s.683 1.463 1.52 1.463Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/Unmuted.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M13.709 4.292c-.217-.09-.457-.032-.643.153L8.614 8.897a.273.273 0 0 1-.076.036H5.18a.72.72 0 0 0-.72.719v4.318a.72.72 0 0 0 .72.719l3.349-.001a.266.266 0 0 1 .079.03l4.458 4.459a.618.618 0 0 0 .436.194c.069 0 .14-.014.207-.041.217-.09.346-.301.346-.563V4.854c0-.262-.129-.472-.346-.562Zm3.146 4.87a4.292 4.292 0 0 1 1.264 3.054 4.29 4.29 0 0 1-1.264 3.052.48.48 0 1 1-.68-.678 3.333 3.333 0 0 0 .985-2.374c0-.898-.35-1.741-.985-2.375a.481.481 0 0 1 .68-.68Zm4.15 3.045c0-1.92-.75-3.729-2.108-5.088a.48.48 0 0 0-.679.678 6.196 6.196 0 0 1 1.827 4.41 6.198 6.198 0 0 1-1.827 4.411.479.479 0 1 0 .68.677 7.15 7.15 0 0 0 2.106-5.088Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M13.709 4.292c-.217-.09-.457-.032-.643.153L8.614 8.897a.273.273 0 0 1-.076.036H5.18a.72.72 0 0 0-.72.719v4.318a.72.72 0 0 0 .72.719l3.349-.001a.266.266 0 0 1 .079.03l4.458 4.459a.618.618 0 0 0 .436.194c.069 0 .14-.014.207-.041.217-.09.346-.301.346-.563V4.854c0-.262-.129-.472-.346-.562Zm3.146 4.87a4.292 4.292 0 0 1 1.264 3.054 4.29 4.29 0 0 1-1.264 3.052.48.48 0 1 1-.68-.678 3.333 3.333 0 0 0 .985-2.374c0-.898-.35-1.741-.985-2.375a.481.481 0 0 1 .68-.68Zm4.15 3.045c0-1.92-.75-3.729-2.108-5.088a.48.48 0 0 0-.679.678 6.196 6.196 0 0 1 1.827 4.41 6.198 6.198 0 0 1-1.827 4.411.479.479 0 1 0 .68.677 7.15 7.15 0 0 0 2.106-5.088Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/User.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M12 20.5c2.06 0 3.948-.732 5.419-1.951a5.469 5.469 0 0 0-10.608.184A8.463 8.463 0 0 0 12 20.5Zm.138-8.5a7.966 7.966 0 0 1 7.13 4.41 8.5 8.5 0 1 0-14.38.249A7.968 7.968 0 0 1 12.139 12ZM12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Zm0-12.004a2.933 2.933 0 1 0 0-5.867 2.933 2.933 0 0 0 0 5.867Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M12 20.5c2.06 0 3.948-.732 5.419-1.951a5.469 5.469 0 0 0-10.608.184A8.463 8.463 0 0 0 12 20.5Zm.138-8.5a7.966 7.966 0 0 1 7.13 4.41 8.5 8.5 0 1 0-14.38.249A7.968 7.968 0 0 1 12.139 12ZM12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11Zm0-12.004a2.933 2.933 0 1 0 0-5.867 2.933 2.933 0 0 0 0 5.867Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/web/icons/UserAdd.js

@@ -6,23 +6,39 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  role: title ? 'img' : undefined,
-  "aria-hidden": !title,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M3.444 12a8.556 8.556 0 1 1 17.07.855 1.222 1.222 0 1 0 2.432.24c.036-.36.054-.726.054-1.095 0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11c.357 0 .71-.017 1.058-.05a1.222 1.222 0 1 0-.233-2.434 8.519 8.519 0 0 1-6.129-1.802 5.624 5.624 0 0 1 8.07-3.72 1.222 1.222 0 1 0 1.128-2.169A8.07 8.07 0 0 0 4.823 16.66 8.516 8.516 0 0 1 3.444 12Zm11.49-3.938a2.933 2.933 0 1 1-5.867 0 2.933 2.933 0 0 1 5.866 0ZM24 19.255A4.748 4.748 0 0 1 19.25 24a4.748 4.748 0 0 1-4.75-4.745 4.748 4.748 0 0 1 4.75-4.746A4.748 4.748 0 0 1 24 19.255Zm-4-2.25a.75.75 0 0 0-1.5 0v1.5H17a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 0 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5H20v-1.5Z",
-    clipRule: "evenodd"
-  })]
-});
+}) => {
+  const iconSharedUtils = require('./utils/icon-shared-utils');
+  const hasGradient = iconSharedUtils.hasValidGradient(gradient);
+  let fillValue = color;
+  let gradientDefs;
+  let gradientUtils;
+  if (hasGradient) {
+    gradientUtils = iconSharedUtils.getGradientUtils();
+    const iconWebUtils = require('./utils/icon-web-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconWebUtils.renderWebGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    role: title ? 'img' : undefined,
+    "aria-hidden": !title,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      d: "M3.444 12a8.556 8.556 0 1 1 17.07.855 1.222 1.222 0 1 0 2.432.24c.036-.36.054-.726.054-1.095 0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11c.357 0 .71-.017 1.058-.05a1.222 1.222 0 1 0-.233-2.434 8.519 8.519 0 0 1-6.129-1.802 5.624 5.624 0 0 1 8.07-3.72 1.222 1.222 0 1 0 1.128-2.169A8.07 8.07 0 0 0 4.823 16.66 8.516 8.516 0 0 1 3.444 12Zm11.49-3.938a2.933 2.933 0 1 1-5.867 0 2.933 2.933 0 0 1 5.866 0ZM24 19.255A4.748 4.748 0 0 1 19.25 24a4.748 4.748 0 0 1-4.75-4.745 4.748 4.748 0 0 1 4.75-4.746A4.748 4.748 0 0 1 24 19.255Zm-4-2.25a.75.75 0 0 0-1.5 0v1.5H17a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 0 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5H20v-1.5Z",
+      clipRule: "evenodd"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};