@central-icons-react/all 1.1.326 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CentralIconBase/index.d.ts +5 -1
- package/CentralIconBase/index.js +14 -6
- package/CentralIconBase/index.js.map +1 -1
- package/README.md +42 -12
- package/icons/index.d.ts +31 -2
- package/icons/index.js +2 -2
- package/icons/index.js.map +2 -2
- package/icons/index.mjs +2 -2
- package/icons/index.mjs.map +2 -2
- package/icons-index.json +8 -2
- package/index.d.ts +46 -17
- package/index.js +2 -2
- package/index.js.map +2 -2
- package/index.mjs +2 -2
- package/index.mjs.map +2 -2
- package/license-check.js +1 -1
- package/package.json +3 -3
- package/scopeSvgIds.d.ts +2 -0
- package/scopeSvgIds.js +20 -0
- package/scopeSvgIds.js.map +1 -0
- package/skills/central-icons-react-all/SKILL.md +4 -1
|
@@ -8,6 +8,10 @@ export type CentralIconBaseProps = {
|
|
|
8
8
|
} & SVGProps<SVGSVGElement>;
|
|
9
9
|
type Props = CentralIconBaseProps & {
|
|
10
10
|
ariaLabel?: string;
|
|
11
|
+
/** Internal generated shapes that contain instance-scoped SVG references. */
|
|
12
|
+
renderShapes?: (instanceId: string) => React.ReactNode;
|
|
11
13
|
};
|
|
12
|
-
export declare const CentralIconBase: React.
|
|
14
|
+
export declare const CentralIconBase: React.ForwardRefExoticComponent<
|
|
15
|
+
Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>
|
|
16
|
+
>;
|
|
13
17
|
export {};
|
package/CentralIconBase/index.js
CHANGED
|
@@ -21,16 +21,24 @@ const LegacyCentralIconBase = typeof React.useId === "function"
|
|
|
21
21
|
return (React.createElement(CentralIconSvg, { ...this.props.iconProps, instanceId: this.state.instanceId }));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
export const CentralIconBase = (props) => LegacyCentralIconBase ? (React.createElement(LegacyCentralIconBase, { iconProps: props })) : (React.createElement(ModernCentralIconBase, { ...props }));
|
|
25
|
-
|
|
24
|
+
export const CentralIconBase = React.forwardRef((props, ref) => LegacyCentralIconBase ? (React.createElement(LegacyCentralIconBase, { iconProps: { ...props, svgRef: ref } })) : (React.createElement(ModernCentralIconBase, { ...props, svgRef: ref })));
|
|
25
|
+
CentralIconBase.displayName = "CentralIconBase";
|
|
26
|
+
const CentralIconSvg = ({ children, size = 24, ariaLabel, color, ariaHidden, "aria-hidden": ariaHiddenAttribute, "aria-label": ariaLabelAttribute, role, svgRef, renderShapes, style, mode = "masked", maskId, instanceId, ...props }) => {
|
|
27
|
+
var _a, _b;
|
|
26
28
|
const uniqueMaskId = instanceId ? `${maskId}-${instanceId}` : maskId;
|
|
27
29
|
const masked = mode !== "raw" && !!maskId;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
const hidden = (_a = ariaHiddenAttribute !== null && ariaHiddenAttribute !== void 0 ? ariaHiddenAttribute : ariaHidden) !== null && _a !== void 0 ? _a : true;
|
|
31
|
+
const isHidden = hidden === true || hidden === "true";
|
|
32
|
+
const label = ariaLabelAttribute !== null && ariaLabelAttribute !== void 0 ? ariaLabelAttribute : ariaLabel;
|
|
33
|
+
const shapes = renderShapes
|
|
34
|
+
? renderShapes((_b = uniqueMaskId !== null && uniqueMaskId !== void 0 ? uniqueMaskId : instanceId) !== null && _b !== void 0 ? _b : "icon")
|
|
35
|
+
: children;
|
|
36
|
+
return (React.createElement("svg", { ...props, ref: svgRef, "aria-hidden": hidden, "aria-label": ariaLabelAttribute, role: role !== null && role !== void 0 ? role : (isHidden ? 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 } },
|
|
37
|
+
label && !isHidden && React.createElement("title", null, label),
|
|
30
38
|
masked ? (React.createElement(React.Fragment, null,
|
|
31
39
|
React.createElement("mask", { id: uniqueMaskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
|
|
32
40
|
React.createElement("rect", { width: "24", height: "24", fill: "#000" }),
|
|
33
|
-
React.createElement("g", { fill: "none", style: { color: "#fff" } },
|
|
34
|
-
React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${uniqueMaskId})` }))) : (
|
|
41
|
+
React.createElement("g", { fill: "none", style: { color: "#fff" } }, shapes)),
|
|
42
|
+
React.createElement("rect", { width: "24", height: "24", fill: "currentColor", mask: `url(#${uniqueMaskId})` }))) : (shapes)));
|
|
35
43
|
};
|
|
36
44
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/CentralIconBase/index.tsx"],"names":[],"mappings":"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"}
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @central-icons-react/all
|
|
2
2
|
|
|
3
3
|
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.
|
|
4
|
-
The collection contains
|
|
4
|
+
The collection contains 2103 icons with 30 variants in total.
|
|
5
5
|
|
|
6
6
|
## Table of Contents
|
|
7
7
|
|
|
@@ -35,7 +35,7 @@ pnpm add @central-icons-react/all
|
|
|
35
35
|
|
|
36
36
|
## Requirements
|
|
37
37
|
|
|
38
|
-
- React
|
|
38
|
+
- React 16.6 through 19 (React 16.6 introduced the `memo` API used by these icons)
|
|
39
39
|
- Valid license key (set as environment variable)
|
|
40
40
|
|
|
41
41
|
## Usage
|
|
@@ -79,16 +79,21 @@ import { CentralIcon } from "@central-icons-react/all";
|
|
|
79
79
|
function MyComponent() {
|
|
80
80
|
return (
|
|
81
81
|
<CentralIcon
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
name="
|
|
82
|
+
join="round" // round | square
|
|
83
|
+
fill="filled" // filled | outlined
|
|
84
|
+
stroke="1" // 1 | 1.5 | 2
|
|
85
|
+
radius="1" // 0 | 1 | 2 | 3
|
|
86
|
+
name="IconHome"
|
|
87
87
|
/>
|
|
88
88
|
);
|
|
89
89
|
}
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
+
Square styles only support `radius="0"`; round styles support `"0"` through
|
|
93
|
+
`"3"`. TypeScript checks this relationship. Unavailable variants passed at runtime
|
|
94
|
+
(for example from a JavaScript style picker) render nothing and emit a development
|
|
95
|
+
warning identifying the requested variant.
|
|
96
|
+
|
|
92
97
|
## Using transparent colors
|
|
93
98
|
|
|
94
99
|
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.
|
|
@@ -117,16 +122,38 @@ All icons accept the following properties:
|
|
|
117
122
|
| `size` | `number \| string` | `24` | Sets both width and height of the icon |
|
|
118
123
|
| `color` | `string` | `currentColor` | Sets the icon color |
|
|
119
124
|
| `ariaHidden` | `boolean` | `true` | Controls icon accessibility attributes |
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
125
|
+
| `join` | `"round" \| "square"` | Required | Controls the icon's corner style |
|
|
126
|
+
| `fill` | `"filled" \| "outlined"` | Required | Sets the icon's fill style |
|
|
127
|
+
| `stroke` | `"1" \| "1.5" \| "2"` | Required | Controls the stroke width |
|
|
128
|
+
| `radius` | `"0" \| "1" \| "2" \| "3"` | Required | Sets the corner radius |
|
|
124
129
|
| `name` | `string` | none | Defines which icon should be used - see [Icons List](#icons) |
|
|
125
130
|
|
|
126
131
|
Additionally, all standard SVG and HTML attributes are supported.
|
|
127
132
|
|
|
128
133
|
## Accessibility
|
|
129
134
|
|
|
135
|
+
Icons are decorative (`aria-hidden="true"`) by default. Use `aria-hidden={false}`
|
|
136
|
+
(or the existing `ariaHidden={false}` alias) for a meaningful icon. The standard
|
|
137
|
+
`aria-hidden` attribute takes precedence when both are supplied. An explicit
|
|
138
|
+
`aria-label` also takes precedence over the generated title. Label an enclosing
|
|
139
|
+
button or link when the icon is part of that control.
|
|
140
|
+
|
|
141
|
+
SVG refs are forwarded to the root `<svg>` on all supported React versions:
|
|
142
|
+
|
|
143
|
+
```jsx
|
|
144
|
+
const iconRef = React.createRef();
|
|
145
|
+
<CentralIcon
|
|
146
|
+
ref={iconRef}
|
|
147
|
+
name="IconHome"
|
|
148
|
+
join="round"
|
|
149
|
+
fill="outlined"
|
|
150
|
+
radius="0"
|
|
151
|
+
stroke="1"
|
|
152
|
+
aria-hidden={false}
|
|
153
|
+
aria-label="Home"
|
|
154
|
+
/>;
|
|
155
|
+
```
|
|
156
|
+
|
|
130
157
|
Icons are aria-hidden by default for decorative purposes. When using icons that convey meaning, you should disable aria-hidden:
|
|
131
158
|
|
|
132
159
|
```jsx
|
|
@@ -136,7 +163,7 @@ Icons are aria-hidden by default for decorative purposes. When using icons that
|
|
|
136
163
|
// Meaningful icon
|
|
137
164
|
<IconHome
|
|
138
165
|
ariaHidden={false}
|
|
139
|
-
|
|
166
|
+
aria-label="Go to home page" // overrides the generated accessible label
|
|
140
167
|
/> // Will be announced by screen readers
|
|
141
168
|
```
|
|
142
169
|
|
|
@@ -586,8 +613,10 @@ Below is a complete list of available icons:
|
|
|
586
613
|
- IconBookSimple
|
|
587
614
|
- IconBubble2
|
|
588
615
|
- IconBubble3
|
|
616
|
+
- IconBubble3Plus
|
|
589
617
|
- IconBubble4
|
|
590
618
|
- IconBubble5
|
|
619
|
+
- IconBubble5Plus
|
|
591
620
|
- IconBubble6
|
|
592
621
|
- IconBubbleAlert
|
|
593
622
|
- IconBubbleAnnotation2
|
|
@@ -615,6 +644,7 @@ Below is a complete list of available icons:
|
|
|
615
644
|
- IconCallIncoming
|
|
616
645
|
- IconCallOutgoing
|
|
617
646
|
- IconChatBubble7
|
|
647
|
+
- IconChatBubble7Plus
|
|
618
648
|
- IconChatBubbles
|
|
619
649
|
- IconEmail1
|
|
620
650
|
- IconEmail2
|
package/icons/index.d.ts
CHANGED
|
@@ -2159,6 +2159,21 @@ export declare const centralIconsMetadata: {
|
|
|
2159
2159
|
readonly category: "Communication";
|
|
2160
2160
|
readonly createdAt: "2026-07-09T11:02:33.605815+00:00";
|
|
2161
2161
|
};
|
|
2162
|
+
readonly IconBubble3Plus: {
|
|
2163
|
+
readonly title: "bubble-3-plus, message, chat";
|
|
2164
|
+
readonly category: "Communication";
|
|
2165
|
+
readonly createdAt: "2026-10-02T07:02:04.708924+00:00";
|
|
2166
|
+
};
|
|
2167
|
+
readonly IconBubble5Plus: {
|
|
2168
|
+
readonly title: "bubble-5-plus, message, chat";
|
|
2169
|
+
readonly category: "Communication";
|
|
2170
|
+
readonly createdAt: "2026-10-02T07:02:04.708924+00:00";
|
|
2171
|
+
};
|
|
2172
|
+
readonly IconChatBubble7Plus: {
|
|
2173
|
+
readonly title: "chat-bubble-7-plus, message, chat";
|
|
2174
|
+
readonly category: "Communication";
|
|
2175
|
+
readonly createdAt: "2026-10-02T07:02:04.708924+00:00";
|
|
2176
|
+
};
|
|
2162
2177
|
readonly IconBitcoin: {
|
|
2163
2178
|
readonly title: "bitcoin";
|
|
2164
2179
|
readonly category: "Crypto";
|
|
@@ -10507,14 +10522,28 @@ export type CentralIconJoin = "round" | "square";
|
|
|
10507
10522
|
export type CentralIconFill = "filled" | "outlined";
|
|
10508
10523
|
export type CentralIconRadius = "0" | "1" | "2" | "3";
|
|
10509
10524
|
export type CentralIconStroke = "1" | "1.5" | "2";
|
|
10525
|
+
export type CentralIconStyle = {
|
|
10526
|
+
fill: CentralIconFill;
|
|
10527
|
+
stroke: CentralIconStroke;
|
|
10528
|
+
} & (
|
|
10529
|
+
| {
|
|
10530
|
+
join: "round";
|
|
10531
|
+
radius: CentralIconRadius;
|
|
10532
|
+
}
|
|
10533
|
+
| {
|
|
10534
|
+
join: "square";
|
|
10535
|
+
radius: "0";
|
|
10536
|
+
}
|
|
10537
|
+
);
|
|
10510
10538
|
export type CentralIconPackageName =
|
|
10511
|
-
|
|
10539
|
+
| `round-${CentralIconFill}-radius-${CentralIconRadius}-stroke-${CentralIconStroke}`
|
|
10540
|
+
| `square-${CentralIconFill}-radius-0-stroke-${CentralIconStroke}`;
|
|
10512
10541
|
/**
|
|
10513
10542
|
* Key of a single icon variant, e.g. `round-filled-radius-0-stroke-1/IconHome`.
|
|
10514
10543
|
*
|
|
10515
10544
|
* The name part is deliberately `string` and not `CentralIconName`: TypeScript
|
|
10516
10545
|
* refuses to build a template literal union with 100,000 or more members
|
|
10517
|
-
* (TS2590), and the cross product
|
|
10546
|
+
* (TS2590), and the cross product grows with variants times every icon name.
|
|
10518
10547
|
* That limit was reached at 2084 icons. The variant prefix is still checked;
|
|
10519
10548
|
* use `CentralIconName` to validate an icon name.
|
|
10520
10549
|
*/
|
package/icons/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/icons/index.js
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 55859445 bytes
|
|
4
|
+
sha256: 02280abb8fb7f33816f637e703a9c1fd8931a97c49259fbb854cb6953b99cc2f
|
package/icons/index.js.map
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/icons/index.js.map
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 60697666 bytes
|
|
4
|
+
sha256: a4ef9d8829c5115d2f8890df5b20f5da966c3e7a542da54a2cf4d716c494cf7d
|
package/icons/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/icons/index.mjs
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 55858934 bytes
|
|
4
|
+
sha256: 5eb9aec581f73903a96312d070dbbc3730258415bd6790103b6669ae6c467b07
|
package/icons/index.mjs.map
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/icons/index.mjs.map
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 60697543 bytes
|
|
4
|
+
sha256: 34a4be0d0c9d434f5dabdfefd4f0a7b3b8b041b6cd84979b0da8038de1a6a545
|
package/icons-index.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"withProps": "<IconHome size={32} color=\"#007AFF\" />",
|
|
12
12
|
"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/>"
|
|
13
13
|
},
|
|
14
|
-
"totalIcons":
|
|
14
|
+
"totalIcons": 2103,
|
|
15
15
|
"categories": {
|
|
16
16
|
"AI & Magic": {
|
|
17
17
|
"count": 90,
|
|
@@ -422,15 +422,17 @@
|
|
|
422
422
|
]
|
|
423
423
|
},
|
|
424
424
|
"Communication": {
|
|
425
|
-
"count":
|
|
425
|
+
"count": 63,
|
|
426
426
|
"icons": [
|
|
427
427
|
"IconBook",
|
|
428
428
|
"IconBookHeart",
|
|
429
429
|
"IconBookSimple",
|
|
430
430
|
"IconBubble2",
|
|
431
431
|
"IconBubble3",
|
|
432
|
+
"IconBubble3Plus",
|
|
432
433
|
"IconBubble4",
|
|
433
434
|
"IconBubble5",
|
|
435
|
+
"IconBubble5Plus",
|
|
434
436
|
"IconBubble6",
|
|
435
437
|
"IconBubbleAlert",
|
|
436
438
|
"IconBubbleAnnotation2",
|
|
@@ -458,6 +460,7 @@
|
|
|
458
460
|
"IconCallIncoming",
|
|
459
461
|
"IconCallOutgoing",
|
|
460
462
|
"IconChatBubble7",
|
|
463
|
+
"IconChatBubble7Plus",
|
|
461
464
|
"IconChatBubbles",
|
|
462
465
|
"IconEmail1",
|
|
463
466
|
"IconEmail2",
|
|
@@ -2748,6 +2751,9 @@
|
|
|
2748
2751
|
"IconEmail2Check": "email-2-check, valid",
|
|
2749
2752
|
"IconEmail2Unread": "email-2-unread",
|
|
2750
2753
|
"IconBookHeart": "book-heart, daily, diary",
|
|
2754
|
+
"IconBubble3Plus": "bubble-3-plus, message, chat",
|
|
2755
|
+
"IconBubble5Plus": "bubble-5-plus, message, chat",
|
|
2756
|
+
"IconChatBubble7Plus": "chat-bubble-7-plus, message, chat",
|
|
2751
2757
|
"IconBitcoin": "bitcoin",
|
|
2752
2758
|
"IconEthereum": "ethereum",
|
|
2753
2759
|
"IconCryptoCoin": "crypto-coin",
|
package/index.d.ts
CHANGED
|
@@ -1,19 +1,48 @@
|
|
|
1
1
|
import { type CentralIconBaseProps } from "./CentralIconBase";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
2
|
+
import { type CentralIconName, type CentralIconStyle } from "./icons";
|
|
3
|
+
import React from "react";
|
|
4
|
+
export { type CentralIconBaseProps, type CentralIconStyle };
|
|
5
|
+
export type CentralIconProps = CentralIconBaseProps &
|
|
6
|
+
CentralIconStyle & {
|
|
7
|
+
name: CentralIconName;
|
|
8
|
+
};
|
|
9
|
+
export declare const CentralIcon: React.NamedExoticComponent<
|
|
10
|
+
(
|
|
11
|
+
| Omit<
|
|
12
|
+
{
|
|
13
|
+
size?: string | number;
|
|
14
|
+
ariaHidden?: boolean;
|
|
15
|
+
mode?: "masked" | "raw";
|
|
16
|
+
maskId?: string;
|
|
17
|
+
} & React.SVGProps<SVGSVGElement> & {
|
|
18
|
+
fill: import("./icons").CentralIconFill;
|
|
19
|
+
stroke: import("./icons").CentralIconStroke;
|
|
20
|
+
} & {
|
|
21
|
+
join: "round";
|
|
22
|
+
radius: import("./icons").CentralIconRadius;
|
|
23
|
+
} & {
|
|
24
|
+
name: CentralIconName;
|
|
25
|
+
},
|
|
26
|
+
"ref"
|
|
27
|
+
>
|
|
28
|
+
| Omit<
|
|
29
|
+
{
|
|
30
|
+
size?: string | number;
|
|
31
|
+
ariaHidden?: boolean;
|
|
32
|
+
mode?: "masked" | "raw";
|
|
33
|
+
maskId?: string;
|
|
34
|
+
} & React.SVGProps<SVGSVGElement> & {
|
|
35
|
+
fill: import("./icons").CentralIconFill;
|
|
36
|
+
stroke: import("./icons").CentralIconStroke;
|
|
37
|
+
} & {
|
|
38
|
+
join: "square";
|
|
39
|
+
radius: "0";
|
|
40
|
+
} & {
|
|
41
|
+
name: CentralIconName;
|
|
42
|
+
},
|
|
43
|
+
"ref"
|
|
44
|
+
>
|
|
45
|
+
) &
|
|
46
|
+
React.RefAttributes<SVGSVGElement>
|
|
47
|
+
>;
|
|
19
48
|
export default CentralIcon;
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/index.js
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 55862193 bytes
|
|
4
|
+
sha256: 0033353bc9d47c8661c4824f02c9bd49362f587e981d38fc9f936acdb622dc41
|
package/index.js.map
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/index.js.map
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 60708161 bytes
|
|
4
|
+
sha256: 01f67102a14571dcf2499f30a188afbc4b184f0591c5d6dda6c3f9c83606fac6
|
package/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/index.mjs
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 55861378 bytes
|
|
4
|
+
sha256: cf7776cbe2841fb4cfd0bb6b1acb45a564c584ef42f87473059bde1e8bea51e6
|
package/index.mjs.map
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
[diffend] Oversized file quarantined before diffing.
|
|
2
2
|
name: package/index.mjs.map
|
|
3
|
-
size:
|
|
4
|
-
sha256:
|
|
3
|
+
size: 60707896 bytes
|
|
4
|
+
sha256: 40dbd07c93f64ebb9005d59ab1c079b7a3794a3bebd78f2ff3c3209d9350bad6
|
package/license-check.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@central-icons-react/all",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
5
5
|
"homepage": "https://iconists.co/central",
|
|
6
6
|
"bugs": {
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"lint": "prettier --write ."
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"react": ">=
|
|
44
|
+
"react": ">=16.6.0 <20"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@types/node": "^24",
|
|
48
|
-
"@types/react": "
|
|
48
|
+
"@types/react": "^19",
|
|
49
49
|
"tsup": "^8",
|
|
50
50
|
"typescript": "^5",
|
|
51
51
|
"prettier": "^3"
|
package/scopeSvgIds.d.ts
ADDED
package/scopeSvgIds.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/** Scope local SVG definitions and their references without changing external URLs. */
|
|
2
|
+
export function scopeSvgIds(svg, instanceId) {
|
|
3
|
+
const ids = new Set([...svg.matchAll(/\bid=["']([^"']+)["']/g)].map((match) => match[1]));
|
|
4
|
+
if (!ids.size)
|
|
5
|
+
return svg;
|
|
6
|
+
const suffix = instanceId.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
|
|
7
|
+
return svg.replace(/([\w:-]+)=(["'])(.*?)\2/g, (attribute, name, quote, value) => {
|
|
8
|
+
let scoped = value;
|
|
9
|
+
if (name === "id" && ids.has(value))
|
|
10
|
+
scoped = `${value}-${suffix}`;
|
|
11
|
+
else if ((name === "href" || name === "xlink:href") &&
|
|
12
|
+
value.startsWith("#") &&
|
|
13
|
+
ids.has(value.slice(1)))
|
|
14
|
+
scoped = `${value}-${suffix}`;
|
|
15
|
+
else
|
|
16
|
+
scoped = value.replace(/url\(#([^)]+)\)/g, (reference, id) => ids.has(id) ? `url(#${id}-${suffix})` : reference);
|
|
17
|
+
return `${name}=${quote}${scoped}${quote}`;
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=scopeSvgIds.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scopeSvgIds.js","sourceRoot":"","sources":["src/scopeSvgIds.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,UAAkB;IACzD,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrE,CAAC;IACF,IAAI,CAAC,GAAG,CAAC,IAAI;QAAE,OAAO,GAAG,CAAC;IAC1B,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAC/B,UAAU,EACV,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CACrC,CAAC;IACF,OAAO,GAAG,CAAC,OAAO,CAChB,0BAA0B,EAC1B,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAa,EAAE,EAAE;QACxC,IAAI,MAAM,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,GAAG,GAAG,KAAK,IAAI,MAAM,EAAE,CAAC;aAC9D,IACH,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,YAAY,CAAC;YAC1C,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YACrB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAEvB,MAAM,GAAG,GAAG,KAAK,IAAI,MAAM,EAAE,CAAC;;YAE9B,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAC3D,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAClD,CAAC;QACJ,OAAO,GAAG,IAAI,IAAI,KAAK,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC;IAC7C,CAAC,CACF,CAAC;AACJ,CAAC"}
|
|
@@ -5,7 +5,7 @@ description: Use when inserting icons in React code that imports from @central-i
|
|
|
5
5
|
|
|
6
6
|
# Central Icons — React (all)
|
|
7
7
|
|
|
8
|
-
This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.
|
|
8
|
+
This skill helps you find and insert icons from the `@central-icons-react/all` package (version 1.2.2). The package exposes 2103 icons across 30 variants (round/square × filled/outlined × multiple corner radii and stroke widths) through a single dynamic `CentralIcon` component.
|
|
9
9
|
|
|
10
10
|
## Prefer a variant package when possible
|
|
11
11
|
|
|
@@ -536,8 +536,10 @@ Need the raw, unmasked shapes instead (e.g. to style individual paths)? Set `mod
|
|
|
536
536
|
- **IconBookSimple** — book-simple, guide, info, faq
|
|
537
537
|
- **IconBubble2** — bubble-2, message, chat
|
|
538
538
|
- **IconBubble3** — bubble-3, message, chat
|
|
539
|
+
- **IconBubble3Plus** — bubble-3-plus, message, chat
|
|
539
540
|
- **IconBubble4** — bubble-4, message, chat
|
|
540
541
|
- **IconBubble5** — bubble-5, message, chat
|
|
542
|
+
- **IconBubble5Plus** — bubble-5-plus, message, chat
|
|
541
543
|
- **IconBubble6** — bubble-6, message, chat
|
|
542
544
|
- **IconBubbleAlert** — bubble-alert, comment, feedback
|
|
543
545
|
- **IconBubbleAnnotation2** — bubble-annotation-2, message, chat
|
|
@@ -565,6 +567,7 @@ Need the raw, unmasked shapes instead (e.g. to style individual paths)? Set `mod
|
|
|
565
567
|
- **IconCallIncoming** — call-incoming, phone
|
|
566
568
|
- **IconCallOutgoing** — call-outgoing, phone
|
|
567
569
|
- **IconChatBubble7** — chat-bubble-7
|
|
570
|
+
- **IconChatBubble7Plus** — chat-bubble-7-plus, message, chat
|
|
568
571
|
- **IconChatBubbles** — chat-bubbles
|
|
569
572
|
- **IconEmail1** — email-1, envelope
|
|
570
573
|
- **IconEmail2** — email-2, envelope
|