@telus-uds/palette-koodo 3.2.0 → 3.4.0

package/build/rn/icons/ChevronUp.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: "M3.628 16.944a2.143 2.143 0 0 1 0-3.03l6.857-6.858a2.143 2.143 0 0 1 3.03 0l6.857 6.857a2.143 2.143 0 0 1-3.03 3.03l-5.039-5.038a.429.429 0 0 0-.606 0l-5.039 5.039a2.143 2.143 0 0 1-3.03 0Z"
-  })]
-});
+}) => {
+  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: "M3.628 16.944a2.143 2.143 0 0 1 0-3.03l6.857-6.858a2.143 2.143 0 0 1 3.03 0l6.857 6.857a2.143 2.143 0 0 1-3.03 3.03l-5.039-5.038a.429.429 0 0 0-.606 0l-5.039 5.039a2.143 2.143 0 0 1-3.03 0Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/ChevronUp.native.js

@@ -7,19 +7,35 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M3.628 16.944a2.143 2.143 0 0 1 0-3.03l6.857-6.858a2.143 2.143 0 0 1 3.03 0l6.857 6.857a2.143 2.143 0 0 1-3.03 3.03l-5.039-5.038a.429.429 0 0 0-.606 0l-5.039 5.039a2.143 2.143 0 0 1-3.03 0Z"
-  })]
-});
+}) => {
+  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 iconNativeUtils = require('./utils/icon-native-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconNativeUtils.renderNativeGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: "M3.628 16.944a2.143 2.143 0 0 1 0-3.03l6.857-6.858a2.143 2.143 0 0 1 3.03 0l6.857 6.857a2.143 2.143 0 0 1-3.03 3.03l-5.039-5.038a.429.429 0 0 0-.606 0l-5.039 5.039a2.143 2.143 0 0 1-3.03 0Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/CircledLine.js

@@ -6,32 +6,48 @@ 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: "#000",
-      mask: "url(#prefix__mask-2)"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      fill: "#fff",
-      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: "#000",
+        mask: "url(#prefix__mask-2)"
+      }), (0, _jsxRuntime.jsx)("rect", {
+        fill: "#fff",
+        x: 3,
+        y: 6,
+        width: 8,
+        height: 2,
+        rx: 1
+      })]
     })]
-  })]
-});
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/CircledLine.native.js

@@ -7,30 +7,46 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-  ...props,
-  viewBox: "0 0 14 14",
-  height: size,
-  width: size,
-  fill: color,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
-    fill: "none",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-      d: "M7 0a7 7 0 1 0 7 7 7 7 0 0 0-7-7",
-      fill: "#000",
-      mask: "url(#prefix__mask-2)"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
-      fill: "#fff",
-      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 iconNativeUtils = require('./utils/icon-native-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconNativeUtils.renderNativeGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    ...props,
+    viewBox: "0 0 14 14",
+    height: size,
+    width: size,
+    fill: fillValue,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+      fill: "none",
+      children: [(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: "M7 0a7 7 0 1 0 7 7 7 7 0 0 0-7-7",
+        fill: "#000",
+        mask: "url(#prefix__mask-2)"
+      }), (0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        fill: "#fff",
+        x: 3,
+        y: 6,
+        width: 8,
+        height: 2,
+        rx: 1
+      })]
     })]
