@central-icons-react/all 1.1.320 → 1.1.322

package/CentralIconBase/index.d.ts

@@ -6,8 +6,8 @@ export type CentralIconBaseProps = {
   mode?: "masked" | "raw";
   maskId?: string;
 } & SVGProps<SVGSVGElement>;
-export declare const CentralIconBase: React.FC<
-  CentralIconBaseProps & {
-    ariaLabel?: string;
-  }
->;
+type Props = CentralIconBaseProps & {
+  ariaLabel?: string;
+};
+export declare const CentralIconBase: React.FC<Props>;
+export {};

package/CentralIconBase/index.js

@@ -1,12 +1,32 @@
 import React from "react";
-export const CentralIconBase = ({ children, size = 24, ariaLabel, color, ariaHidden = true, style, mode = "masked", maskId, ...props }) => {
+const ModernCentralIconBase = (props) => {
+    const instanceId = React.useId();
+    return React.createElement(CentralIconSvg, { ...props, instanceId: instanceId });
+};
+let nextLegacyId = 0;
+class LegacyCentralIconBase extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+    }
+    componentDidMount() {
+        // Defer legacy IDs until mount so server and initial client markup agree.
+        this.setState({ instanceId: `legacy-${++nextLegacyId}` });
+    }
+    render() {
+        return (React.createElement(CentralIconSvg, { ...this.props.iconProps, instanceId: this.state.instanceId }));
+    }
+}
+export const CentralIconBase = (props) => typeof React.useId === "function" ? (React.createElement(ModernCentralIconBase, { ...props })) : (React.createElement(LegacyCentralIconBase, { iconProps: props }));
+const CentralIconSvg = ({ children, size = 24, ariaLabel, color, ariaHidden = true, style, mode = "masked", maskId, instanceId, ...props }) => {
+    const uniqueMaskId = instanceId ? `${maskId}-${instanceId}` : maskId;
     const masked = mode !== "raw" && !!maskId;
     return (React.createElement("svg", { ...props, "aria-hidden": ariaHidden, role: ariaHidden ? undefined : "img", width: typeof size === "number" ? `${size}px` : size, height: typeof size === "number" ? `${size}px` : size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { color, ...style } },
         ariaLabel && !ariaHidden && React.createElement("title", null, ariaLabel),
         masked ? (React.createElement(React.Fragment, null,
-            React.createElement("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
+            React.createElement("mask", { id: uniqueMaskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
                 React.createElement("rect", { width: "24", height: "24", fill: "#000" }),
                 React.createElement("g", { fill: "none", style: { color: "#fff" } }, children)),
-            React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${maskId})` }))) : (children)));
+            React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${uniqueMaskId})` }))) : (children)));
 };
 //# sourceMappingURL=index.js.map

package/CentralIconBase/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,CAAC,MAAM,eAAe,GAExB,CAAC,EACH,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,SAAS,EACT,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC;IAC1C,OAAO,CACL,gCACM,KAAK,iBACI,UAAU,EACvB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACpC,KAAK,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,EACpD,MAAM,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,EACrD,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;QAEzB,SAAS,IAAI,CAAC,UAAU,IAAI,mCAAQ,SAAS,CAAS;QACtD,MAAM,CAAC,CAAC,CAAC,CACR;YACE,8BACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,gBAAgB,EAC1B,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,GAAG;gBAC3C,2BAAG,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IACpC,QAAQ,CACP,CACC;YACP,8BACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,QAAQ,MAAM,GAAG,GACvB,CACD,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"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"}

package/README.md

@@ -1,7 +1,7 @@
 # @central-icons-react/all
 
 A comprehensive collection of professionally designed React icons featuring customizable styles including round and square shapes, filled and outlined variants, multiple stroke widths, and corner radius options.
-The collection contains 2096 icons with 30 variants in total.
+The collection contains 2098 icons with 30 variants in total.
 
 ## Table of Contents
 
