@central-icons-solid/square-outlined-radius-0-stroke-1 1.1.294 → 1.1.296

package/CentralIconBase.tsx

@@ -1,7 +1,11 @@
 import type { JSX } from "solid-js";
-export type CentralIconBaseProps = { size?: string | number; color?: string; ariaHidden?: boolean; ariaLabel?: string } & JSX.SvgSVGAttributes<SVGSVGElement>;
+export type CentralIconBaseProps = { size?: string | number; color?: string; ariaHidden?: boolean; ariaLabel?: string; mode?: "masked" | "raw"; maskId?: string } & JSX.SvgSVGAttributes<SVGSVGElement>;
+export function maskInner(raw: string, maskId: string, mode: "masked" | "raw" = "masked"): string {
+  if (mode === "raw" || !maskId) return raw;
+  return `<mask id="${maskId}" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="#000"/><g fill="none" style="color:#fff">${raw}</g></mask><rect width="24" height="24" fill="currentColor" mask="url(#${maskId})"/>`;
+}
 export function svgAttrs(props: CentralIconBaseProps) {
-  const { size = 24, color, ariaHidden = true, ariaLabel, ...rest } = props;
+  const { size = 24, color, ariaHidden = true, ariaLabel, mode, maskId, ...rest } = props;
   const dim = typeof size === "number" ? `${size}px` : size;
   return { ...rest, width: dim, height: dim, viewBox: "0 0 24 24", fill: "none",
     xmlns: "http://www.w3.org/2000/svg", role: ariaHidden ? undefined : "img",

package/Icon3d/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3d = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d, shaders" })} innerHTML={"<circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"16\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"12\" r=\"1\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"12\" r=\"1\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"4\" r=\"1\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"20\" r=\"1\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"4\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"4\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"4\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"4\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"8\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"8\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"16\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"16\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"20\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"20\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"8\" r=\"1\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"16\" r=\"1\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"20\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"16\" r=\"1\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"20\" r=\"0.75\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d, shaders" })} innerHTML={maskInner("<circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"16\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"12\" r=\"1\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"12\" r=\"1\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"4\" r=\"1\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"20\" r=\"1\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"4\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"4\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"4\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"4\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"8\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"8\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"16\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"16\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"20\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"20\" cy=\"20\" r=\"0.5\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"8\" r=\"1\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"16\" r=\"1\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"20\" r=\"0.75\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"16\" r=\"1\" fill=\"currentColor\"/><circle cx=\"8\" cy=\"20\" r=\"0.75\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon3d", props.mode)} />
 );
 
 export default Icon3d;

package/Icon3dBoxBottom/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3dBoxBottom = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d-box-bottom, shaders, model, room" })} innerHTML={"<path d=\"M11.9998 22.25L20.8766 17.125V6.875L11.9998 1.75L3.12305 6.875V17.125L11.9998 22.25Z\" stroke=\"currentColor\"/><path d=\"M3.12305 17.125L11.9998 12M11.9998 12V1.75M11.9998 12L20.8766 17.125\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d-box-bottom, shaders, model, room" })} innerHTML={maskInner("<path d=\"M11.9998 22.25L20.8766 17.125V6.875L11.9998 1.75L3.12305 6.875V17.125L11.9998 22.25Z\" stroke=\"currentColor\"/><path d=\"M3.12305 17.125L11.9998 12M11.9998 12V1.75M11.9998 12L20.8766 17.125\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon3dBoxBottom", props.mode)} />
 );
 
 export default Icon3dBoxBottom;

package/Icon3dBoxTop/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3dBoxTop = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d-box-top, shaders, model, cube, ar" })} innerHTML={"<path d=\"M11.9998 1.75L20.8766 6.875V17.125L11.9998 22.25L3.12305 17.125V6.875L11.9998 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8766 6.875L11.9998 12M11.9998 22.25V12M3.12305 6.875L11.9998 12\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d-box-top, shaders, model, cube, ar" })} innerHTML={maskInner("<path d=\"M11.9998 1.75L20.8766 6.875V17.125L11.9998 22.25L3.12305 17.125V6.875L11.9998 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8766 6.875L11.9998 12M11.9998 22.25V12M3.12305 6.875L11.9998 12\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon3dBoxTop", props.mode)} />
 );
 
 export default Icon3dBoxTop;

package/Icon3dPackage/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3dPackage = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d-package, box" })} innerHTML={"<path d=\"M12.0018 1.75L20.8785 6.875V17.125L12.0018 22.25L3.125 17.125V6.875L12.0018 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8785 6.875L12.0018 12M12.0018 22.25V12M3.125 6.875L12.0018 12\" stroke=\"currentColor\"/><path d=\"M7.5625 4.3125L16.4393 9.4375\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d-package, box" })} innerHTML={maskInner("<path d=\"M12.0018 1.75L20.8785 6.875V17.125L12.0018 22.25L3.125 17.125V6.875L12.0018 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8785 6.875L12.0018 12M12.0018 22.25V12M3.125 6.875L12.0018 12\" stroke=\"currentColor\"/><path d=\"M7.5625 4.3125L16.4393 9.4375\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon3dPackage", props.mode)} />
 );
 
 export default Icon3dPackage;

package/Icon3dPackage2/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3dPackage2 = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d-package-2, box, delivery" })} innerHTML={"<path d=\"M12.0018 1.75L20.8785 6.875V17.125L12.0018 22.25L3.125 17.125V6.875L12.0018 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8785 6.875L12.0018 12M12.0018 22.25V12M3.125 6.875L12.0018 12\" stroke=\"currentColor\"/><path d=\"M16.6895 9.00471L16.9395 9.14827V14.5711L15.9395 15.1483V9.72542L7.3125 4.74495L8.32785 4.17742L16.6895 9.00471Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d-package-2, box, delivery" })} innerHTML={maskInner("<path d=\"M12.0018 1.75L20.8785 6.875V17.125L12.0018 22.25L3.125 17.125V6.875L12.0018 1.75Z\" stroke=\"currentColor\"/><path d=\"M20.8785 6.875L12.0018 12M12.0018 22.25V12M3.125 6.875L12.0018 12\" stroke=\"currentColor\"/><path d=\"M16.6895 9.00471L16.9395 9.14827V14.5711L15.9395 15.1483V9.72542L7.3125 4.74495L8.32785 4.17742L16.6895 9.00471Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon3dPackage2", props.mode)} />
 );
 
 export default Icon3dPackage2;

package/Icon3dSphere/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon3dSphere = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "3d-sphere" })} innerHTML={"<path d=\"M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M2.60645 12.4757C3.29491 13.9989 7.23833 15.1666 12 15.1666C16.6988 15.1666 20.6009 14.0295 21.3646 12.5357\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M11.4997 21.3822C9.98835 20.6631 8.83301 16.7363 8.83301 12C8.83301 7.3877 9.92863 3.54312 11.3817 2.68079\" stroke=\"currentColor\" stroke-linecap=\"round\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "3d-sphere" })} innerHTML={maskInner("<path d=\"M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M2.60645 12.4757C3.29491 13.9989 7.23833 15.1666 12 15.1666C16.6988 15.1666 20.6009 14.0295 21.3646 12.5357\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M11.4997 21.3822C9.98835 20.6631 8.83301 16.7363 8.83301 12C8.83301 7.3877 9.92863 3.54312 11.3817 2.68079\" stroke=\"currentColor\" stroke-linecap=\"round\"/>", "square-outlined-radius-0-stroke-1-Icon3dSphere", props.mode)} />
 );
 
 export default Icon3dSphere;

