@dubium/icons 0.0.1 → 0.0.2-alpha.1
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/dist/collection/index.d.ts +2 -3
- package/dist/spa/icon/Icon.js +19 -19
- package/dist/spa/icon/Icon.registry.d.ts +3 -31
- package/dist/spa/icon/Icon.registry.js +1 -1
- package/dist/spa/icon/Icon.types.d.ts +4 -12
- package/dist/spa/provider/IconProvider.context.d.ts +3 -3
- package/dist/spa/provider/IconProvider.d.ts +2 -2
- package/dist/spa/provider/IconProvider.types.d.ts +1 -1
- package/dist/ssr/icon/Icon.container.d.ts +26 -0
- package/dist/ssr/icon/Icon.container.js +23 -0
- package/dist/ssr/icon/Icon.create.d.ts +18 -39
- package/dist/ssr/icon/Icon.create.js +5 -6
- package/dist/ssr/icon/Icon.d.ts +4 -31
- package/dist/ssr/icon/Icon.js +21 -26
- package/dist/ssr/icon/Icon.registry.d.ts +8 -0
- package/dist/ssr/icon/Icon.registry.js +4 -0
- package/dist/ssr/icon/Icon.types.d.ts +47 -44
- package/dist/ssr/icon/index.d.ts +5 -4
- package/dist/ssr/index.d.ts +3 -5
- package/dist/ssr/index.js +2 -3
- package/package.json +1 -1
- package/dist/ssr/provider/IconProvider.context.d.ts +0 -7
- package/dist/ssr/provider/IconProvider.context.js +0 -5
- package/dist/ssr/provider/IconProvider.d.ts +0 -33
- package/dist/ssr/provider/IconProvider.js +0 -16
- package/dist/ssr/provider/IconProvider.types.d.ts +0 -13
- package/dist/ssr/provider/index.d.ts +0 -8
- package/dist/ssr/provider/useIconRegistry.d.ts +0 -18
- package/dist/ssr/provider/useIconRegistry.js +0 -6
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
* Экспортирует готовые компоненты иконок и связанные типы.
|
|
2
|
+
* AUTO-GENERATED by scripts/sync-icons.mjs.
|
|
3
|
+
* Do not edit manually.
|
|
5
4
|
*/
|
|
6
5
|
export type { IIconComponentProps } from "./types.js";
|
|
7
6
|
export { default as UserIcon } from "./UserIcon.js";
|
package/dist/spa/icon/Icon.js
CHANGED
|
@@ -7,56 +7,56 @@ var s = /* @__PURE__ */ new Map(), c = n(({ name: n, size: c = 24, width: l, hei
|
|
|
7
7
|
let { icons: h } = e(), g = i(() => ({
|
|
8
8
|
...t,
|
|
9
9
|
...h
|
|
10
|
-
}), [h]), [
|
|
10
|
+
}), [h]), _ = g[n], [v, y] = a(() => _ ? s.get(_) ?? null : null), [b, x] = a(!1), S = l ?? c, C = u ?? c, w = i(() => ({
|
|
11
11
|
display: "inline-flex",
|
|
12
12
|
alignItems: "center",
|
|
13
13
|
justifyContent: "center",
|
|
14
|
-
width:
|
|
15
|
-
height:
|
|
14
|
+
width: S,
|
|
15
|
+
height: C,
|
|
16
16
|
transform: `rotate(${f}deg)`
|
|
17
17
|
}), [
|
|
18
|
-
x,
|
|
19
18
|
S,
|
|
19
|
+
C,
|
|
20
20
|
f
|
|
21
21
|
]);
|
|
22
22
|
return r(() => {
|
|
23
23
|
let e = !1;
|
|
24
24
|
return (async () => {
|
|
25
|
-
let t = String(n), r =
|
|
26
|
-
if (r) {
|
|
27
|
-
|
|
25
|
+
let t = String(n), r = g[n];
|
|
26
|
+
if (!r) {
|
|
27
|
+
console.warn(`Иконка "${t}" не найдена`), y(() => null);
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
30
|
-
let i =
|
|
31
|
-
if (
|
|
32
|
-
|
|
30
|
+
let i = s.get(r);
|
|
31
|
+
if (i) {
|
|
32
|
+
y(() => i);
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
|
|
35
|
+
x(!0), y(() => null), r().then((t) => {
|
|
36
36
|
if (e) return;
|
|
37
|
-
let
|
|
38
|
-
s.set(
|
|
37
|
+
let n = t.default;
|
|
38
|
+
s.set(r, n), y(() => n);
|
|
39
39
|
}).catch((n) => {
|
|
40
|
-
e || (console.error(`Ошибка загрузки иконки "${t}":`, n),
|
|
40
|
+
e || (console.error(`Ошибка загрузки иконки "${t}":`, n), y(() => null));
|
|
41
41
|
}).finally(() => {
|
|
42
|
-
e ||
|
|
42
|
+
e || x(!1);
|
|
43
43
|
});
|
|
44
44
|
})(), () => {
|
|
45
45
|
e = !0;
|
|
46
46
|
};
|
|
47
|
-
}, [n, g]),
|
|
47
|
+
}, [n, g]), b || !v ? /* @__PURE__ */ o("div", {
|
|
48
48
|
"aria-hidden": "true",
|
|
49
49
|
role: "img",
|
|
50
50
|
style: {
|
|
51
|
-
...
|
|
51
|
+
...w,
|
|
52
52
|
visibility: "hidden"
|
|
53
53
|
}
|
|
54
54
|
}) : /* @__PURE__ */ o("div", {
|
|
55
55
|
"aria-label": m || n,
|
|
56
56
|
onClick: p,
|
|
57
57
|
role: "img",
|
|
58
|
-
style:
|
|
59
|
-
children:
|
|
58
|
+
style: w,
|
|
59
|
+
children: v ? /* @__PURE__ */ o(v, { color: d }) : null
|
|
60
60
|
});
|
|
61
61
|
});
|
|
62
62
|
c.displayName = "Icon";
|
|
@@ -1,36 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
* Каждая иконка описывается как функция-лоадер с динамическим `import()`,
|
|
5
|
-
* что позволяет:
|
|
6
|
-
* - выполнять code-splitting (tree shaking)
|
|
7
|
-
* - загружать иконки по требованию (lazy loading)
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```ts
|
|
11
|
-
* const defaultIcons = {
|
|
12
|
-
* Close: () => import("../../icons/CloseIcon"),
|
|
13
|
-
* };
|
|
14
|
-
* ```
|
|
15
|
-
*
|
|
16
|
-
* @remarks
|
|
17
|
-
* - Используется внутри компонента `Icon` как базовый источник иконок
|
|
18
|
-
* - Может быть расширен пользовательскими иконками через `IconProvider`
|
|
19
|
-
* - Не требует `IconProvider` для работы
|
|
2
|
+
* AUTO-GENERATED by scripts/sync-icons.mjs.
|
|
3
|
+
* Source of truth: src/icons/collection/*Icon.tsx.
|
|
20
4
|
*/
|
|
21
5
|
export declare const defaultIcons: {
|
|
22
|
-
readonly
|
|
6
|
+
readonly User: () => Promise<typeof import("../../collection/UserIcon.js")>;
|
|
23
7
|
};
|
|
24
|
-
/**
|
|
25
|
-
* Объединение имён всех встроенных иконок.
|
|
26
|
-
*
|
|
27
|
-
* Используется для:
|
|
28
|
-
* - типизации пропа `name` в `Icon`
|
|
29
|
-
* - автодополнения (autocomplete) для встроенных иконок
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```ts
|
|
33
|
-
* type TDefaultIconName = "Close";
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
8
|
export type TDefaultIconName = keyof typeof defaultIcons;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { ComponentType
|
|
1
|
+
import type { ComponentType } from "react";
|
|
2
|
+
import type { IIconComponentProps } from "../../collection/types.js";
|
|
2
3
|
import type { TDefaultIconName } from "./Icon.registry.js";
|
|
3
4
|
/**
|
|
4
5
|
* Тип "пустого" реестра иконок.
|
|
@@ -9,17 +10,7 @@ import type { TDefaultIconName } from "./Icon.registry.js";
|
|
|
9
10
|
* @remarks
|
|
10
11
|
* Обеспечивает корректную типизацию без ослабления type safety.
|
|
11
12
|
*/
|
|
12
|
-
export type TEmptyIconRegistry = Record<
|
|
13
|
-
/**
|
|
14
|
-
* Базовые пропсы для SVG-иконки.
|
|
15
|
-
*
|
|
16
|
-
* Расширяет стандартные SVG-атрибуты и добавляет поддержку цвета.
|
|
17
|
-
*
|
|
18
|
-
* @property color - Цвет заливки иконки (обычно прокидывается в `fill`)
|
|
19
|
-
*/
|
|
20
|
-
export interface IIconComponentProps extends SVGProps<SVGSVGElement> {
|
|
21
|
-
color?: string;
|
|
22
|
-
}
|
|
13
|
+
export type TEmptyIconRegistry = Readonly<Record<never, never>>;
|
|
23
14
|
/**
|
|
24
15
|
* Тип React-компонента иконки.
|
|
25
16
|
*
|
|
@@ -77,3 +68,4 @@ export type TIconRegistry = Readonly<Record<string, TIconLoader>>;
|
|
|
77
68
|
* ```
|
|
78
69
|
*/
|
|
79
70
|
export type TIconName<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> = Extract<keyof TCustomIcons, string> | TDefaultIconName;
|
|
71
|
+
export type { IIconComponentProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.
|
|
2
|
-
import type { IIconContextValue } from "./IconProvider.types.
|
|
1
|
+
import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.js";
|
|
2
|
+
import type { IIconContextValue } from "./IconProvider.types.js";
|
|
3
3
|
/**
|
|
4
4
|
* React-контекст для хранения реестра иконок.
|
|
5
5
|
*
|
|
@@ -10,7 +10,7 @@ import type { IIconContextValue } from "./IconProvider.types.ts";
|
|
|
10
10
|
* - Значение по умолчанию содержит пустой реестр (`icons: {}`)
|
|
11
11
|
* - Без `IconProvider` будут доступны только встроенные (`defaultIcons`) иконки
|
|
12
12
|
*/
|
|
13
|
-
export declare const IconContext: import("react").Context<IIconContextValue<Readonly<Record<string, import("../index.
|
|
13
|
+
export declare const IconContext: import("react").Context<IIconContextValue<Readonly<Record<string, import("../index.js").TIconLoader>>>>;
|
|
14
14
|
/**
|
|
15
15
|
* Хук для доступа к `IconContext` с поддержкой типизации кастомных иконок.
|
|
16
16
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.
|
|
2
|
-
import type { IIconProviderProps } from "./IconProvider.types.
|
|
1
|
+
import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.js";
|
|
2
|
+
import type { IIconProviderProps } from "./IconProvider.types.js";
|
|
3
3
|
/**
|
|
4
4
|
* Провайдер контекста UI-библиотеки (`IconProvider`).
|
|
5
5
|
*
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Свойства контейнера SSR/RSC-иконки.
|
|
4
|
+
*
|
|
5
|
+
* @property ariaLabel - Атрибут `aria-label` для доступности
|
|
6
|
+
* @property children - Дочерние элементы (SVG иконки)
|
|
7
|
+
* @property deg - Угол поворота в градусах
|
|
8
|
+
* @property height - Высота контейнера (если нужен прямоугольник)
|
|
9
|
+
* @property size - Размер контейнера (квадратный, по умолчанию 24)
|
|
10
|
+
* @property style - Инлайн-стили контейнера
|
|
11
|
+
* @property width - Ширина контейнера (если нужен прямоугольник)
|
|
12
|
+
*/
|
|
13
|
+
export interface IconContainerProps {
|
|
14
|
+
ariaLabel?: string;
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
deg?: number;
|
|
17
|
+
height?: number | string;
|
|
18
|
+
size?: number | string;
|
|
19
|
+
style?: CSSProperties;
|
|
20
|
+
width?: number | string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Общий SSR/RSC-контейнер иконки.
|
|
24
|
+
* Не использует hooks, context и client-only API.
|
|
25
|
+
*/
|
|
26
|
+
export declare const IconContainer: ({ ariaLabel, children, deg, height, size, style, width, }: IconContainerProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
//#region src/icons/ssr/icon/Icon.container.tsx
|
|
3
|
+
var t = ({ ariaLabel: t, children: n, deg: r = 0, height: i, size: a = 24, style: o, width: s }) => {
|
|
4
|
+
let c = {
|
|
5
|
+
display: "inline-flex",
|
|
6
|
+
alignItems: "center",
|
|
7
|
+
justifyContent: "center",
|
|
8
|
+
flex: "0 0 auto",
|
|
9
|
+
width: s ?? a,
|
|
10
|
+
height: i ?? a,
|
|
11
|
+
transform: `rotate(${r}deg)`,
|
|
12
|
+
...o
|
|
13
|
+
};
|
|
14
|
+
return /* @__PURE__ */ e("span", {
|
|
15
|
+
"aria-hidden": !t || void 0,
|
|
16
|
+
"aria-label": t,
|
|
17
|
+
role: t ? "img" : void 0,
|
|
18
|
+
style: c,
|
|
19
|
+
children: n
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { t as IconContainer };
|
|
@@ -1,56 +1,35 @@
|
|
|
1
1
|
import type { IconProps, TIconRegistry } from "./Icon.types.js";
|
|
2
2
|
/**
|
|
3
|
-
* Создаёт
|
|
4
|
-
*
|
|
3
|
+
* Создаёт Server Component с именами встроенной npm-коллекции и
|
|
4
|
+
* дополнительными иконками конкретного проекта.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* @returns Компонент иконки с типобезопасным пропом `name`,
|
|
9
|
-
* включающим все иконки из переданного реестра.
|
|
6
|
+
* Registry захватывается обычным замыканием: React Context и `use client`
|
|
7
|
+
* для SSR/RSC не нужны.
|
|
10
8
|
*
|
|
11
9
|
* @example
|
|
12
10
|
* ```tsx
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* Settings: SettingsIcon,
|
|
16
|
-
* });
|
|
11
|
+
* import BrandIcon from "./BrandIcon"
|
|
12
|
+
* import { createIcon, defineIcons } from "@dubium/icons/ssr"
|
|
17
13
|
*
|
|
18
|
-
* const
|
|
14
|
+
* const projectIcons = defineIcons({ Brand: BrandIcon })
|
|
15
|
+
* export const AppIcon = createIcon(projectIcons)
|
|
19
16
|
*
|
|
20
|
-
* <
|
|
21
|
-
*
|
|
22
|
-
* <AppIcon name="Wrong" /> // ❌ ошибка TypeScript
|
|
23
|
-
* </IconProvider>
|
|
17
|
+
* <AppIcon name="User" />
|
|
18
|
+
* <AppIcon name="Brand" />
|
|
24
19
|
* ```
|
|
25
|
-
*
|
|
26
|
-
* @remarks
|
|
27
|
-
* - В отличие от SPA-версии, иконки передаются синхронно (без `import()`)
|
|
28
|
-
* - Требует использования `IconProvider` для передачи реестра иконок в runtime
|
|
29
20
|
*/
|
|
30
|
-
export declare const createIcon: <
|
|
31
|
-
(props: IconProps<
|
|
21
|
+
export declare const createIcon: <const TCustomIcons extends TIconRegistry>(icons: TCustomIcons) => {
|
|
22
|
+
(props: IconProps<TCustomIcons>): Promise<import("react").JSX.Element | null>;
|
|
32
23
|
displayName: string;
|
|
33
24
|
};
|
|
34
25
|
/**
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
* Используется вместе с `createIcon`, чтобы TypeScript сохранил
|
|
38
|
-
* конкретные имена иконок в типе вместо общего `string`.
|
|
39
|
-
*
|
|
40
|
-
* @typeParam TIcons - Реестр иконок (выводится автоматически)
|
|
26
|
+
* Сохраняет literal-ключи пользовательского registry.
|
|
41
27
|
*
|
|
42
|
-
*
|
|
28
|
+
* Позволяет передать реестр иконок без потери точности типов
|
|
29
|
+
* (`const`-type parameters сохраняют строковые литералы ключей).
|
|
43
30
|
*
|
|
44
|
-
* @
|
|
45
|
-
*
|
|
46
|
-
* @
|
|
47
|
-
* ```ts
|
|
48
|
-
* const appIcons = defineIcons({
|
|
49
|
-
* User: UserIcon,
|
|
50
|
-
* Close: CloseIcon,
|
|
51
|
-
* });
|
|
52
|
-
*
|
|
53
|
-
* // typeof appIcons → { User: typeof UserIcon; Close: typeof CloseIcon }
|
|
54
|
-
* ```
|
|
31
|
+
* @typeParam TIcons - Тип реестра пользовательских иконок
|
|
32
|
+
* @param icons - Реестр иконок проекта.
|
|
33
|
+
* @returns Тот же реестр иконок с сохранёнными literal-типами.
|
|
55
34
|
*/
|
|
56
35
|
export declare const defineIcons: <const TIcons extends TIconRegistry>(icons: TIcons) => TIcons;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx as t } from "react/jsx-runtime";
|
|
1
|
+
import { renderIconWithRegistry as e } from "./Icon.js";
|
|
3
2
|
//#region src/icons/ssr/icon/Icon.create.tsx
|
|
4
|
-
var
|
|
5
|
-
let n = (n) =>
|
|
3
|
+
var t = (t) => {
|
|
4
|
+
let n = (n) => e(n, t);
|
|
6
5
|
return n.displayName = "SSRIcon", n;
|
|
7
|
-
},
|
|
6
|
+
}, n = (e) => e;
|
|
8
7
|
//#endregion
|
|
9
|
-
export {
|
|
8
|
+
export { t as createIcon, n as defineIcons };
|
package/dist/ssr/icon/Icon.d.ts
CHANGED
|
@@ -1,33 +1,6 @@
|
|
|
1
|
-
import type { IconProps
|
|
1
|
+
import type { IconProps } from "./Icon.types.js";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* Иконка загружается синхронно из реестра, переданного через `IconProvider`,
|
|
6
|
-
* без динамических импортов, что корректно работает на сервере.
|
|
7
|
-
*
|
|
8
|
-
* @typeParam TIcons - Тип реестра иконок
|
|
9
|
-
*
|
|
10
|
-
* @param props - Свойства компонента иконки
|
|
11
|
-
* @param props.name - Имя иконки для отображения
|
|
12
|
-
* @param props.size - Размер иконки в пикселях (по умолчанию 24)
|
|
13
|
-
* @param props.width - Ширина иконки (если нужен прямоугольник)
|
|
14
|
-
* @param props.height - Высота иконки (если нужен прямоугольник)
|
|
15
|
-
* @param props.color - Цвет иконки (по умолчанию "currentColor")
|
|
16
|
-
* @param props.deg - Угол поворота иконки в градусах (по умолчанию 0)
|
|
17
|
-
* @param props.onClick - Обработчик клика по иконке
|
|
18
|
-
* @param props.ariaLabel - Атрибут `aria-label` для доступности
|
|
19
|
-
* @param props.style - Дополнительные CSS-стили контейнера
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* ```tsx
|
|
23
|
-
* <Icon name="Arrow" size={32} color="blue" deg={90} />
|
|
24
|
-
* ```
|
|
25
|
-
*
|
|
26
|
-
* @remarks
|
|
27
|
-
* - Если иконка не найдена в реестре, выводится предупреждение и `null`
|
|
28
|
-
* - Контейнер рендерится как `<span>` с `inline-flex` для центрирования
|
|
29
|
-
* - При указании `ariaLabel` контейнер становится видимым для скринридера (`role="img"`)
|
|
30
|
-
*
|
|
31
|
-
* @returns React-элемент иконки
|
|
3
|
+
* Server Component для встроенной npm-коллекции.
|
|
4
|
+
* Не использует hooks/context и не требует `use client`.
|
|
32
5
|
*/
|
|
33
|
-
export declare const Icon:
|
|
6
|
+
export declare const Icon: (props: IconProps) => Promise<import("react").JSX.Element | null>;
|
package/dist/ssr/icon/Icon.js
CHANGED
|
@@ -1,31 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { defaultIcons as e } from "./Icon.registry.js";
|
|
2
|
+
import { IconContainer as t } from "./Icon.container.js";
|
|
3
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
3
4
|
//#region src/icons/ssr/icon/Icon.tsx
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
height:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"aria-hidden": !l || void 0,
|
|
19
|
-
"aria-label": l,
|
|
20
|
-
onClick: c,
|
|
21
|
-
role: l ? "img" : void 0,
|
|
22
|
-
style: f,
|
|
23
|
-
children: /* @__PURE__ */ t(d, {
|
|
5
|
+
var r = (e, t) => Object.prototype.hasOwnProperty.call(e, t), i = async (t) => {
|
|
6
|
+
if (!r(e, t)) return null;
|
|
7
|
+
let n = e[t];
|
|
8
|
+
return (await n()).default;
|
|
9
|
+
}, a = async (e, a) => {
|
|
10
|
+
let { name: o, size: s = 24, width: c, height: l, color: u = "currentColor", deg: d = 0, ariaLabel: f, style: p } = e, m = String(o), h = (a && r(a, m) ? a[m] : void 0) ?? await i(m);
|
|
11
|
+
return h ? /* @__PURE__ */ n(t, {
|
|
12
|
+
ariaLabel: f,
|
|
13
|
+
deg: d,
|
|
14
|
+
height: l,
|
|
15
|
+
size: s,
|
|
16
|
+
style: p,
|
|
17
|
+
width: c,
|
|
18
|
+
children: /* @__PURE__ */ n(h, {
|
|
24
19
|
"aria-hidden": "true",
|
|
25
|
-
color:
|
|
20
|
+
color: u,
|
|
26
21
|
focusable: "false"
|
|
27
22
|
})
|
|
28
|
-
});
|
|
29
|
-
};
|
|
23
|
+
}) : (console.warn(`Иконка "${m}" не найдена`), null);
|
|
24
|
+
}, o = (e) => a(e), s = a;
|
|
30
25
|
//#endregion
|
|
31
|
-
export {
|
|
26
|
+
export { o as Icon, s as renderIconWithRegistry };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AUTO-GENERATED by scripts/sync-icons.mjs.
|
|
3
|
+
* Source of truth: src/icons/collection/*Icon.tsx.
|
|
4
|
+
*/
|
|
5
|
+
export declare const defaultIcons: {
|
|
6
|
+
readonly User: () => Promise<typeof import("../../collection/UserIcon.js")>;
|
|
7
|
+
};
|
|
8
|
+
export type TDefaultIconName = keyof typeof defaultIcons;
|
|
@@ -1,58 +1,64 @@
|
|
|
1
|
-
import type { ComponentType, CSSProperties
|
|
1
|
+
import type { ComponentType, CSSProperties } from "react";
|
|
2
|
+
import type { IIconComponentProps } from "../../collection/types.js";
|
|
3
|
+
import type { TDefaultIconName } from "./Icon.registry.js";
|
|
2
4
|
/**
|
|
3
|
-
*
|
|
5
|
+
* React-компонент SVG-иконки.
|
|
4
6
|
*
|
|
5
|
-
*
|
|
7
|
+
* Принимает пропсы {@link IIconComponentProps} для настройки атрибутов и цвета.
|
|
8
|
+
*/
|
|
9
|
+
export type TIcon = ComponentType<IIconComponentProps>;
|
|
10
|
+
/**
|
|
11
|
+
* Модуль отдельной иконки, загружаемый сервером.
|
|
6
12
|
*
|
|
7
|
-
* @property
|
|
13
|
+
* @property default - React-компонент иконки
|
|
8
14
|
*/
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
}
|
|
15
|
+
export type TIconModule = {
|
|
16
|
+
default: TIcon;
|
|
17
|
+
};
|
|
12
18
|
/**
|
|
13
|
-
*
|
|
19
|
+
* Lazy loader встроенной иконки.
|
|
20
|
+
*
|
|
21
|
+
* Выполняет асинхронную загрузку модуля иконки через динамический `import()`.
|
|
14
22
|
*
|
|
15
|
-
*
|
|
16
|
-
* принимающим `IIconComponentProps`.
|
|
23
|
+
* @returns Промис с модулем иконки
|
|
17
24
|
*/
|
|
18
|
-
export type
|
|
25
|
+
export type TIconLoader = () => Promise<TIconModule>;
|
|
19
26
|
/**
|
|
20
|
-
* Реестр
|
|
27
|
+
* Реестр lazy loader-ов, генерируемый из npm-коллекции.
|
|
21
28
|
*
|
|
22
|
-
*
|
|
23
|
-
|
|
29
|
+
* Ключ — имя иконки, значение — функция её асинхронной загрузки.
|
|
30
|
+
*/
|
|
31
|
+
export type TIconLoaderRegistry = Readonly<Record<string, TIconLoader>>;
|
|
32
|
+
/**
|
|
33
|
+
* Синхронный реестр пользовательских иконок проекта.
|
|
24
34
|
*
|
|
25
|
-
*
|
|
26
|
-
* ```ts
|
|
27
|
-
* const icons: TIconRegistry = {
|
|
28
|
-
* Close: CloseIcon,
|
|
29
|
-
* User: UserIcon,
|
|
30
|
-
* };
|
|
31
|
-
* ```
|
|
35
|
+
* Ключ — имя иконки, значение — готовый React-компонент без ленивой загрузки.
|
|
32
36
|
*/
|
|
33
37
|
export type TIconRegistry = Readonly<Record<string, TIcon>>;
|
|
34
38
|
/**
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
* Ограничивает проп `name` в `Icon` строго ключами переданного реестра.
|
|
39
|
+
* Пустой registry без расширения `keyof` до `string`.
|
|
38
40
|
*
|
|
39
|
-
*
|
|
41
|
+
* Используется как значение по умолчанию в generic-параметрах для сохранения
|
|
42
|
+
* строгой типизации.
|
|
43
|
+
*/
|
|
44
|
+
export type TEmptyIconRegistry = Readonly<Record<never, never>>;
|
|
45
|
+
/**
|
|
46
|
+
* Встроенные npm-иконки + иконки, добавленные через `createIcon()`.
|
|
40
47
|
*
|
|
41
|
-
* @
|
|
42
|
-
* ```ts
|
|
43
|
-
* type Name = TIconName<typeof appIcons>;
|
|
44
|
-
* // "Close" | "User"
|
|
45
|
-
* ```
|
|
48
|
+
* @typeParam TCustomIcons - Реестр пользовательских иконок проекта
|
|
46
49
|
*/
|
|
47
|
-
export type TIconName<
|
|
50
|
+
export type TIconName<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> = TDefaultIconName | Extract<keyof TCustomIcons, string>;
|
|
48
51
|
/**
|
|
49
|
-
*
|
|
52
|
+
* Props SSR/RSC-компонента иконки.
|
|
50
53
|
*
|
|
51
|
-
*
|
|
54
|
+
* Интерактивные handlers намеренно отсутствуют, так как серверные
|
|
55
|
+
* компоненты не обрабатывают события на клиенте.
|
|
56
|
+
*
|
|
57
|
+
* @typeParam TCustomIcons - Реестр пользовательских иконок проекта
|
|
52
58
|
*/
|
|
53
|
-
export interface IconProps<
|
|
59
|
+
export interface IconProps<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> {
|
|
54
60
|
/**
|
|
55
|
-
* Атрибут aria-label
|
|
61
|
+
* Атрибут `aria-label` для доступности
|
|
56
62
|
*/
|
|
57
63
|
ariaLabel?: string;
|
|
58
64
|
/**
|
|
@@ -64,27 +70,24 @@ export interface IconProps<TIcons extends TIconRegistry = TIconRegistry> {
|
|
|
64
70
|
*/
|
|
65
71
|
deg?: number;
|
|
66
72
|
/**
|
|
67
|
-
* Высота (если нужен прямоугольник)
|
|
73
|
+
* Высота иконки (если нужен прямоугольник)
|
|
68
74
|
*/
|
|
69
75
|
height?: number | string;
|
|
70
76
|
/**
|
|
71
77
|
* Имя иконки
|
|
72
78
|
*/
|
|
73
|
-
name: TIconName<
|
|
74
|
-
/**
|
|
75
|
-
* Обработчик клика по контейнеру иконки
|
|
76
|
-
*/
|
|
77
|
-
onClick?: MouseEventHandler<HTMLSpanElement>;
|
|
79
|
+
name: TIconName<TCustomIcons>;
|
|
78
80
|
/**
|
|
79
|
-
*
|
|
81
|
+
* Размер иконки (квадратный, по умолчанию 24)
|
|
80
82
|
*/
|
|
81
83
|
size?: number | string;
|
|
82
84
|
/**
|
|
83
|
-
*
|
|
85
|
+
* Инлайн-стили контейнера
|
|
84
86
|
*/
|
|
85
87
|
style?: CSSProperties;
|
|
86
88
|
/**
|
|
87
|
-
* Ширина (если нужен прямоугольник)
|
|
89
|
+
* Ширина иконки (если нужен прямоугольник)
|
|
88
90
|
*/
|
|
89
91
|
width?: number | string;
|
|
90
92
|
}
|
|
93
|
+
export type { IIconComponentProps };
|
package/dist/ssr/icon/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Публичный API модуля иконок для
|
|
2
|
+
* Публичный API модуля иконок для SSR/RSC.
|
|
3
3
|
*
|
|
4
|
-
* Экспортирует компонент `Icon`,
|
|
5
|
-
* и связанные
|
|
4
|
+
* Экспортирует компонент `Icon`, контейнер `IconContainer`, фабрику `createIcon`
|
|
5
|
+
* и связанные типы для серверного рендеринга без React Context и `use client`.
|
|
6
6
|
*/
|
|
7
7
|
export { Icon } from "./Icon.js";
|
|
8
|
+
export { IconContainer, type IconContainerProps } from "./Icon.container.js";
|
|
8
9
|
export { createIcon, defineIcons } from "./Icon.create.js";
|
|
9
|
-
export type { IIconComponentProps, TIcon,
|
|
10
|
+
export type { IconProps, IIconComponentProps, TEmptyIconRegistry, TIcon, TIconLoader, TIconLoaderRegistry, TIconModule, TIconName, TIconRegistry, } from "./Icon.types.js";
|
package/dist/ssr/index.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* React Server Components / SSR API.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* без динамических импортов.
|
|
4
|
+
* Здесь намеренно нет React Context, hooks и `use client` boundary.
|
|
6
5
|
*/
|
|
7
|
-
export { Icon, createIcon, defineIcons, type IconProps, type IIconComponentProps, type TIcon, type TIconName, type TIconRegistry, } from "./icon/index.js";
|
|
8
|
-
export { IconProvider, useIconRegistry, type IIconProviderProps } from "./provider/index.js";
|
|
6
|
+
export { Icon, IconContainer, createIcon, defineIcons, type IconContainerProps, type IconProps, type IIconComponentProps, type TEmptyIconRegistry, type TIcon, type TIconLoader, type TIconLoaderRegistry, type TIconModule, type TIconName, type TIconRegistry, } from "./icon/index.js";
|
package/dist/ssr/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IconContainer as e } from "./icon/Icon.container.js";
|
|
2
2
|
import { Icon as t } from "./icon/Icon.js";
|
|
3
3
|
import { createIcon as n, defineIcons as r } from "./icon/Icon.create.js";
|
|
4
|
-
|
|
5
|
-
export { t as Icon, i as IconProvider, n as createIcon, r as defineIcons, e as useIconRegistry };
|
|
4
|
+
export { t as Icon, e as IconContainer, n as createIcon, r as defineIcons };
|
package/package.json
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* React-контекст для хранения реестра иконок при серверном рендеринге (SSR).
|
|
3
|
-
*
|
|
4
|
-
* Значение по умолчанию — пустой реестр. Фактический реестр иконок
|
|
5
|
-
* передаётся через `IconProvider`.
|
|
6
|
-
*/
|
|
7
|
-
export declare const IconRegistryContext: import("react").Context<Readonly<Record<string, import("../index.js").TIcon>>>;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { TIconRegistry } from "../icon/Icon.types.js";
|
|
2
|
-
import type { IIconProviderProps } from "./IconProvider.types.js";
|
|
3
|
-
/**
|
|
4
|
-
* Провайдер реестра иконок для серверного рендеринга (SSR).
|
|
5
|
-
*
|
|
6
|
-
* Передаёт реестр синхронных иконок вниз по дереву компонентов
|
|
7
|
-
* через `IconRegistryContext`, объединяя его с родительским реестром.
|
|
8
|
-
*
|
|
9
|
-
* @typeParam TIcons - Тип реестра иконок
|
|
10
|
-
*
|
|
11
|
-
* @param props - Свойства провайдера
|
|
12
|
-
* @param props.children - Дочерние React-элементы
|
|
13
|
-
* @param props.icons - Реестр иконок (синхронные React-компоненты)
|
|
14
|
-
*
|
|
15
|
-
* @returns Провайдер контекста с доступом к иконкам
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* const appIcons = defineIcons({
|
|
20
|
-
* User: UserIcon,
|
|
21
|
-
* });
|
|
22
|
-
*
|
|
23
|
-
* <IconProvider icons={appIcons}>
|
|
24
|
-
* <App />
|
|
25
|
-
* </IconProvider>
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* @remarks
|
|
29
|
-
* - Позволяет вкладывать провайдеры: дочерний реестр наследует родительский
|
|
30
|
-
* - При совпадении имён иконки дочернего провайдера переопределяют родительские
|
|
31
|
-
* - Использует `useMemo` для предотвращения лишних перерисовок
|
|
32
|
-
*/
|
|
33
|
-
export declare const IconProvider: <TIcons extends TIconRegistry>({ children, icons }: IIconProviderProps<TIcons>) => import("react").JSX.Element;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { IconRegistryContext as e } from "./IconProvider.context.js";
|
|
2
|
-
import { useContext as t, useMemo as n } from "react";
|
|
3
|
-
import { jsx as r } from "react/jsx-runtime";
|
|
4
|
-
//#region src/icons/ssr/provider/IconProvider.tsx
|
|
5
|
-
var i = ({ children: i, icons: a }) => {
|
|
6
|
-
let o = t(e), s = n(() => ({
|
|
7
|
-
...o,
|
|
8
|
-
...a
|
|
9
|
-
}), [o, a]);
|
|
10
|
-
return /* @__PURE__ */ r(e, {
|
|
11
|
-
value: s,
|
|
12
|
-
children: i
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
//#endregion
|
|
16
|
-
export { i as IconProvider };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
import type { TIconRegistry } from "../icon/Icon.types.js";
|
|
3
|
-
/**
|
|
4
|
-
* Свойства компонента `IconProvider` для серверного рендеринга (SSR).
|
|
5
|
-
*
|
|
6
|
-
* @template TIcons - Тип реестра иконок
|
|
7
|
-
*/
|
|
8
|
-
export interface IIconProviderProps<TIcons extends TIconRegistry = TIconRegistry> {
|
|
9
|
-
/** Дочерние React-элементы, которые получат доступ к реестру иконок */
|
|
10
|
-
children: ReactNode;
|
|
11
|
-
/** Реестр иконок (синхронные React-компоненты) */
|
|
12
|
-
icons: TIcons;
|
|
13
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Публичный API модуля провайдера иконок для серверного рендеринга (SSR).
|
|
3
|
-
*
|
|
4
|
-
* Экспортирует `IconProvider`, хук `useIconRegistry` и связанные типы.
|
|
5
|
-
*/
|
|
6
|
-
export { IconProvider } from "./IconProvider.js";
|
|
7
|
-
export { useIconRegistry } from "./useIconRegistry.js";
|
|
8
|
-
export type { IIconProviderProps } from "./IconProvider.types.js";
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { TIconRegistry } from "../icon/Icon.types.js";
|
|
2
|
-
/**
|
|
3
|
-
* Хук для доступа к реестру иконок при серверном рендеринге (SSR).
|
|
4
|
-
*
|
|
5
|
-
* Возвращает текущий реестр иконок из `IconRegistryContext`.
|
|
6
|
-
*
|
|
7
|
-
* @returns Реестр иконок, переданный через `IconProvider`
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```ts
|
|
11
|
-
* const registry = useIconRegistry();
|
|
12
|
-
* ```
|
|
13
|
-
*
|
|
14
|
-
* @remarks
|
|
15
|
-
* - Без `IconProvider` вернёт пустой реестр `{}`
|
|
16
|
-
* - Используется внутри компонента `Icon` для поиска иконки по имени
|
|
17
|
-
*/
|
|
18
|
-
export declare const useIconRegistry: () => TIconRegistry;
|