@datalayer/icons-react 1.0.6 → 1.0.8

package/data1/esm/MsExcelIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const MsExcelIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const MsExcelIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default MsExcelIcon;

package/data1/esm/MsExcelIcon.js

@@ -6,25 +6,64 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function MsExcelIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "a",
+    id: "prefix__a",
     x1: 4.494,
     x2: 13.832,
     y1: -2092.086,
@@ -41,13 +80,13 @@ function MsExcelIcon({
     offset: 1,
     stopColor: "#0b6631"
   }))), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#185c37' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#185c37') ? 'white' : 'currentColor'),
+    fill: colored ? '#185c37' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M19.581 15.35L8.512 13.4v14.409A1.192 1.192 0 009.705 29h19.1A1.192 1.192 0 0030 27.809V22.5z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#21a366' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#21a366') ? 'white' : 'currentColor'),
+    fill: colored ? '#21a366' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M19.581 3H9.705a1.192 1.192 0 00-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#107c41' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#107c41') ? 'white' : 'currentColor'),
+    fill: colored ? '#107c41' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M8.512 9.5h11.069V16H8.512z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 001.194-1.191V9.391A1.2 1.2 0 0016.434 8.2",
@@ -62,18 +101,22 @@ function MsExcelIcon({
     d: "M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 001.194-1.191V10.041a1.2 1.2 0 00-1.194-1.191",
     opacity: 0.2
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#a)",
+    fill: "url(#prefix__a)",
     d: "M3.194 8.85h11.938a1.193 1.193 0 011.194 1.191v11.918a1.193 1.193 0 01-1.194 1.191H3.194A1.192 1.192 0 012 21.959V10.041A1.192 1.192 0 013.194 8.85"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     d: "M5.7 19.873l2.511-3.884-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017c.082-.188.169-.369.26-.546l1.342-2.447h1.7l-2.359 3.84 2.419 3.905h-1.809l-1.45-2.711A2.355 2.355 0 019.2 16.8h-.024a1.688 1.688 0 01-.168.351l-1.493 2.722z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#33c481' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#33c481') ? 'white' : 'currentColor'),
+    fill: colored ? '#33c481' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M28.806 3h-9.225v6.5H30V4.191A1.192 1.192 0 0028.806 3"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#107c41' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#107c41') ? 'white' : 'currentColor'),
+    fill: colored ? '#107c41' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M19.581 16H30v6.5H19.581z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(MsExcelIcon);
 export default ForwardRef;

package/data1/esm/MsWordIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const MsWordIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const MsWordIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default MsWordIcon;

package/data1/esm/MsWordIcon.js

@@ -6,25 +6,64 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function MsWordIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "a",
+    id: "prefix__a",
     x1: 4.494,
     x2: 13.832,
     y1: -1712.086,
@@ -41,16 +80,16 @@ function MsWordIcon({
     offset: 1,
     stopColor: "#1146ac"
   }))), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#41a5ee' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#41a5ee') ? 'white' : 'currentColor'),