package/Icon4k/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const Icon4k = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "4k" })} innerHTML={"<path d=\"M21.5 4.5H2.5V19.5H21.5V4.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M9.35107 16.0002V14.3887H5.29688V13.2937L8.73901 7.89746H10.5583V13.333H11.6758V14.3887H10.5583V16.0002H9.35107ZM6.46484 13.3499H9.3623V8.89136H9.32861L6.46484 13.3162V13.3499Z\" fill=\"currentColor\"/><path d=\"M12.7483 16.0002V7.89746H14.0061V11.7776H14.0398L17.3079 7.89746H18.8015L15.73 11.48L19.0654 16.0002H17.51L14.8315 12.3391L14.0061 13.2937V16.0002H12.7483Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "4k" })} innerHTML={maskInner("<path d=\"M21.5 4.5H2.5V19.5H21.5V4.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M9.35107 16.0002V14.3887H5.29688V13.2937L8.73901 7.89746H10.5583V13.333H11.6758V14.3887H10.5583V16.0002H9.35107ZM6.46484 13.3499H9.3623V8.89136H9.32861L6.46484 13.3162V13.3499Z\" fill=\"currentColor\"/><path d=\"M12.7483 16.0002V7.89746H14.0061V11.7776H14.0398L17.3079 7.89746H18.8015L15.73 11.48L19.0654 16.0002H17.51L14.8315 12.3391L14.0061 13.2937V16.0002H12.7483Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-Icon4k", props.mode)} />
 );
 
 export default Icon4k;

package/IconAddImage/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAddImage = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "add-image, upload-image" })} innerHTML={"<path d=\"M13 20.5H3.5V3.5L20.5 3.5V13\" stroke=\"currentColor\"/><path d=\"M14.5 11.5C15.6046 11.5 16.5 10.6046 16.5 9.5C16.5 8.39543 15.6046 7.5 14.5 7.5C13.3954 7.5 12.5 8.39543 12.5 9.5C12.5 10.6046 13.3954 11.5 14.5 11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 16.5L8 12L13 17\" stroke=\"currentColor\"/><path d=\"M15 18.5H22\" stroke=\"currentColor\"/><path d=\"M18.5 15V22\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "add-image, upload-image" })} innerHTML={maskInner("<path d=\"M13 20.5H3.5V3.5L20.5 3.5V13\" stroke=\"currentColor\"/><path d=\"M14.5 11.5C15.6046 11.5 16.5 10.6046 16.5 9.5C16.5 8.39543 15.6046 7.5 14.5 7.5C13.3954 7.5 12.5 8.39543 12.5 9.5C12.5 10.6046 13.3954 11.5 14.5 11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 16.5L8 12L13 17\" stroke=\"currentColor\"/><path d=\"M15 18.5H22\" stroke=\"currentColor\"/><path d=\"M18.5 15V22\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAddImage", props.mode)} />
 );
 
 export default IconAddImage;

package/IconAddKeyframe/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAddKeyframe = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "add-keyframe, rhombus" })} innerHTML={"<path d=\"M12 2L2 12L12 22L22 12L12 2Z\" stroke=\"currentColor\"/><path d=\"M12 9V15M9 12H15\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "add-keyframe, rhombus" })} innerHTML={maskInner("<path d=\"M12 2L2 12L12 22L22 12L12 2Z\" stroke=\"currentColor\"/><path d=\"M12 9V15M9 12H15\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAddKeyframe", props.mode)} />
 );
 
 export default IconAddKeyframe;

package/IconAddToBasket/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAddToBasket = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "add-to-basket" })} innerHTML={"<path d=\"M1.5 2H1V3H1.5V2ZM3.5 2.5L3.9872 2.38757L3.89776 2H3.5V2.5ZM6.5 15.5L6.0128 15.6124L6.10224 16H6.5V15.5ZM19.5 15.5V16H19.9099L19.9903 15.5981L19.5 15.5ZM21.9903 5.59806L22.0883 5.10777L21.1078 4.91165L21.0097 5.40194L21.9903 5.59806ZM9.5 6.5H9V7.5H9.5V6.5ZM16.5 7.5H17V6.5H16.5V7.5ZM13.5 3.5V3H12.5V3.5H13.5ZM12.5 10.5V11H13.5V10.5H12.5ZM1.5 3H3.5V2H1.5V3ZM6.5 16H19.5V15H6.5V16ZM19.9903 15.5981L21.9903 5.59806L21.0097 5.40194L19.0097 15.4019L19.9903 15.5981ZM10 19C10 19.5523 9.55229 20 9 20V21C10.1046 21 11 20.1046 11 19H10ZM9 20C8.44772 20 8 19.5523 8 19H7C7 20.1046 7.89543 21 9 21V20ZM8 19C8 18.4477 8.44772 18 9 18V17C7.89543 17 7 17.8954 7 19H8ZM9 18C9.55229 18 10 18.4477 10 19H11C11 17.8954 10.1046 17 9 17V18ZM18 19C18 19.5523 17.5523 20 17 20V21C18.1046 21 19 20.1046 19 19H18ZM17 20C16.4477 20 16 19.5523 16 19H15C15 20.1046 15.8954 21 17 21V20ZM16 19C16 18.4477 16.4477 18 17 18V17C15.8954 17 15 17.8954 15 19H16ZM17 18C17.5523 18 18 18.4477 18 19H19C19 17.8954 18.1046 17 17 17V18ZM3.0128 2.61243L6.0128 15.6124L6.9872 15.3876L3.9872 2.38757L3.0128 2.61243ZM9.5 7.5H13V6.5H9.5V7.5ZM13 7.5H16.5V6.5H13V7.5ZM12.5 3.5V7H13.5V3.5H12.5ZM12.5 7V10.5H13.5V7H12.5Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "add-to-basket" })} innerHTML={maskInner("<path d=\"M1.5 2H1V3H1.5V2ZM3.5 2.5L3.9872 2.38757L3.89776 2H3.5V2.5ZM6.5 15.5L6.0128 15.6124L6.10224 16H6.5V15.5ZM19.5 15.5V16H19.9099L19.9903 15.5981L19.5 15.5ZM21.9903 5.59806L22.0883 5.10777L21.1078 4.91165L21.0097 5.40194L21.9903 5.59806ZM9.5 6.5H9V7.5H9.5V6.5ZM16.5 7.5H17V6.5H16.5V7.5ZM13.5 3.5V3H12.5V3.5H13.5ZM12.5 10.5V11H13.5V10.5H12.5ZM1.5 3H3.5V2H1.5V3ZM6.5 16H19.5V15H6.5V16ZM19.9903 15.5981L21.9903 5.59806L21.0097 5.40194L19.0097 15.4019L19.9903 15.5981ZM10 19C10 19.5523 9.55229 20 9 20V21C10.1046 21 11 20.1046 11 19H10ZM9 20C8.44772 20 8 19.5523 8 19H7C7 20.1046 7.89543 21 9 21V20ZM8 19C8 18.4477 8.44772 18 9 18V17C7.89543 17 7 17.8954 7 19H8ZM9 18C9.55229 18 10 18.4477 10 19H11C11 17.8954 10.1046 17 9 17V18ZM18 19C18 19.5523 17.5523 20 17 20V21C18.1046 21 19 20.1046 19 19H18ZM17 20C16.4477 20 16 19.5523 16 19H15C15 20.1046 15.8954 21 17 21V20ZM16 19C16 18.4477 16.4477 18 17 18V17C15.8954 17 15 17.8954 15 19H16ZM17 18C17.5523 18 18 18.4477 18 19H19C19 17.8954 18.1046 17 17 17V18ZM3.0128 2.61243L6.0128 15.6124L6.9872 15.3876L3.9872 2.38757L3.0128 2.61243ZM9.5 7.5H13V6.5H9.5V7.5ZM13 7.5H16.5V6.5H13V7.5ZM12.5 3.5V7H13.5V3.5H12.5ZM12.5 7V10.5H13.5V7H12.5Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAddToBasket", props.mode)} />
 );
 
 export default IconAddToBasket;

package/IconAddToBasket2/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAddToBasket2 = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "add-to-basket-2" })} innerHTML={"<path d=\"M8 3.5L6.09215 8.26963M16 3.5L17.9079 8.26963M11.5 20.5H4.5L2.5 8.5H21.5L20.8333 12.5M14.5 18.5H17.5M17.5 18.5H20.5M17.5 18.5V15.5M17.5 18.5V21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "add-to-basket-2" })} innerHTML={maskInner("<path d=\"M8 3.5L6.09215 8.26963M16 3.5L17.9079 8.26963M11.5 20.5H4.5L2.5 8.5H21.5L20.8333 12.5M14.5 18.5H17.5M17.5 18.5H20.5M17.5 18.5V15.5M17.5 18.5V21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAddToBasket2", props.mode)} />
 );
 
 export default IconAddToBasket2;