-  })]
-});
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/Clipboard.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: "M5.072 22.218a2.19 2.19 0 0 1-1.607-.668 2.19 2.19 0 0 1-.668-1.607V6.087c0-.626.222-1.162.668-1.607a2.19 2.19 0 0 1 1.607-.668H9.02c.207-.596.59-1.083 1.148-1.462A3.195 3.195 0 0 1 12 1.782c.687 0 1.306.19 1.86.568.552.38.934.866 1.145 1.462h3.923a2.19 2.19 0 0 1 1.607.668c.445.445.668.981.668 1.607v13.856a2.19 2.19 0 0 1-.668 1.607 2.19 2.19 0 0 1-1.607.668H5.072Zm0-2.275h13.856V6.087H16.97v1.958c0 .32-.11.588-.33.808-.219.22-.488.33-.807.33H8.167c-.319 0-.588-.11-.808-.33-.22-.22-.33-.489-.33-.808V6.087H5.073v13.856ZM12 5.997c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 4.997a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.967.967 0 0 0-.287.712c0 .283.096.52.287.713.192.191.43.287.713.287Z"
-  })]
-});
+}) => {
+  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: "M5.072 22.218a2.19 2.19 0 0 1-1.607-.668 2.19 2.19 0 0 1-.668-1.607V6.087c0-.626.222-1.162.668-1.607a2.19 2.19 0 0 1 1.607-.668H9.02c.207-.596.59-1.083 1.148-1.462A3.195 3.195 0 0 1 12 1.782c.687 0 1.306.19 1.86.568.552.38.934.866 1.145 1.462h3.923a2.19 2.19 0 0 1 1.607.668c.445.445.668.981.668 1.607v13.856a2.19 2.19 0 0 1-.668 1.607 2.19 2.19 0 0 1-1.607.668H5.072Zm0-2.275h13.856V6.087H16.97v1.958c0 .32-.11.588-.33.808-.219.22-.488.33-.807.33H8.167c-.319 0-.588-.11-.808-.33-.22-.22-.33-.489-.33-.808V6.087H5.073v13.856ZM12 5.997c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 4.997a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.967.967 0 0 0-.287.712c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/Clipboard.native.js

@@ -7,19 +7,35 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M5.072 22.218a2.19 2.19 0 0 1-1.607-.668 2.19 2.19 0 0 1-.668-1.607V6.087c0-.626.222-1.162.668-1.607a2.19 2.19 0 0 1 1.607-.668H9.02c.207-.596.59-1.083 1.148-1.462A3.195 3.195 0 0 1 12 1.782c.687 0 1.306.19 1.86.568.552.38.934.866 1.145 1.462h3.923a2.19 2.19 0 0 1 1.607.668c.445.445.668.981.668 1.607v13.856a2.19 2.19 0 0 1-.668 1.607 2.19 2.19 0 0 1-1.607.668H5.072Zm0-2.275h13.856V6.087H16.97v1.958c0 .32-.11.588-.33.808-.219.22-.488.33-.807.33H8.167c-.319 0-.588-.11-.808-.33-.22-.22-.33-.489-.33-.808V6.087H5.073v13.856ZM12 5.997c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 4.997a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.967.967 0 0 0-.287.712c0 .283.096.52.287.713.192.191.43.287.713.287Z"
-  })]
-});
+}) => {
+  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 iconNativeUtils = require('./utils/icon-native-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconNativeUtils.renderNativeGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: "M5.072 22.218a2.19 2.19 0 0 1-1.607-.668 2.19 2.19 0 0 1-.668-1.607V6.087c0-.626.222-1.162.668-1.607a2.19 2.19 0 0 1 1.607-.668H9.02c.207-.596.59-1.083 1.148-1.462A3.195 3.195 0 0 1 12 1.782c.687 0 1.306.19 1.86.568.552.38.934.866 1.145 1.462h3.923a2.19 2.19 0 0 1 1.607.668c.445.445.668.981.668 1.607v13.856a2.19 2.19 0 0 1-.668 1.607 2.19 2.19 0 0 1-1.607.668H5.072Zm0-2.275h13.856V6.087H16.97v1.958c0 .32-.11.588-.33.808-.219.22-.488.33-.807.33H8.167c-.319 0-.588-.11-.808-.33-.22-.22-.33-.489-.33-.808V6.087H5.073v13.856ZM12 5.997c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 4.997a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.713.288.967.967 0 0 0-.287.712c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/Close.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: "M20.488 20.482a2.118 2.118 0 0 0 0-2.994l-5.493-5.489 5.488-5.492a2.118 2.118 0 1 0-2.995-2.994l-5.489 5.492-5.492-5.488a2.118 2.118 0 0 0-2.994 2.995l5.492 5.489-5.488 5.492a2.118 2.118 0 0 0 2.995 2.994l5.489-5.492 5.492 5.488a2.118 2.118 0 0 0 2.995 0Z"
-  })]
-});
+}) => {
+  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: "M20.488 20.482a2.118 2.118 0 0 0 0-2.994l-5.493-5.489 5.488-5.492a2.118 2.118 0 1 0-2.995-2.994l-5.489 5.492-5.492-5.488a2.118 2.118 0 0 0-2.994 2.995l5.492 5.489-5.488 5.492a2.118 2.118 0 0 0 2.995 2.994l5.489-5.492 5.492 5.488a2.118 2.118 0 0 0 2.995 0Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/Close.native.js

@@ -7,19 +7,35 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M20.488 20.482a2.118 2.118 0 0 0 0-2.994l-5.493-5.489 5.488-5.492a2.118 2.118 0 1 0-2.995-2.994l-5.489 5.492-5.492-5.488a2.118 2.118 0 0 0-2.994 2.995l5.492 5.489-5.488 5.492a2.118 2.118 0 0 0 2.995 2.994l5.489-5.492 5.492 5.488a2.118 2.118 0 0 0 2.995 0Z"
-  })]
-});
+}) => {
+  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 iconNativeUtils = require('./utils/icon-native-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconNativeUtils.renderNativeGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: "M20.488 20.482a2.118 2.118 0 0 0 0-2.994l-5.493-5.489 5.488-5.492a2.118 2.118 0 1 0-2.995-2.994l-5.489 5.492-5.492-5.488a2.118 2.118 0 0 0-2.994 2.995l5.492 5.489-5.488 5.492a2.118 2.118 0 0 0 2.995 2.994l5.489-5.492 5.492 5.488a2.118 2.118 0 0 0 2.995 0Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/ClosedCaptions.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: "M9.63 10.364a1.795 1.795 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.374 3.374 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128a5.08 5.08 0 0 1-.434 1.694 4.057 4.057 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54H9.63Zm10.374 0a1.794 1.794 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.373 3.373 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128c-.056.625-.2 1.19-.434 1.694a4.06 4.06 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54h-2.128Z"
-  })]
-});
+}) => {
+  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: "M9.63 10.364a1.795 1.795 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.374 3.374 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128a5.08 5.08 0 0 1-.434 1.694 4.057 4.057 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54H9.63Zm10.374 0a1.794 1.794 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.373 3.373 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128c-.056.625-.2 1.19-.434 1.694a4.06 4.06 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54h-2.128Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};

package/build/rn/icons/ClosedCaptions.native.js

@@ -7,19 +7,35 @@ module.exports = ({
   titleId,
   size,
   color,
+  gradient,
   ...props
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-  ...props,
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: size,
-  width: size,
-  fill: color,
-  "aria-labelledby": titleId,
-  children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-    id: titleId,
-    children: title
-  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-    d: "M9.63 10.364a1.795 1.795 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.374 3.374 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128a5.08 5.08 0 0 1-.434 1.694 4.057 4.057 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54H9.63Zm10.374 0a1.794 1.794 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.373 3.373 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128c-.056.625-.2 1.19-.434 1.694a4.06 4.06 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54h-2.128Z"
-  })]
-});
+}) => {
+  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 iconNativeUtils = require('./utils/icon-native-utils');
+    const gradientId = gradientUtils.generateGradientId(gradient);
+    fillValue = `url(#${gradientId})`;
+    gradientDefs = iconNativeUtils.renderNativeGradientDefs(gradient, gradientId);
+  }
+  const svgContent = (0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    height: size,
+    width: size,
+    fill: fillValue,
+    "aria-labelledby": titleId,
+    children: [title ? (0, _jsxRuntime.jsx)("title", {
+      id: titleId,
+      children: title
+    }) : null, (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: "M9.63 10.364a1.795 1.795 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.374 3.374 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128a5.08 5.08 0 0 1-.434 1.694 4.057 4.057 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54H9.63Zm10.374 0a1.794 1.794 0 0 0-.252-.693 2.26 2.26 0 0 0-1.155-.924 2.285 2.285 0 0 0-.777-.133c-.495 0-.915.096-1.26.287a2.379 2.379 0 0 0-.84.77 3.373 3.373 0 0 0-.469 1.099 5.47 5.47 0 0 0-.147 1.274c0 .42.049.828.147 1.225.098.397.254.754.469 1.071.215.317.495.572.84.763.345.191.765.287 1.26.287.672 0 1.197-.205 1.575-.616.378-.41.609-.952.693-1.624h2.128c-.056.625-.2 1.19-.434 1.694a4.06 4.06 0 0 1-.924 1.288c-.383.355-.83.625-1.344.812a4.924 4.924 0 0 1-1.694.28c-.765 0-1.454-.133-2.065-.399a4.425 4.425 0 0 1-1.547-1.099 4.865 4.865 0 0 1-.966-1.645 6.037 6.037 0 0 1-.336-2.037c0-.747.112-1.44.336-2.079.224-.64.546-1.197.966-1.673.42-.476.936-.85 1.547-1.12.611-.27 1.3-.406 2.065-.406.55 0 1.071.08 1.561.238.49.159.929.39 1.316.693.387.303.707.679.959 1.127.252.448.41.961.476 1.54h-2.128Z"
+    })]
+  });
+  return hasGradient ? gradientUtils.addGradientToSvg(svgContent, gradientDefs) : svgContent;
+};