+    fill: colored ? '#41a5ee' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M28.806 3H9.705a1.192 1.192 0 00-1.193 1.191V9.5l11.069 3.25L30 9.5V4.191A1.192 1.192 0 0028.806 3"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#2b7cd3' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#2b7cd3') ? 'white' : 'currentColor'),
+    fill: colored ? '#2b7cd3' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M30 9.5H8.512V16l11.069 1.95L30 16z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#185abd' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#185abd') ? 'white' : 'currentColor'),
+    fill: colored ? '#185abd' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M8.512 16v6.5l10.418 1.3L30 22.5V16z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#103f91' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#103f91') ? 'white' : 'currentColor'),
+    fill: colored ? '#103f91' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M9.705 29h19.1A1.192 1.192 0 0030 27.809V22.5H8.512v5.309A1.192 1.192 0 009.705 29"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 001.194-1.191V9.391A1.2 1.2 0 0016.434 8.2",
@@ -65,12 +104,16 @@ function MsWordIcon({
     d: "M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 001.194-1.191V10.041a1.2 1.2 0 00-1.194-1.191",
     opacity: 0.2
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#a)",
+    fill: "url(#prefix__a)",
     d: "M3.194 8.85h11.938a1.193 1.193 0 011.194 1.191v11.918a1.193 1.193 0 01-1.194 1.191H3.194A1.192 1.192 0 012 21.959V10.041A1.192 1.192 0 013.194 8.85"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     d: "M6.9 17.988c.023.184.039.344.046.481h.028c.01-.13.032-.287.065-.47s.062-.338.089-.465l1.255-5.407h1.624l1.3 5.326a7.761 7.761 0 01.162 1h.022a7.6 7.6 0 01.135-.975l1.039-5.358h1.477l-1.824 7.748h-1.727l-1.237-5.126q-.054-.222-.122-.578t-.084-.52h-.021q-.021.189-.084.561c-.042.249-.075.432-.1.552L7.78 19.871H6.024L4.19 12.127h1.5l1.131 5.418a4.469 4.469 0 01.079.443"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(MsWordIcon);
 export default ForwardRef;

package/data1/esm/NetworkIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const NetworkIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const NetworkIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default NetworkIcon;

package/data1/esm/NetworkIcon.js

@@ -6,26 +6,69 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function NetworkIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 55 55",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M49 0c-3.309 0-6 2.691-6 6 0 1.035.263 2.009.726 2.86l-9.829 9.829a7.943 7.943 0 00-9.795-.001l-7.669-7.669A3.947 3.947 0 0017 9c0-2.206-1.794-4-4-4S9 6.794 9 9s1.794 4 4 4c.74 0 1.424-.215 2.019-.567l7.669 7.669a7.953 7.953 0 000 9.795L10.024 42.562A5.971 5.971 0 006 41c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6a5.966 5.966 0 00-.726-2.86l12.829-12.829a7.953 7.953 0 003.898 1.619v10.16c-2.833.478-5 2.942-5 5.91 0 3.309 2.691 6 6 6s6-2.691 6-6c0-2.967-2.167-5.431-5-5.91V32.93a7.953 7.953 0 003.898-1.619l7.669 7.669A3.945 3.945 0 0041 41c0 2.206 1.794 4 4 4s4-1.794 4-4-1.794-4-4-4c-.74 0-1.424.215-2.019.567l-7.669-7.669a7.953 7.953 0 000-9.795l9.665-9.665A5.967 5.967 0 0049 12c3.309 0 6-2.691 6-6s-2.691-6-6-6zM11 9c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2-2-.897-2-2zM6 51c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm27-2c0 2.206-1.794 4-4 4s-4-1.794-4-4 1.794-4 4-4 4 1.794 4 4zm-4-18c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm18 10c0 1.103-.897 2-2 2s-2-.897-2-2 .897-2 2-2 2 .897 2 2zm2-31c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NetworkIcon);
 export default ForwardRef;

package/data1/esm/NodeJsIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const NodeJsIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const NodeJsIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default NodeJsIcon;

package/data1/esm/NodeJsIcon.js

@@ -6,28 +6,71 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function NodeJsIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     preserveAspectRatio: "xMidYMid",
     viewBox: "0 0 289 289",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#539e43' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#539e43') ? 'white' : 'currentColor'),
+    fill: colored ? '#539e43' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M146 288.464c-3.975 0-7.685-1.06-11.13-2.915l-35.247-20.936c-5.3-2.915-2.65-3.975-1.06-4.505 7.155-2.385 8.48-2.915 15.9-7.156.796-.53 1.856-.265 2.65.265l27.032 16.166c1.06.53 2.385.53 3.18 0l105.74-61.217c1.06-.53 1.59-1.59 1.59-2.915V83.08c0-1.325-.53-2.385-1.59-2.915l-105.74-60.953c-1.06-.53-2.385-.53-3.18 0L38.405 80.166c-1.06.53-1.59 1.855-1.59 2.915v122.17c0 1.06.53 2.385 1.59 2.915l28.887 16.695c15.636 7.95 25.44-1.325 25.44-10.6V93.68c0-1.59 1.326-3.18 3.181-3.18h13.516c1.59 0 3.18 1.325 3.18 3.18v120.58c0 20.936-11.396 33.126-31.272 33.126-6.095 0-10.865 0-24.38-6.625l-27.827-15.9C22.24 220.885 18 213.465 18 205.515V83.346c0-7.95 4.24-15.37 11.13-19.346L134.87 2.783c6.625-3.71 15.635-3.71 22.26 0L262.87 64C269.76 67.975 274 75.395 274 83.346v122.17c0 7.95-4.24 15.37-11.13 19.345L157.13 286.08c-3.445 1.59-7.42 2.385-11.13 2.385zm32.596-84.009c-46.377 0-55.917-21.2-55.917-39.221 0-1.59 1.325-3.18 3.18-3.18h13.78c1.59 0 2.916 1.06 2.916 2.65 2.12 14.045 8.215 20.936 36.306 20.936 22.261 0 31.802-5.035 31.802-16.96 0-6.891-2.65-11.926-37.367-15.372-28.886-2.915-46.907-9.275-46.907-32.33 0-21.467 18.02-34.187 48.232-34.187 33.921 0 50.617 11.66 52.737 37.101 0 .795-.265 1.59-.795 2.385-.53.53-1.325 1.06-2.12 1.06h-13.78c-1.326 0-2.65-1.06-2.916-2.385-3.18-14.575-11.395-19.345-33.126-19.345-24.38 0-27.296 8.48-27.296 14.84 0 7.686 3.445 10.07 36.306 14.31 32.597 4.24 47.967 10.336 47.967 33.127-.265 23.321-19.345 36.571-53.002 36.571z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NodeJsIcon);
 export default ForwardRef;

package/data1/esm/NodeJsNameIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const NodeJsNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const NodeJsNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default NodeJsNameIcon;

package/data1/esm/NodeJsNameIcon.js

@@ -6,25 +6,64 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function NodeJsNameIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 442.37 442.371",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "b",
+    id: "prefix__b",
     x1: -0.348,
     x2: 1.251,
     gradientTransform: "rotate(116.114 53.1 202.97) scale(86.48)",
@@ -39,10 +78,10 @@ function NodeJsNameIcon({
     offset: 0.8,
     stopColor: "#5AAD45"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "d",
+    id: "prefix__d",
     x1: -0.456,
     x2: 0.582,
-    gradientTransform: "scale(132.798) rotate(-36.46 4.148 -1.614)",
+    gradientTransform: "rotate(-36.46 550.846 -214.336) scale(132.798)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
     offset: 0.57,
@@ -54,7 +93,7 @@ function NodeJsNameIcon({
     offset: 1,
     stopColor: "#76AC64"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "f",
+    id: "prefix__f",
     x1: 0.043,
     x2: 0.984,
     gradientTransform: "translate(192.862 279.652) scale(97.417)",
@@ -75,50 +114,54 @@ function NodeJsNameIcon({
     offset: 0.9,
     stopColor: "#3E863D"
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "a"
+    id: "prefix__a"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M239.03 226.605l-42.13 24.317a5.085 5.085 0 00-2.546 4.406v48.668c0 1.817.968 3.496 2.546 4.406l42.133 24.336a5.1 5.1 0 005.09 0l42.126-24.336a5.096 5.096 0 002.54-4.406v-48.668c0-1.816-.97-3.496-2.55-4.406l-42.12-24.317a5.123 5.123 0 00-5.1 0"
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "c"
+    id: "prefix__c"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M195.398 307.086c.403.523.907.976 1.5 1.316l36.14 20.875 6.02 3.46c.9.52 1.926.74 2.934.665.336-.027.672-.09 1-.183l44.434-81.36c-.34-.37-.738-.68-1.184-.94l-27.586-15.93-14.582-8.39a5.318 5.318 0 00-1.32-.53zm0 0"
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "e"
+    id: "prefix__e"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M241.066 225.953a5.14 5.14 0 00-2.035.652l-42.01 24.247 45.3 82.51c.63-.09 1.25-.3 1.81-.624l42.13-24.336a5.105 5.105 0 002.46-3.476l-46.18-78.89a5.29 5.29 0 00-1.03-.102c-.14 0-.28.007-.42.02"
   }))), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#689f63' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#689f63') ? 'white' : 'currentColor'),
+    fill: colored ? '#689f63' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M218.647 345.93c-1.46 0-2.91-.383-4.19-1.12l-13.337-7.896c-1.992-1.114-1.02-1.508-.363-1.735 2.656-.93 3.195-1.14 6.03-2.75.298-.17.688-.11.993.07l10.246 6.08c.37.2.895.2 1.238 0l39.95-23.06c.37-.21.61-.64.61-1.08v-46.1c0-.46-.24-.87-.618-1.1l-39.934-23.04c-.37-.22-.86-.22-1.23 0l-39.926 23.04c-.387.22-.633.65-.633 1.09v46.1c0 .44.24.86.62 1.07l10.94 6.32c5.94 2.97 9.57-.53 9.57-4.05v-45.5c0-.65.51-1.15 1.16-1.15h5.06c.63 0 1.15.5 1.15 1.15v45.52c0 7.92-4.32 12.47-11.83 12.47-2.31 0-4.13 0-9.21-2.5l-10.48-6.04a8.447 8.447 0 01-4.19-7.29v-46.1c0-3 1.6-5.8 4.19-7.28l39.99-23.07c2.53-1.43 5.89-1.43 8.4 0l39.94 23.08a8.428 8.428 0 014.19 7.28v46.1c0 2.99-1.61 5.78-4.19 7.28l-39.94 23.07a8.397 8.397 0 01-4.21 1.12"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#689f63' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#689f63') ? 'white' : 'currentColor'),
+    fill: colored ? '#689f63' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M230.987 314.164c-17.48 0-21.145-8.024-21.145-14.754 0-.64.516-1.15 1.157-1.15h5.16c.57 0 1.05.415 1.14.978.78 5.258 3.1 7.91 13.67 7.91 8.42 0 12-1.902 12-6.367 0-2.57-1.02-4.48-14.1-5.76-10.94-1.08-17.7-3.49-17.7-12.24 0-8.06 6.8-12.86 18.19-12.86 12.79 0 19.13 4.44 19.93 13.98a1.164 1.164 0 01-1.16 1.26h-5.19c-.54 0-1.01-.38-1.12-.9-1.25-5.53-4.27-7.3-12.48-7.3-9.19 0-10.26 3.2-10.26 5.6 0 2.91 1.26 3.76 13.66 5.4 12.28 1.63 18.11 3.93 18.11 12.56 0 8.7-7.26 13.69-19.92 13.69m48.66-48.89h1.34c1.1 0 1.31-.77 1.31-1.22 0-1.18-.81-1.18-1.26-1.18h-1.38zm-1.63-3.78h2.97c1.02 0 3.02 0 3.02 2.28 0 1.59-1.02 1.92-1.63 2.12 1.19.08 1.27.86 1.43 1.96.08.69.21 1.88.45 2.28h-1.83c-.05-.4-.33-2.6-.33-2.72-.12-.49-.29-.73-.9-.73h-1.51v3.46h-1.67zm-3.57 4.3c0 3.58 2.89 6.48 6.44 6.48 3.58 0 6.47-2.96 6.47-6.48 0-3.59-2.93-6.44-6.48-6.44-3.5 0-6.44 2.81-6.44 6.43m14.16.03c0 4.24-3.47 7.7-7.7 7.7-4.2 0-7.7-3.42-7.7-7.7 0-4.36 3.58-7.7 7.7-7.7 4.15 0 7.69 3.35 7.69 7.7"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#333' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#333') ? 'white' : 'currentColor'),
+    fill: colored ? '#333' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillRule: "evenodd",
     d: "M94.936 165.55c0-1.84-.97-3.53-2.558-4.445l-42.356-24.37a4.946 4.946 0 00-2.328-.67h-.438c-.812.03-1.613.25-2.34.67l-42.354 24.37A5.154 5.154 0 000 165.555l.093 65.64c0 .91.47 1.76 1.27 2.21.78.48 1.76.48 2.54 0l25.18-14.42c1.59-.946 2.56-2.618 2.56-4.44V183.88a5.1 5.1 0 012.555-4.43l10.72-6.174a5.086 5.086 0 012.56-.688c.876 0 1.77.226 2.544.687l10.715 6.172c1.586.91 2.56 2.6 2.56 4.43v30.663c0 1.82.983 3.5 2.565 4.44l25.164 14.41a2.5 2.5 0 002.56 0 2.568 2.568 0 001.268-2.21zm199.868 34.176c0 .457-.243.88-.64 1.106l-14.548 8.386a1.282 1.282 0 01-1.277 0l-14.55-8.386c-.4-.227-.64-.65-.64-1.106V182.93c0-.458.24-.88.63-1.11l14.54-8.4c.4-.23.89-.23 1.29 0l14.55 8.4c.4.23.64.652.64 1.11zm3.93-124.402a2.568 2.568 0 00-2.544.027c-.78.46-1.262 1.3-1.262 2.21v65a1.788 1.788 0 01-2.684 1.55L281.634 138a5.108 5.108 0 00-5.112 0l-42.37 24.453a5.105 5.105 0 00-2.56 4.42v48.92c0 1.83.977 3.51 2.56 4.43l42.37 24.47c1.582.91 3.53.91 5.117 0l42.37-24.48c1.58-.92 2.56-2.6 2.56-4.43V93.863a5.128 5.128 0 00-2.63-4.47zm141.093 107.164a5.116 5.116 0 002.543-4.422V166.21c0-1.824-.97-3.507-2.547-4.425l-42.1-24.44a5.113 5.113 0 00-5.13 0l-42.36 24.45c-1.59.92-2.56 2.6-2.56 4.43v48.9c0 1.84.99 3.54 2.58 4.45l42.09 23.99c1.55.89 3.45.9 5.02.03l25.46-14.15c.8-.45 1.31-1.3 1.31-2.22 0-.92-.49-1.78-1.29-2.23l-42.62-24.46c-.8-.45-1.29-1.3-1.29-2.21v-15.34c0-.916.48-1.76 1.28-2.216l13.26-7.65c.79-.46 1.76-.46 2.55 0l13.27 7.65c.79.45 1.28 1.3 1.28 2.21v12.06c0 .91.49 1.76 1.28 2.22.79.45 1.77.45 2.56-.01zm0 0"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#689f63' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#689f63') ? 'white' : 'currentColor'),
+    fill: colored ? '#689f63' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillRule: "evenodd",
     d: "M394.538 180.2a.97.97 0 01.98 0l8.13 4.69c.304.176.49.5.49.85v9.39c0 .35-.186.674-.49.85l-8.13 4.69a.97.97 0 01-.98 0l-8.125-4.69a.979.979 0 01-.5-.85v-9.39c0-.35.18-.674.49-.85zm0 0"
   }), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#a)",
+    clipPath: "url(#prefix__a)",
     transform: "translate(-78.306 -89.016)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "url(#b)",
+    fill: "url(#prefix__b)",
     d: "M331.363 246.793l-118.715-58.19-60.87 124.174L270.49 370.97zm0 0"
   })), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#c)",
+    clipPath: "url(#prefix__c)",
     transform: "translate(-78.306 -89.016)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "url(#d)",
+    fill: "url(#prefix__d)",
     d: "M144.07 264.004l83.825 113.453 110.86-81.906-83.83-113.45zm0 0"
   })), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#e)",
+    clipPath: "url(#prefix__e)",
     transform: "translate(-78.306 -89.016)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "url(#f)",
+    fill: "url(#prefix__f)",
     d: "M197.02 225.934v107.43h91.683v-107.43zm0 0"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NodeJsNameIcon);
 export default ForwardRef;

package/data1/esm/NotebookOutlineIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const NotebookOutlineIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const NotebookOutlineIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default NotebookOutlineIcon;