package/IconAdjustPhoto/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAdjustPhoto = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "adjust-photo, tuning, settings" })} innerHTML={"<path d=\"M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7 17L12 12\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M1.5 12C1.5 12.2761 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.2761 0.5 12C0.5 11.7239 0.723858 11.5 1 11.5C1.27614 11.5 1.5 11.7239 1.5 12Z\" stroke=\"currentColor\"/><path d=\"M12.5 1C12.5 1.27614 12.2761 1.5 12 1.5C11.7239 1.5 11.5 1.27614 11.5 1C11.5 0.723858 11.7239 0.5 12 0.5C12.2761 0.5 12.5 0.723858 12.5 1Z\" stroke=\"currentColor\"/><path d=\"M23.5 12C23.5 12.2761 23.2761 12.5 23 12.5C22.7239 12.5 22.5 12.2761 22.5 12C22.5 11.7239 22.7239 11.5 23 11.5C23.2761 11.5 23.5 11.7239 23.5 12Z\" stroke=\"currentColor\"/><path d=\"M4.57538 19.4246C4.77064 19.6199 4.77064 19.9365 4.57538 20.1317C4.38012 20.327 4.06353 20.327 3.86827 20.1317C3.67301 19.9365 3.67301 19.6199 3.86827 19.4246C4.06353 19.2294 4.38012 19.2294 4.57538 19.4246Z\" stroke=\"currentColor\"/><path d=\"M20.1317 19.4246C20.327 19.6199 20.327 19.9365 20.1317 20.1317C19.9365 20.327 19.6199 20.327 19.4246 20.1317C19.2294 19.9365 19.2294 19.6199 19.4246 19.4246C19.6199 19.2294 19.9365 19.2294 20.1317 19.4246Z\" stroke=\"currentColor\"/><path d=\"M4.57538 3.86827C4.77064 4.06353 4.77064 4.38012 4.57538 4.57538C4.38012 4.77064 4.06353 4.77064 3.86827 4.57538C3.67301 4.38012 3.67301 4.06353 3.86827 3.86827C4.06353 3.67301 4.38012 3.67301 4.57538 3.86827Z\" stroke=\"currentColor\"/><path d=\"M20.1317 3.86827C20.327 4.06353 20.327 4.38012 20.1317 4.57538C19.9365 4.77064 19.6199 4.77064 19.4246 4.57538C19.2294 4.38012 19.2294 4.06353 19.4246 3.86827C19.6199 3.67301 19.9365 3.67301 20.1317 3.86827Z\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "adjust-photo, tuning, settings" })} innerHTML={maskInner("<path d=\"M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7 17L12 12\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M1.5 12C1.5 12.2761 1.27614 12.5 1 12.5C0.723858 12.5 0.5 12.2761 0.5 12C0.5 11.7239 0.723858 11.5 1 11.5C1.27614 11.5 1.5 11.7239 1.5 12Z\" stroke=\"currentColor\"/><path d=\"M12.5 1C12.5 1.27614 12.2761 1.5 12 1.5C11.7239 1.5 11.5 1.27614 11.5 1C11.5 0.723858 11.7239 0.5 12 0.5C12.2761 0.5 12.5 0.723858 12.5 1Z\" stroke=\"currentColor\"/><path d=\"M23.5 12C23.5 12.2761 23.2761 12.5 23 12.5C22.7239 12.5 22.5 12.2761 22.5 12C22.5 11.7239 22.7239 11.5 23 11.5C23.2761 11.5 23.5 11.7239 23.5 12Z\" stroke=\"currentColor\"/><path d=\"M4.57538 19.4246C4.77064 19.6199 4.77064 19.9365 4.57538 20.1317C4.38012 20.327 4.06353 20.327 3.86827 20.1317C3.67301 19.9365 3.67301 19.6199 3.86827 19.4246C4.06353 19.2294 4.38012 19.2294 4.57538 19.4246Z\" stroke=\"currentColor\"/><path d=\"M20.1317 19.4246C20.327 19.6199 20.327 19.9365 20.1317 20.1317C19.9365 20.327 19.6199 20.327 19.4246 20.1317C19.2294 19.9365 19.2294 19.6199 19.4246 19.4246C19.6199 19.2294 19.9365 19.2294 20.1317 19.4246Z\" stroke=\"currentColor\"/><path d=\"M4.57538 3.86827C4.77064 4.06353 4.77064 4.38012 4.57538 4.57538C4.38012 4.77064 4.06353 4.77064 3.86827 4.57538C3.67301 4.38012 3.67301 4.06353 3.86827 3.86827C4.06353 3.67301 4.38012 3.67301 4.57538 3.86827Z\" stroke=\"currentColor\"/><path d=\"M20.1317 3.86827C20.327 4.06353 20.327 4.38012 20.1317 4.57538C19.9365 4.77064 19.6199 4.77064 19.4246 4.57538C19.2294 4.38012 19.2294 4.06353 19.4246 3.86827C19.6199 3.67301 19.9365 3.67301 20.1317 3.86827Z\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAdjustPhoto", props.mode)} />
 );
 
 export default IconAdjustPhoto;

package/IconAdobeAcrobat/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAdobeAcrobat = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "adobe-acrobat" })} innerHTML={"<path d=\"M21.3654 14.4172C19.9038 12.8994 15.9127 13.5178 14.9571 13.6302C13.5518 12.2811 12.5961 10.6509 12.2589 10.0888C12.7648 8.57101 13.1021 7.05325 13.1583 5.42308C13.1583 4.01775 12.5961 2.5 11.0222 2.5C10.46 2.5 9.95413 2.83728 9.67306 3.28698C8.9985 4.46746 9.27957 6.8284 10.3476 9.24556C9.72927 10.9882 9.16714 12.6746 7.59318 15.6538C5.963 16.3284 2.53401 17.9024 2.25294 19.5888C2.14052 20.0947 2.30915 20.6006 2.70265 20.9941C3.09614 21.3314 3.60205 21.5 4.10797 21.5C6.18785 21.5 8.21152 18.6331 9.61685 16.216C10.7973 15.8225 12.6524 15.2604 14.5074 14.9231C16.6997 16.8343 18.6109 17.1154 19.6228 17.1154C20.9719 17.1154 21.4778 16.5533 21.6464 16.0473C21.9275 15.4852 21.7589 14.8669 21.3654 14.4172ZM19.96 15.3728C19.9038 15.7663 19.3979 16.1598 18.4985 15.9349C17.4305 15.6538 16.4748 15.1479 15.6316 14.4734C16.3624 14.3609 17.9926 14.1923 19.1731 14.4172C19.6228 14.5296 20.0725 14.8107 19.96 15.3728ZM10.5725 3.7929C10.6849 3.62426 10.8535 3.51183 11.0222 3.51183C11.5281 3.51183 11.6405 4.13018 11.6405 4.6361C11.5843 5.81657 11.3595 6.99704 10.966 8.1213C10.1228 5.87278 10.2914 4.29882 10.5725 3.7929ZM10.46 14.6982C10.9097 13.7988 11.5281 12.2249 11.7529 11.5503C12.2589 12.3935 13.1021 13.4053 13.5518 13.855C13.5518 13.9112 11.8092 14.2485 10.46 14.6982ZM7.14348 16.9467C5.85058 19.0828 4.50146 20.432 3.77069 20.432C3.65827 20.432 3.54584 20.3757 3.43342 20.3195C3.26478 20.2071 3.20856 20.0385 3.26478 19.8136C3.43342 19.0266 4.89495 17.9586 7.14348 16.9467Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "adobe-acrobat" })} innerHTML={maskInner("<path d=\"M21.3654 14.4172C19.9038 12.8994 15.9127 13.5178 14.9571 13.6302C13.5518 12.2811 12.5961 10.6509 12.2589 10.0888C12.7648 8.57101 13.1021 7.05325 13.1583 5.42308C13.1583 4.01775 12.5961 2.5 11.0222 2.5C10.46 2.5 9.95413 2.83728 9.67306 3.28698C8.9985 4.46746 9.27957 6.8284 10.3476 9.24556C9.72927 10.9882 9.16714 12.6746 7.59318 15.6538C5.963 16.3284 2.53401 17.9024 2.25294 19.5888C2.14052 20.0947 2.30915 20.6006 2.70265 20.9941C3.09614 21.3314 3.60205 21.5 4.10797 21.5C6.18785 21.5 8.21152 18.6331 9.61685 16.216C10.7973 15.8225 12.6524 15.2604 14.5074 14.9231C16.6997 16.8343 18.6109 17.1154 19.6228 17.1154C20.9719 17.1154 21.4778 16.5533 21.6464 16.0473C21.9275 15.4852 21.7589 14.8669 21.3654 14.4172ZM19.96 15.3728C19.9038 15.7663 19.3979 16.1598 18.4985 15.9349C17.4305 15.6538 16.4748 15.1479 15.6316 14.4734C16.3624 14.3609 17.9926 14.1923 19.1731 14.4172C19.6228 14.5296 20.0725 14.8107 19.96 15.3728ZM10.5725 3.7929C10.6849 3.62426 10.8535 3.51183 11.0222 3.51183C11.5281 3.51183 11.6405 4.13018 11.6405 4.6361C11.5843 5.81657 11.3595 6.99704 10.966 8.1213C10.1228 5.87278 10.2914 4.29882 10.5725 3.7929ZM10.46 14.6982C10.9097 13.7988 11.5281 12.2249 11.7529 11.5503C12.2589 12.3935 13.1021 13.4053 13.5518 13.855C13.5518 13.9112 11.8092 14.2485 10.46 14.6982ZM7.14348 16.9467C5.85058 19.0828 4.50146 20.432 3.77069 20.432C3.65827 20.432 3.54584 20.3757 3.43342 20.3195C3.26478 20.2071 3.20856 20.0385 3.26478 19.8136C3.43342 19.0266 4.89495 17.9586 7.14348 16.9467Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAdobeAcrobat", props.mode)} />
 );
 
 export default IconAdobeAcrobat;

