@central-icons-react/all 1.1.319 → 1.1.321

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 2095 icons with 30 variants in total.
+The collection contains 2096 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
@@ -1620,6 +1622,7 @@ Below is a complete list of available icons:
 - IconNoiseReduction
 - IconPictureInPicture
 - IconRear
+- IconReferenceImage
 - IconRemoveBackground
 - IconRemoveBackground2
 - IconRetouch

package/icons/index.d.ts

@@ -6874,6 +6874,11 @@ export declare const centralIconsMetadata: {
     readonly category: "Photography & Video";
     readonly createdAt: "2026-06-03T11:25:30.634924+00:00";
   };
+  readonly IconReferenceImage: {
+    readonly title: "reference-image, verified-photo, proof, aperture";
+    readonly category: "Photography & Video";
+    readonly createdAt: "2026-09-16T07:02:05.063116+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: 55637973 bytes
-sha256: 358e2fcc64285c6a74c9c22661a4caddf93005e663060d4e013357b9af876020
+size: 55684269 bytes
+sha256: 755a8fadb3cf5c11edcc28758d3cb35070ae59f792d1db88213dfcc98c055e8c

package/icons/index.js.map

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

package/icons/index.mjs

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

package/icons/index.mjs.map

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

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": 2095,
+  "totalIcons": 2096,
   "categories": {
   "AI & Magic": {
     "count": 90,
@@ -1436,7 +1436,7 @@
     ]
   },
   "Photography & Video": {
-    "count": 87,
+    "count": 88,
     "icons": [
       "Icon4k",
       "IconAddImage",
@@ -1503,6 +1503,7 @@
       "IconNoiseReduction",
       "IconPictureInPicture",
       "IconRear",
+      "IconReferenceImage",
       "IconRemoveBackground",
       "IconRemoveBackground2",
       "IconRetouch",
@@ -3685,6 +3686,7 @@
   "IconVideo2": "video-2, camera, movie, play",
   "IconVideo2Off": "video-2-off, cam-off, movie, play",
   "IconStopShareScreen": "stop-share-screen, stop-sharing",
+  "IconReferenceImage": "reference-image, verified-photo, proof, aperture",
   "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: 55639262 bytes
-sha256: 2d7ac05a688793a3d705ef33c3b32136ec2ba1ebe49edf4eeb5dcc031d2b1491
+size: 55686045 bytes
+sha256: 1265ed65119f351d1050f1122995e7f9afb3c3443199a1f2c73ff7a9d27184df

package/index.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.js.map
-size: 60463457 bytes
-sha256: 5b08e5cafb21e5ff76f168e91999dbf2a15595171798650b6d18374788ea597d
+size: 60516395 bytes
+sha256: 02001f4a8da5f58d95fb4ba1248a0caa846b827582eaa15511167a1c02e9bc7e

package/index.mjs

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs
-size: 55638545 bytes
-sha256: 153698f198106c3ebd4845e1edf8311b1c683c1035b4f3128e4254e390d2e36f
+size: 55685272 bytes
+sha256: f69f670164f0c78a4e59bfa5a0bd39f55c503b168524b5a9b33b666eeccc0755

package/index.mjs.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/index.mjs.map
-size: 60463275 bytes
-sha256: f22052fb0d03f189dc17616a4a584950ddafe2245841d39db07a94e72f5c8536
+size: 60516183 bytes
+sha256: 1ad522994107122a85fb3553dc1192b7cd5313c41171cf1c2245cec435e9a764

package/license-check.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-icons-react/all",
-  "version": "1.1.319",
+  "version": "1.1.321",
   "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.319). The package exposes 2095 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.321). The package exposes 2096 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
 
@@ -1575,6 +1575,7 @@ Need the raw, unmasked shapes instead (e.g. to style individual paths)? Set `mod
 - **IconNoiseReduction** — noise-reduction
 - **IconPictureInPicture** — picture-in-picture
 - **IconRear** — rear, front-back, change-cam, lens
+- **IconReferenceImage** — reference-image, verified-photo, proof, aperture
 - **IconRemoveBackground** — remove-background
 - **IconRemoveBackground2** — remove-background-2
 - **IconRetouch** — retouch, face, hair