@@ -91,6 +91,8 @@ function MyComponent() {
 
 ## Using transparent colors
 
+Each mounted icon has a unique mask ID, so repeated icons remain independent even when one is hidden with `display: none`. React 18+ uses `useId()` for IDs that also match during server rendering and hydration. Older React versions assign unique IDs after mounting; server-rendered icons retain shared IDs until hydration completes.
+
 Transparent colors work out of the box. Every icon is drawn through a mask and the color is painted once, so a semi-transparent `color` (or `currentColor` with an alpha channel) renders evenly — no darker overlaps:
 
 ```jsx
@@ -545,6 +547,7 @@ Below is a complete list of available icons:
 - IconCodeMedium
 - IconCodeTree
 - IconCommits
+- IconConditionalLogic
 - IconConsole
 - IconConsoleSimple
 - IconDebugger
@@ -1628,6 +1631,7 @@ Below is a complete list of available icons:
 - IconShadows
 - IconShareScreen
 - IconSplit
+- IconSpotlight.focus
 - IconStopShareScreen
 - IconUnblur
 - IconVideo

package/icons/index.d.ts

@@ -1859,6 +1859,11 @@ export declare const centralIconsMetadata: {
     readonly category: "Code";
     readonly createdAt: "2026-06-17T07:03:10.280172+00:00";
   };
+  readonly IconConditionalLogic: {
+    readonly title: "conditional-logic, if, tree";
+    readonly category: "Code";
+    readonly createdAt: "2026-09-23T07:02:04.436553+00:00";
+  };
   readonly IconEmail1: {
     readonly title: "email-1, envelope";
     readonly category: "Communication";
@@ -6879,6 +6884,11 @@ export declare const centralIconsMetadata: {
     readonly category: "Photography & Video";
     readonly createdAt: "2026-09-16T07:02:05.063116+00:00";
   };
+  readonly "IconSpotlight.focus": {
+    readonly title: "spotlight. focus, shooting, studio";
+    readonly category: "Photography & Video";
+    readonly createdAt: "2026-09-23T07:02:04.436553+00:00";
+  };
   readonly IconLock: {
     readonly title: "lock, private";
     readonly category: "Security";

package/icons/index.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/icons/index.js
-size: 55684269 bytes
-sha256: 755a8fadb3cf5c11edcc28758d3cb35070ae59f792d1db88213dfcc98c055e8c
+size: 55723751 bytes
+sha256: 93767f5f5e19dd0d6dd85e6587aab03059dded486e02a2ab0525633301f00c6b

package/icons/index.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/icons/index.js.map
-size: 60509995 bytes
-sha256: 8df341f4242f3e74fa2dc4d9515e009d122b509325e1551aa5f938808956ae4c
+size: 60553821 bytes
+sha256: d1ab24ed3474f100b473c40c9a201ddf31ec4a39ff576d10ca6249cfe76aa03b

package/icons/index.mjs

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/icons/index.mjs
-size: 55683758 bytes
-sha256: 06f710666d475c0ec2d9d8bbdaef39b3ccbec4087250ce2be13c4e3dfa68e99e
+size: 55723240 bytes
+sha256: 1b2b6c3cf61c7c0399e2b48c1dc8c6d3f487fed086de64a88ed07e50f0a96d43

package/icons/index.mjs.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/icons/index.mjs.map
-size: 60509872 bytes
-sha256: 965eb4cfebe608af069d1162cbb835886a53b42c480e8b4b1689c128ae818629
+size: 60553698 bytes
+sha256: ffcaf180bfce78e15eb02e4c2709b30c93920f2b76c17e6c54fa538c5547d20b

package/icons-index.json

@@ -11,7 +11,7 @@
     "withProps": "<IconHome size={32} color=\"#007AFF\" />",
     "central": "<CentralIcon\n  iconJoin=\"round\" // round | square\n  iconFill=\"filled\" // filled | outlined\n  iconStroke=\"1\" // 1 | 1.5 | 2\n  iconRadius=\"1\" // 0 | 1 | 2 | 3\n  name=\"IconName\"\n/>"
   },
-  "totalIcons": 2096,
+  "totalIcons": 2098,
   "categories": {
   "AI & Magic": {
     "count": 90,
@@ -350,7 +350,7 @@
     ]
   },
   "Code": {
-    "count": 66,
+    "count": 67,
     "icons": [
       "IconAgent",
       "IconAgenticCoding",
@@ -388,6 +388,7 @@
       "IconCodeMedium",
       "IconCodeTree",
       "IconCommits",
+      "IconConditionalLogic",
       "IconConsole",
       "IconConsoleSimple",
       "IconDebugger",
@@ -1436,7 +1437,7 @@
     ]
   },
   "Photography & Video": {
-    "count": 88,
+    "count": 89,
     "icons": [
       "Icon4k",
       "IconAddImage",
@@ -1511,6 +1512,7 @@
       "IconShadows",
       "IconShareScreen",
       "IconSplit",
+      "IconSpotlight.focus",
       "IconStopShareScreen",
       "IconUnblur",
       "IconVideo",
@@ -2683,6 +2685,7 @@
   "IconAnimatePath": "animate-path, animation, jump",
   "IconAgents": "agents, connections, flow, roadmap",
   "IconWebhooks": "webhooks",
+  "IconConditionalLogic": "conditional-logic, if, tree",
   "IconEmail1": "email-1, envelope",
   "IconEmailSettings": "email-settings, envelope, gear",
   "IconEmailPlus": "email-plus, envelope, add, plus",
@@ -3687,6 +3690,7 @@
   "IconVideo2Off": "video-2-off, cam-off, movie, play",
   "IconStopShareScreen": "stop-share-screen, stop-sharing",
   "IconReferenceImage": "reference-image, verified-photo, proof, aperture",
+  "IconSpotlight.focus": "spotlight. focus, shooting, studio",
   "IconLock": "lock, private",
   "IconUnlocked": "unlocked, unlock, private",
   "IconShield": "shield, security, protection",

package/index.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.js
-size: 55685558 bytes
-sha256: c625bc22017952c9fbc46193349ad41e706c8a16ab70c6381de318774400c426
+size: 55725527 bytes
+sha256: da8904fa2ec822428e1564b0256343357929a8ae998db5784be8624bdecddb5f

package/index.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.js.map
-size: 60514716 bytes
-sha256: 5751f99ddb61890bfcd61f2ab3b086c7ccc974237b1251972a34c4ab3cc7e5b4
+size: 60560221 bytes
+sha256: 21c5453a7d8ae87d0d835466ad584111e2ac384b73b82c95dd637e2462a3256c

package/index.mjs

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs
-size: 55684841 bytes
-sha256: 8ed3c75b2ebe7728eeede28332dfff38f8be01234efdbf1c0343d5123867b756
+size: 55724754 bytes
+sha256: 84e2251b5c70d0b171e80f2eadde8e564fdea952bd04dffdf2f3273568a2a2d1

package/index.mjs.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs.map
-size: 60514534 bytes
-sha256: 6d62fed172191b470261b34208f86360c80b8a32f78c70eed6c59e9b2438c6b8
+size: 60560009 bytes
+sha256: 546b08d67522478bfd946a02c4b343591c2067a4cb0579f7a0357da4f5330c9e

package/license-check.js

@@ -18,7 +18,7 @@ const licenseCheck = async () => {
       },
       body: JSON.stringify({
         package: "central-icons-react/all",
-        version: "1.1.320",
+        version: "1.1.322",
       }),
       signal: controller.signal,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-icons-react/all",
-  "version": "1.1.320",
+  "version": "1.1.322",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://iconists.co/central",
   "bugs": {

package/skills/central-icons-react-all/SKILL.md

@@ -5,7 +5,7 @@ description: Use when inserting icons in React code that imports from @central-i
 
 # Central Icons — React (all)
 
-This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.1.320). The package exposes 2096 icons across 30 variants (round/square × filled/outlined × multiple corner radii and stroke widths) through a single dynamic `CentralIcon` component.
+This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.1.322). The package exposes 2098 icons across 30 variants (round/square × filled/outlined × multiple corner radii and stroke widths) through a single dynamic `CentralIcon` component.
 
 ## Prefer a variant package when possible
 
@@ -496,6 +496,7 @@ Need the raw, unmasked shapes instead (e.g. to style individual paths)? Set `mod
 - **IconCodeMedium** — code-medium, syntax, brackets, dev
 - **IconCodeTree** — code-tree, file-tree
 - **IconCommits** — commits
+- **IconConditionalLogic** — conditional-logic, if, tree
 - **IconConsole** — console, terminal
 - **IconConsoleSimple** — console-simple
 - **IconConsoleSimple** — console-simple, terminal
@@ -1583,6 +1584,7 @@ Need the raw, unmasked shapes instead (e.g. to style individual paths)? Set `mod
 - **IconShadows** — shadows
 - **IconShareScreen** — share-screen, screen-sharing
 - **IconSplit** — split
+- **IconSpotlight.focus** — spotlight. focus, shooting, studio
 - **IconStopShareScreen** — stop-share-screen, stop-sharing
 - **IconUnblur** — unblur
 - **IconVideo** — video, camera, movie, play