package/IconAffinity/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAffinity = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "affinity" })} innerHTML={"<path d=\"M19.6157 6.52429C19.6157 3.88674 16.5606 2.75 12.6605 2.75C10.2882 2.75 7.60574 3.18911 5.11455 3.97485V9.13252C8.78581 6.45864 12.8647 5.31397 15.4921 5.31397C17.1442 5.31397 18.2652 5.77501 18.2652 6.60078C18.2652 10.0036 3.5 9.46437 3.5 16.817C3.5 19.6353 5.43794 21.25 8.1644 21.25C12.2884 21.25 15.4077 17.2423 17.7413 12.357L18.2141 12.5269C16.985 15.5123 14.4416 18.7856 13.9463 20.8899H19.2556V10.0035H18.0293C16.2493 13.8712 13.6411 17.4352 10.9329 17.4352C9.69652 17.4352 8.90999 16.6851 8.90999 15.7338C8.90999 11.6628 19.6157 10.8477 19.6157 6.52429Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "affinity" })} innerHTML={maskInner("<path d=\"M19.6157 6.52429C19.6157 3.88674 16.5606 2.75 12.6605 2.75C10.2882 2.75 7.60574 3.18911 5.11455 3.97485V9.13252C8.78581 6.45864 12.8647 5.31397 15.4921 5.31397C17.1442 5.31397 18.2652 5.77501 18.2652 6.60078C18.2652 10.0036 3.5 9.46437 3.5 16.817C3.5 19.6353 5.43794 21.25 8.1644 21.25C12.2884 21.25 15.4077 17.2423 17.7413 12.357L18.2141 12.5269C16.985 15.5123 14.4416 18.7856 13.9463 20.8899H19.2556V10.0035H18.0293C16.2493 13.8712 13.6411 17.4352 10.9329 17.4352C9.69652 17.4352 8.90999 16.6851 8.90999 15.7338C8.90999 11.6628 19.6157 10.8477 19.6157 6.52429Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAffinity", props.mode)} />
 );
 
 export default IconAffinity;

package/IconAgent/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAgent = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "agent, flow, diagram, org" })} innerHTML={"<circle cx=\"12\" cy=\"6\" r=\"3\" stroke=\"currentColor\"/><circle cx=\"6.5\" cy=\"18\" r=\"3\" stroke=\"currentColor\"/><circle cx=\"17.5\" cy=\"18\" r=\"3\" stroke=\"currentColor\"/><path d=\"M12 9V12M12 12H6.5V15M12 12H17.5V15\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "agent, flow, diagram, org" })} innerHTML={maskInner("<circle cx=\"12\" cy=\"6\" r=\"3\" stroke=\"currentColor\"/><circle cx=\"6.5\" cy=\"18\" r=\"3\" stroke=\"currentColor\"/><circle cx=\"17.5\" cy=\"18\" r=\"3\" stroke=\"currentColor\"/><path d=\"M12 9V12M12 12H6.5V15M12 12H17.5V15\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAgent", props.mode)} />
 );
 
 export default IconAgent;

package/IconAgentNetwork/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAgentNetwork = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "agent-network, connections, atoms" })} innerHTML={"<circle cx=\"18.5\" cy=\"7.5\" r=\"2.75\" stroke=\"currentColor\"/><circle cx=\"5.5\" cy=\"16.5\" r=\"2.75\" stroke=\"currentColor\"/><circle cx=\"8.5\" cy=\"6.5\" r=\"3.75\" stroke=\"currentColor\"/><circle cx=\"15.5\" cy=\"17.5\" r=\"3.75\" stroke=\"currentColor\"/><path d=\"M12.3643 6.78564L15.5903 7.10081M17.9026 10.2759L16.826 13.7821M13.4093 14.1646L10.4993 9.6972M7.17742 10.2023L6.07812 13.7821M8.20985 16.8798L11.6071 17.2117\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "agent-network, connections, atoms" })} innerHTML={maskInner("<circle cx=\"18.5\" cy=\"7.5\" r=\"2.75\" stroke=\"currentColor\"/><circle cx=\"5.5\" cy=\"16.5\" r=\"2.75\" stroke=\"currentColor\"/><circle cx=\"8.5\" cy=\"6.5\" r=\"3.75\" stroke=\"currentColor\"/><circle cx=\"15.5\" cy=\"17.5\" r=\"3.75\" stroke=\"currentColor\"/><path d=\"M12.3643 6.78564L15.5903 7.10081M17.9026 10.2759L16.826 13.7821M13.4093 14.1646L10.4993 9.6972M7.17742 10.2023L6.07812 13.7821M8.20985 16.8798L11.6071 17.2117\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAgentNetwork", props.mode)} />
 );
 
 export default IconAgentNetwork;

package/IconAgenticCoding/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAgenticCoding = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "agentic-coding, ai-code, vibe-code" })} innerHTML={"<path d=\"M3.5 5.5H12.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M15.5 5.5L20.5 5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 11.5H5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M8.5 11.5L12.5 11.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 17.5H9.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M18.45 11.5H17.55L16.425 14.425L13.5 15.55V16.45L16.425 17.575L17.55 20.5H18.45L19.575 17.575L22.5 16.45V15.55L19.575 14.425L18.45 11.5Z\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "agentic-coding, ai-code, vibe-code" })} innerHTML={maskInner("<path d=\"M3.5 5.5H12.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M15.5 5.5L20.5 5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 11.5H5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M8.5 11.5L12.5 11.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 17.5H9.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M18.45 11.5H17.55L16.425 14.425L13.5 15.55V16.45L16.425 17.575L17.55 20.5H18.45L19.575 17.575L22.5 16.45V15.55L19.575 14.425L18.45 11.5Z\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAgenticCoding", props.mode)} />
 );
 
 export default IconAgenticCoding;

package/IconAgents/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAgents = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "agents, connections, flow, roadmap" })} innerHTML={"<circle cx=\"6\" cy=\"5\" r=\"2.5\" stroke=\"currentColor\"/><circle cx=\"18\" cy=\"19\" r=\"2.5\" stroke=\"currentColor\"/><path d=\"M8.75 12L12 8.75L15.25 12L12 15.25L8.75 12Z\" stroke=\"currentColor\"/><path d=\"M8.5 5H17C18.933 5 20.5 6.567 20.5 8.5C20.5 10.433 18.933 12 17 12H15\" stroke=\"currentColor\"/><path d=\"M9 12H7C5.067 12 3.5 13.567 3.5 15.5C3.5 17.433 5.067 19 7 19H15.5\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "agents, connections, flow, roadmap" })} innerHTML={maskInner("<circle cx=\"6\" cy=\"5\" r=\"2.5\" stroke=\"currentColor\"/><circle cx=\"18\" cy=\"19\" r=\"2.5\" stroke=\"currentColor\"/><path d=\"M8.75 12L12 8.75L15.25 12L12 15.25L8.75 12Z\" stroke=\"currentColor\"/><path d=\"M8.5 5H17C18.933 5 20.5 6.567 20.5 8.5C20.5 10.433 18.933 12 17 12H15\" stroke=\"currentColor\"/><path d=\"M9 12H7C5.067 12 3.5 13.567 3.5 15.5C3.5 17.433 5.067 19 7 19H15.5\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAgents", props.mode)} />
 );
 
 export default IconAgents;

package/IconAiSlop/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAiSlop = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "ai-slop, trash" })} innerHTML={"<path d=\"M3 6.5H21\" stroke=\"currentColor\" stroke-linejoin=\"round\"/><path d=\"M7.5 6.5L8.5 2.5H15.5L16.5 6.5\" stroke=\"currentColor\"/><path d=\"M5.82959 14.3498L6.49988 21.4996H17.4999L18.2184 13.835\" stroke=\"currentColor\"/><path d=\"M5 6.5V12.75C5 13.7165 5.7835 14.5 6.75 14.5C7.7165 14.5 8.5 13.7165 8.5 12.75V10\" stroke=\"currentColor\"/><path d=\"M15.5 11V12.25C15.5 13.2165 16.2835 14 17.25 14C18.2165 14 19 13.2165 19 12.25V6.5\" stroke=\"currentColor\"/><path d=\"M15.5 11V14.25C15.5 15.2165 14.7165 16 13.75 16C12.7835 16 12 15.2165 12 14.25V9\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "ai-slop, trash" })} innerHTML={maskInner("<path d=\"M3 6.5H21\" stroke=\"currentColor\" stroke-linejoin=\"round\"/><path d=\"M7.5 6.5L8.5 2.5H15.5L16.5 6.5\" stroke=\"currentColor\"/><path d=\"M5.82959 14.3498L6.49988 21.4996H17.4999L18.2184 13.835\" stroke=\"currentColor\"/><path d=\"M5 6.5V12.75C5 13.7165 5.7835 14.5 6.75 14.5C7.7165 14.5 8.5 13.7165 8.5 12.75V10\" stroke=\"currentColor\"/><path d=\"M15.5 11V12.25C15.5 13.2165 16.2835 14 17.25 14C18.2165 14 19 13.2165 19 12.25V6.5\" stroke=\"currentColor\"/><path d=\"M15.5 11V14.25C15.5 15.2165 14.7165 16 13.75 16C12.7835 16 12 15.2165 12 14.25V9\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAiSlop", props.mode)} />
 );
 
 export default IconAiSlop;

package/IconAiTokens/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAiTokens = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "ai-tokens, credits" })} innerHTML={"<circle cx=\"12\" cy=\"12\" r=\"9.5\" stroke=\"currentColor\"/><path d=\"M12.5 6.84863H11.5L10.25 10.0986L7 11.3486V12.3486L10.25 13.5986L11.5 16.8486H12.5L13.75 13.5986L17 12.3486V11.3486L13.75 10.0986L12.5 6.84863Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "ai-tokens, credits" })} innerHTML={maskInner("<circle cx=\"12\" cy=\"12\" r=\"9.5\" stroke=\"currentColor\"/><path d=\"M12.5 6.84863H11.5L10.25 10.0986L7 11.3486V12.3486L10.25 13.5986L11.5 16.8486H12.5L13.75 13.5986L17 12.3486V11.3486L13.75 10.0986L12.5 6.84863Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAiTokens", props.mode)} />
 );
 
 export default IconAiTokens;

package/IconAiTranslate/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAiTranslate = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "ai-translate,language, auto-translate" })} innerHTML={"<path d=\"M2.5 6.5L11.5 6.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7 6.5V4.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 15.5C6.6822 14.3846 4.20506 11.6434 3.5 6.75\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 15.5C7.31602 14.3842 9.79342 11.6429 10.5 6.75\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 20.5L15.75 11.5H16.25L20.4999 20.5M13 18.5H19\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M17.85 2H17.15L16.275 4.275L14 5.15V5.85L16.275 6.725L17.15 9H17.85L18.725 6.725L21 5.85V5.15L18.725 4.275L17.85 2Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "ai-translate,language, auto-translate" })} innerHTML={maskInner("<path d=\"M2.5 6.5L11.5 6.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7 6.5V4.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 15.5C6.6822 14.3846 4.20506 11.6434 3.5 6.75\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 15.5C7.31602 14.3842 9.79342 11.6429 10.5 6.75\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 20.5L15.75 11.5H16.25L20.4999 20.5M13 18.5H19\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M17.85 2H17.15L16.275 4.275L14 5.15V5.85L16.275 6.725L17.15 9H17.85L18.725 6.725L21 5.85V5.15L18.725 4.275L17.85 2Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAiTranslate", props.mode)} />
 );
 
 export default IconAiTranslate;

package/IconAirdrop/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirdrop = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airdrop, file-sharing, radar" })} innerHTML={"<circle cx=\"12\" cy=\"12\" r=\"1.5\" stroke=\"currentColor\"/><path d=\"M12.5 11.5H11.5V12.5H12.5V11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M16.7508 20.2286C19.5899 18.5859 21.5 15.516 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 15.516 4.41007 18.5859 7.24917 20.2286\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M9.24865 16.7634C7.60544 15.8122 6.5 14.0352 6.5 12C6.5 8.96243 8.96243 6.5 12 6.5C15.0376 6.5 17.5 8.96243 17.5 12C17.5 14.0352 16.3946 15.8122 14.7514 16.7634\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airdrop, file-sharing, radar" })} innerHTML={maskInner("<circle cx=\"12\" cy=\"12\" r=\"1.5\" stroke=\"currentColor\"/><path d=\"M12.5 11.5H11.5V12.5H12.5V11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M16.7508 20.2286C19.5899 18.5859 21.5 15.516 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 15.516 4.41007 18.5859 7.24917 20.2286\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M9.24865 16.7634C7.60544 15.8122 6.5 14.0352 6.5 12C6.5 8.96243 8.96243 6.5 12 6.5C15.0376 6.5 17.5 8.96243 17.5 12C17.5 14.0352 16.3946 15.8122 14.7514 16.7634\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAirdrop", props.mode)} />
 );
 
 export default IconAirdrop;

package/IconAirdrop2/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirdrop2 = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airdrop-2, free, drop, parachute" })} innerHTML={"<path d=\"M7.5 21.5V16.5H16.5V21.5H7.5Z\" stroke=\"currentColor\"/><path d=\"M13.5 16.25L20 11.25M4 11.25L10.5 16.25M12 10.5V16\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M12 2.5C7.30558 2.5 3.5 6.30558 3.5 11C3.5 11 8.67407 10.4688 12 10.4688C15.3259 10.4688 20.5 11 20.5 11C20.5 6.30558 16.6944 2.5 12 2.5Z\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airdrop-2, free, drop, parachute" })} innerHTML={maskInner("<path d=\"M7.5 21.5V16.5H16.5V21.5H7.5Z\" stroke=\"currentColor\"/><path d=\"M13.5 16.25L20 11.25M4 11.25L10.5 16.25M12 10.5V16\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M12 2.5C7.30558 2.5 3.5 6.30558 3.5 11C3.5 11 8.67407 10.4688 12 10.4688C15.3259 10.4688 20.5 11 20.5 11C20.5 6.30558 16.6944 2.5 12 2.5Z\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirdrop2", props.mode)} />
 );
 
 export default IconAirdrop2;

package/IconAirplane/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirplane = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airplane, flight" })} innerHTML={"<path d=\"M16.6023 3.70324L13.5833 6.72222L4.61111 3.55556L2.5 5.66667L9.36111 10.9444L7.25 13.0556H5.13889L2.5 15.6944L6.72222 17.2778L8.30556 21.5L10.9444 18.8611V16.75L13.0556 14.6389L18.3333 21.5L20.4444 19.3889L17.2778 10.4167L20.2968 7.39768C21.0672 6.62726 21.5 5.58235 21.5 4.49281V2.5H19.5072C18.4177 2.5 17.3727 2.93282 16.6023 3.70324Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airplane, flight" })} innerHTML={maskInner("<path d=\"M16.6023 3.70324L13.5833 6.72222L4.61111 3.55556L2.5 5.66667L9.36111 10.9444L7.25 13.0556H5.13889L2.5 15.6944L6.72222 17.2778L8.30556 21.5L10.9444 18.8611V16.75L13.0556 14.6389L18.3333 21.5L20.4444 19.3889L17.2778 10.4167L20.2968 7.39768C21.0672 6.62726 21.5 5.58235 21.5 4.49281V2.5H19.5072C18.4177 2.5 17.3727 2.93282 16.6023 3.70324Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/>", "square-outlined-radius-0-stroke-1-IconAirplane", props.mode)} />
 );
 
 export default IconAirplane;

package/IconAirplaneDown/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirplaneDown = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airplane-down, landing" })} innerHTML={"<path d=\"M6.6482 3.19308L4.05653 2.5L3.94836 7.04412L2.72991 7.67533L2.55556 8.43306C2.29612 9.56056 2.9695 10.6924 4.07037 10.9791L8.03023 12.0106L6.37181 15.1683L9.48182 16L13.972 13.5584L19.4235 14.8589C20.0965 15.0194 20.7977 14.7464 21.1941 14.1693C21.6626 13.4874 21.586 12.5617 21.012 11.9695L19.3535 10.258C19.0855 9.98141 18.7518 9.78594 18.382 9.69091C16.6737 9.25195 11.5253 7.92713 9.35235 7.34602C8.73702 7.18147 8.22895 6.74418 7.96553 6.15242L6.6482 3.19308Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 19.5H21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airplane-down, landing" })} innerHTML={maskInner("<path d=\"M6.6482 3.19308L4.05653 2.5L3.94836 7.04412L2.72991 7.67533L2.55556 8.43306C2.29612 9.56056 2.9695 10.6924 4.07037 10.9791L8.03023 12.0106L6.37181 15.1683L9.48182 16L13.972 13.5584L19.4235 14.8589C20.0965 15.0194 20.7977 14.7464 21.1941 14.1693C21.6626 13.4874 21.586 12.5617 21.012 11.9695L19.3535 10.258C19.0855 9.98141 18.7518 9.78594 18.382 9.69091C16.6737 9.25195 11.5253 7.92713 9.35235 7.34602C8.73702 7.18147 8.22895 6.74418 7.96553 6.15242L6.6482 3.19308Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 19.5H21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAirplaneDown", props.mode)} />
 );
 
 export default IconAirplaneDown;

package/IconAirplaneUp/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirplaneUp = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airplane-up, takeoff" })} innerHTML={"<path d=\"M4.15869 6.39279L1.75 7.2837L4.11619 10.8437L3.5 11.9998L3.77183 12.6794C4.1763 13.6906 5.31551 14.1923 6.33453 13.808L10 12.4256L10.4012 15.7698L13.2916 14.7008L15.5 10.3513L20.4817 8.35611C21.0968 8.10979 21.5 7.51394 21.5 6.85141C21.5 6.06858 20.9405 5.39761 20.1704 5.2569L17.9451 4.85029C17.5854 4.78458 17.2181 4.81742 16.8764 4.94754C15.2983 5.54857 10.5415 7.35838 8.52196 8.10535C7.95008 8.31688 7.31528 8.25934 6.78927 7.9483L4.15869 6.39279Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 19.5H21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airplane-up, takeoff" })} innerHTML={maskInner("<path d=\"M4.15869 6.39279L1.75 7.2837L4.11619 10.8437L3.5 11.9998L3.77183 12.6794C4.1763 13.6906 5.31551 14.1923 6.33453 13.808L10 12.4256L10.4012 15.7698L13.2916 14.7008L15.5 10.3513L20.4817 8.35611C21.0968 8.10979 21.5 7.51394 21.5 6.85141C21.5 6.06858 20.9405 5.39761 20.1704 5.2569L17.9451 4.85029C17.5854 4.78458 17.2181 4.81742 16.8764 4.94754C15.2983 5.54857 10.5415 7.35838 8.52196 8.10535C7.95008 8.31688 7.31528 8.25934 6.78927 7.9483L4.15869 6.39279Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M2.5 19.5H21.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAirplaneUp", props.mode)} />
 );
 
 export default IconAirplaneUp;

package/IconAirplay/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirplay = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airplay" })} innerHTML={"<path d=\"M2.5 17.5H2V18H2.5V17.5ZM6.5 18H7V17H6.5V18ZM2.5 3.5V3H2V3.5H2.5ZM21.5 3.5H22V3H21.5V3.5ZM21.5 17.5V18H22V17.5H21.5ZM17.5 17H17V18H17.5V17ZM2.5 17.5V18H6.5V17.5V17H2.5V17.5ZM2.5 17.5H3V3.5H2.5H2V17.5H2.5ZM2.5 3.5V4H21.5V3.5V3H2.5V3.5ZM21.5 3.5H21V17.5H21.5H22V3.5H21.5ZM21.5 17.5V17H17.5V17.5V18H21.5V17.5Z\" fill=\"currentColor\"/><path d=\"M12 15L12.4044 14.7059L12 14.1499L11.5956 14.7059L12 15ZM8 20.5L7.59563 20.2059L7.01811 21H8V20.5ZM16 20.5V21H16.9819L16.4044 20.2059L16 20.5ZM12 15L11.5956 14.7059L7.59563 20.2059L8 20.5L8.40437 20.7941L12.4044 15.2941L12 15ZM8 20.5V21H16V20.5V20H8V20.5ZM16 20.5L16.4044 20.2059L12.4044 14.7059L12 15L11.5956 15.2941L15.5956 20.7941L16 20.5Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airplay" })} innerHTML={maskInner("<path d=\"M2.5 17.5H2V18H2.5V17.5ZM6.5 18H7V17H6.5V18ZM2.5 3.5V3H2V3.5H2.5ZM21.5 3.5H22V3H21.5V3.5ZM21.5 17.5V18H22V17.5H21.5ZM17.5 17H17V18H17.5V17ZM2.5 17.5V18H6.5V17.5V17H2.5V17.5ZM2.5 17.5H3V3.5H2.5H2V17.5H2.5ZM2.5 3.5V4H21.5V3.5V3H2.5V3.5ZM21.5 3.5H21V17.5H21.5H22V3.5H21.5ZM21.5 17.5V17H17.5V17.5V18H21.5V17.5Z\" fill=\"currentColor\"/><path d=\"M12 15L12.4044 14.7059L12 14.1499L11.5956 14.7059L12 15ZM8 20.5L7.59563 20.2059L7.01811 21H8V20.5ZM16 20.5V21H16.9819L16.4044 20.2059L16 20.5ZM12 15L11.5956 14.7059L7.59563 20.2059L8 20.5L8.40437 20.7941L12.4044 15.2941L12 15ZM8 20.5V21H16V20.5V20H8V20.5ZM16 20.5L16.4044 20.2059L12.4044 14.7059L12 15L11.5956 15.2941L15.5956 20.7941L16 20.5Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirplay", props.mode)} />
 );
 
 export default IconAirplay;

package/IconAirplayAudio/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirplayAudio = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airplay-audio, audio-stream" })} innerHTML={"<path d=\"M12 15L12.4044 14.7059L12 14.1499L11.5956 14.7059L12 15ZM8 20.5L7.59563 20.2059L7.01811 21H8V20.5ZM16 20.5V21H16.9819L16.4044 20.2059L16 20.5ZM12 15L11.5956 14.7059L7.59563 20.2059L8 20.5L8.40437 20.7941L12.4044 15.2941L12 15ZM8 20.5V21H16V20.5V20H8V20.5ZM16 20.5L16.4044 20.2059L12.4044 14.7059L12 15L11.5956 15.2941L15.5956 20.7941L16 20.5Z\" fill=\"currentColor\"/><path d=\"M12 2C17.5228 2 22 6.47715 22 12C22 15.2398 20.458 18.1179 18.0693 19.9453L17.4805 19.1357C19.6196 17.4904 21 14.9074 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.9071 4.37977 17.4903 6.51855 19.1357L5.92969 19.9453C3.54141 18.1179 2 15.2395 2 12C2 6.47715 6.47715 2 12 2Z\" fill=\"currentColor\"/><path d=\"M12 5C15.866 5 19 8.13401 19 12C19 14.2425 17.9438 16.2365 16.3037 17.5176L15.7158 16.708C17.1062 15.6092 18 13.9098 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 13.9095 6.89318 15.6091 8.2832 16.708L7.69531 17.5176C6.05553 16.2364 5 14.2422 5 12C5 8.13401 8.13401 5 12 5Z\" fill=\"currentColor\"/><path d=\"M12 8C14.2091 8 16 9.79086 16 12C16 13.2449 15.4308 14.3562 14.5391 15.0898L13.9482 14.2783C14.5911 13.7281 15 12.9125 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 12.9122 9.40827 13.7281 10.0508 14.2783L9.45996 15.0898C8.56857 14.3562 8 13.2446 8 12C8 9.79086 9.79086 8 12 8Z\" fill=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airplay-audio, audio-stream" })} innerHTML={maskInner("<path d=\"M12 15L12.4044 14.7059L12 14.1499L11.5956 14.7059L12 15ZM8 20.5L7.59563 20.2059L7.01811 21H8V20.5ZM16 20.5V21H16.9819L16.4044 20.2059L16 20.5ZM12 15L11.5956 14.7059L7.59563 20.2059L8 20.5L8.40437 20.7941L12.4044 15.2941L12 15ZM8 20.5V21H16V20.5V20H8V20.5ZM16 20.5L16.4044 20.2059L12.4044 14.7059L12 15L11.5956 15.2941L15.5956 20.7941L16 20.5Z\" fill=\"currentColor\"/><path d=\"M12 2C17.5228 2 22 6.47715 22 12C22 15.2398 20.458 18.1179 18.0693 19.9453L17.4805 19.1357C19.6196 17.4904 21 14.9074 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.9071 4.37977 17.4903 6.51855 19.1357L5.92969 19.9453C3.54141 18.1179 2 15.2395 2 12C2 6.47715 6.47715 2 12 2Z\" fill=\"currentColor\"/><path d=\"M12 5C15.866 5 19 8.13401 19 12C19 14.2425 17.9438 16.2365 16.3037 17.5176L15.7158 16.708C17.1062 15.6092 18 13.9098 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 13.9095 6.89318 15.6091 8.2832 16.708L7.69531 17.5176C6.05553 16.2364 5 14.2422 5 12C5 8.13401 8.13401 5 12 5Z\" fill=\"currentColor\"/><path d=\"M12 8C14.2091 8 16 9.79086 16 12C16 13.2449 15.4308 14.3562 14.5391 15.0898L13.9482 14.2783C14.5911 13.7281 15 12.9125 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 12.9122 9.40827 13.7281 10.0508 14.2783L9.45996 15.0898C8.56857 14.3562 8 13.2446 8 12C8 9.79086 9.79086 8 12 8Z\" fill=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirplayAudio", props.mode)} />
 );
 
 export default IconAirplayAudio;

package/IconAirpodCase/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirpodCase = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-case, airpods" })} innerHTML={"<path d=\"M17 20.5H7C5.067 20.5 3.5 18.933 3.5 17V9.5V7C3.5 5.067 5.067 3.5 7 3.5H17C18.933 3.5 20.5 5.067 20.5 7V9.5V17C20.5 18.933 18.933 20.5 17 20.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/><path d=\"M20.5 9.5H3.5\" stroke=\"currentColor\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/><path d=\"M12 12.125C12.3452 12.125 12.625 12.4048 12.625 12.75C12.625 13.0952 12.3452 13.375 12 13.375C11.6548 13.375 11.375 13.0952 11.375 12.75C11.375 12.4048 11.6548 12.125 12 12.125Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"0.25\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-case, airpods" })} innerHTML={maskInner("<path d=\"M17 20.5H7C5.067 20.5 3.5 18.933 3.5 17V9.5V7C3.5 5.067 5.067 3.5 7 3.5H17C18.933 3.5 20.5 5.067 20.5 7V9.5V17C20.5 18.933 18.933 20.5 17 20.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/><path d=\"M20.5 9.5H3.5\" stroke=\"currentColor\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/><path d=\"M12 12.125C12.3452 12.125 12.625 12.4048 12.625 12.75C12.625 13.0952 12.3452 13.375 12 13.375C11.6548 13.375 11.375 13.0952 11.375 12.75C11.375 12.4048 11.6548 12.125 12 12.125Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"0.25\"/>", "square-outlined-radius-0-stroke-1-IconAirpodCase", props.mode)} />
 );
 
 export default IconAirpodCase;

package/IconAirpodLeft/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirpodLeft = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-left" })} innerHTML={"<path d=\"M7.5 13.083V20.5H4.5V8.5C4.5 5.73858 6.73858 3.5 9.5 3.5C10.6257 3.5 11.6643 3.87223 12.5 4.5V12.499C11.6642 13.127 10.6259 13.5 9.5 13.5C8.78876 13.5 8.11255 13.3507 7.5 13.083ZM7.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M15.5 13V20.5H20\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-left" })} innerHTML={maskInner("<path d=\"M7.5 13.083V20.5H4.5V8.5C4.5 5.73858 6.73858 3.5 9.5 3.5C10.6257 3.5 11.6643 3.87223 12.5 4.5V12.499C11.6642 13.127 10.6259 13.5 9.5 13.5C8.78876 13.5 8.11255 13.3507 7.5 13.083ZM7.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M15.5 13V20.5H20\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirpodLeft", props.mode)} />
 );
 
 export default IconAirpodLeft;

package/IconAirpodRight/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirpodRight = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-right" })} innerHTML={"<path d=\"M16.5 13.083V20.5H19.5V8.5C19.5 5.73858 17.2614 3.5 14.5 3.5C13.3743 3.5 12.3357 3.87223 11.5 4.5V12.499C12.3358 13.127 13.3741 13.5 14.5 13.5C15.2112 13.5 15.8874 13.3507 16.5 13.083ZM16.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M4.5 17.5V13.5H7C8.10457 13.5 9 14.3954 9 15.5C9 16.6046 8.10457 17.5 7 17.5H4.5ZM4.5 17.5V21\" stroke=\"currentColor\"/><path d=\"M8.99784 21.0001V20.5001C8.99784 18.879 8.60925 17.502 6.37891 17.502\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airpod-right" })} innerHTML={maskInner("<path d=\"M16.5 13.083V20.5H19.5V8.5C19.5 5.73858 17.2614 3.5 14.5 3.5C13.3743 3.5 12.3357 3.87223 11.5 4.5V12.499C12.3358 13.127 13.3741 13.5 14.5 13.5C15.2112 13.5 15.8874 13.3507 16.5 13.083ZM16.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M4.5 17.5V13.5H7C8.10457 13.5 9 14.3954 9 15.5C9 16.6046 8.10457 17.5 7 17.5H4.5ZM4.5 17.5V21\" stroke=\"currentColor\"/><path d=\"M8.99784 21.0001V20.5001C8.99784 18.879 8.60925 17.502 6.37891 17.502\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirpodRight", props.mode)} />
 );
 
 export default IconAirpodRight;

package/IconAirpods/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAirpods = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "airpods, headphones, vibe" })} innerHTML={"<path d=\"M16.5 13.083V20.5H13.5V8.5C13.5 5.73858 15.7386 3.5 18.5 3.5C19.6257 3.5 20.6643 3.87223 21.5 4.5V12.499C20.6642 13.127 19.6259 13.5 18.5 13.5C17.7888 13.5 17.1126 13.3507 16.5 13.083ZM16.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M7.5 13.083V20.5H10.5V8.5C10.5 5.73858 8.26142 3.5 5.5 3.5C4.37432 3.5 3.33569 3.87223 2.5 4.5V12.499C3.33577 13.127 4.3741 13.5 5.5 13.5C6.21124 13.5 6.88745 13.3507 7.5 13.083ZM7.5 13.083V11\" stroke=\"currentColor\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "airpods, headphones, vibe" })} innerHTML={maskInner("<path d=\"M16.5 13.083V20.5H13.5V8.5C13.5 5.73858 15.7386 3.5 18.5 3.5C19.6257 3.5 20.6643 3.87223 21.5 4.5V12.499C20.6642 13.127 19.6259 13.5 18.5 13.5C17.7888 13.5 17.1126 13.3507 16.5 13.083ZM16.5 13.083V11\" stroke=\"currentColor\"/><path d=\"M7.5 13.083V20.5H10.5V8.5C10.5 5.73858 8.26142 3.5 5.5 3.5C4.37432 3.5 3.33569 3.87223 2.5 4.5V12.499C3.33577 13.127 4.3741 13.5 5.5 13.5C6.21124 13.5 6.88745 13.3507 7.5 13.083ZM7.5 13.083V11\" stroke=\"currentColor\"/>", "square-outlined-radius-0-stroke-1-IconAirpods", props.mode)} />
 );
 
 export default IconAirpods;

package/IconAlbums/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlbums = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "albums, cover" })} innerHTML={"<path d=\"M3.5 5.5V18.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7.5 4.5V19.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 20.5V3.5L20.5 5.5V18.5L11.5 20.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "albums, cover" })} innerHTML={maskInner("<path d=\"M3.5 5.5V18.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7.5 4.5V19.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M11.5 20.5V3.5L20.5 5.5V18.5L11.5 20.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlbums", props.mode)} />
 );
 
 export default IconAlbums;

package/IconAlbums2/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlbums2 = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "albums-2, cover" })} innerHTML={"<path d=\"M18.5 3.5H5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M19.5 7.5H4.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 11.5H20.5L18.5 20.5H5.5L3.5 11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "albums-2, cover" })} innerHTML={maskInner("<path d=\"M18.5 3.5H5.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M19.5 7.5H4.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 11.5H20.5L18.5 20.5H5.5L3.5 11.5Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlbums2", props.mode)} />
 );
 
 export default IconAlbums2;

package/IconAlien/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlien = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "alien" })} innerHTML={"<path d=\"M20.5 10.9211C20.5 17.2368 14.125 22.5 12 22.5C9.875 22.5 3.5 17.2368 3.5 10.9211C3.5 6.27023 7.30558 2.5 12 2.5C16.6944 2.5 20.5 6.27023 20.5 10.9211Z\" stroke=\"currentColor\"/><path d=\"M7.66158 11.0391L9.86888 13.0171M9.78248 12.4048L8.3033 11.0793M7.72454 11.6592L9.20372 12.9847M7.01154 10.4343C9.1742 10.1063 10.4656 11.0566 10.4684 13.5705C8.35814 13.7522 6.87311 12.9452 7.01154 10.4343Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M16.3384 11.0391L14.1311 13.0171M14.2175 12.4048L15.6967 11.0793M16.2755 11.6592L14.7963 12.9847M16.9885 10.4343C14.8258 10.1063 13.5344 11.0566 13.5316 13.5705C15.6419 13.7522 17.1269 12.9452 16.9885 10.4343Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "alien" })} innerHTML={maskInner("<path d=\"M20.5 10.9211C20.5 17.2368 14.125 22.5 12 22.5C9.875 22.5 3.5 17.2368 3.5 10.9211C3.5 6.27023 7.30558 2.5 12 2.5C16.6944 2.5 20.5 6.27023 20.5 10.9211Z\" stroke=\"currentColor\"/><path d=\"M7.66158 11.0391L9.86888 13.0171M9.78248 12.4048L8.3033 11.0793M7.72454 11.6592L9.20372 12.9847M7.01154 10.4343C9.1742 10.1063 10.4656 11.0566 10.4684 13.5705C8.35814 13.7522 6.87311 12.9452 7.01154 10.4343Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M16.3384 11.0391L14.1311 13.0171M14.2175 12.4048L15.6967 11.0793M16.2755 11.6592L14.7963 12.9847M16.9885 10.4343C14.8258 10.1063 13.5344 11.0566 13.5316 13.5705C15.6419 13.7522 17.1269 12.9452 16.9885 10.4343Z\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlien", props.mode)} />
 );
 
 export default IconAlien;

package/IconAlignHorizontalCenter/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlignHorizontalCenter = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "align-horizontal-center, alignment" })} innerHTML={"<path d=\"M20.5 3.5L3.5 3.5L3.5 20.5L20.5 20.5L20.5 3.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M12 16.5L12 7.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "align-horizontal-center, alignment" })} innerHTML={maskInner("<path d=\"M20.5 3.5L3.5 3.5L3.5 20.5L20.5 20.5L20.5 3.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M12 16.5L12 7.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlignHorizontalCenter", props.mode)} />
 );
 
 export default IconAlignHorizontalCenter;

package/IconAlignVerticalCenter/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlignVerticalCenter = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "align-vertical-center, alignment" })} innerHTML={"<path d=\"M20.5 3.5V20.5H3.5V3.5H20.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M7.5 12H16.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "align-vertical-center, alignment" })} innerHTML={maskInner("<path d=\"M20.5 3.5V20.5H3.5V3.5H20.5Z\" stroke=\"currentColor\" stroke-linecap=\"round\"/><path d=\"M7.5 12H16.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlignVerticalCenter", props.mode)} />
 );
 
 export default IconAlignVerticalCenter;

package/IconAlignmentCenter/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlignmentCenter = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-center" })} innerHTML={"<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7.5 12H16.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-center" })} innerHTML={maskInner("<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M7.5 12H16.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlignmentCenter", props.mode)} />
 );
 
 export default IconAlignmentCenter;

package/IconAlignmentJustify/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlignmentJustify = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-justify" })} innerHTML={"<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 12H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-justify" })} innerHTML={maskInner("<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 12H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlignmentJustify", props.mode)} />
 );
 
 export default IconAlignmentJustify;

package/IconAlignmentLeft/index.tsx

@@ -1,7 +1,7 @@
-import { svgAttrs, type CentralIconBaseProps } from "../CentralIconBase";
+import { svgAttrs, maskInner, type CentralIconBaseProps } from "../CentralIconBase";
 
 export const IconAlignmentLeft = (props: CentralIconBaseProps) => (
-  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-left" })} innerHTML={"<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 12H12.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>"} />
+  <svg {...svgAttrs({ ...props, ariaLabel: "alignment-left" })} innerHTML={maskInner("<path d=\"M3.5 4.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 12H12.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/><path d=\"M3.5 19.5H20.5\" stroke=\"currentColor\" stroke-linecap=\"square\"/>", "square-outlined-radius-0-stroke-1-IconAlignmentLeft", props.mode)} />
 );
 
 export default IconAlignmentLeft;