@nice2dev/icons 1.0.4 → 1.0.6
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/cjs/NiceDesktopIconExporter.js +648 -0
- package/dist/cjs/NiceDesktopIconExporter.js.map +1 -0
- package/dist/cjs/NiceFaviconGenerator.js +429 -0
- package/dist/cjs/NiceFaviconGenerator.js.map +1 -0
- package/dist/cjs/NiceIconEditor.js +443 -0
- package/dist/cjs/NiceIconEditor.js.map +1 -0
- package/dist/cjs/NiceIconPreview.js +198 -0
- package/dist/cjs/NiceIconPreview.js.map +1 -0
- package/dist/cjs/NiceIconSetCreator.js +565 -0
- package/dist/cjs/NiceIconSetCreator.js.map +1 -0
- package/dist/cjs/_virtual/_commonjsHelpers.js +8 -0
- package/dist/cjs/_virtual/_commonjsHelpers.js.map +1 -0
- package/dist/cjs/_virtual/client.js +33 -0
- package/dist/cjs/_virtual/client.js.map +1 -0
- package/dist/cjs/_virtual/client2.js +6 -0
- package/dist/cjs/_virtual/client2.js.map +1 -0
- package/dist/cjs/advancedIconSearch.js +548 -0
- package/dist/cjs/advancedIconSearch.js.map +1 -0
- package/dist/cjs/iconAnalytics.js +395 -152
- package/dist/cjs/iconAnalytics.js.map +1 -1
- package/dist/cjs/index.js +42 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/node_modules/react-dom/client.js +39 -0
- package/dist/cjs/node_modules/react-dom/client.js.map +1 -0
- package/dist/esm/NiceDesktopIconExporter.js +642 -0
- package/dist/esm/NiceDesktopIconExporter.js.map +1 -0
- package/dist/esm/NiceFaviconGenerator.js +426 -0
- package/dist/esm/NiceFaviconGenerator.js.map +1 -0
- package/dist/esm/NiceIconEditor.js +440 -0
- package/dist/esm/NiceIconEditor.js.map +1 -0
- package/dist/esm/NiceIconPreview.js +196 -0
- package/dist/esm/NiceIconPreview.js.map +1 -0
- package/dist/esm/NiceIconSetCreator.js +562 -0
- package/dist/esm/NiceIconSetCreator.js.map +1 -0
- package/dist/esm/_virtual/_commonjsHelpers.js +6 -0
- package/dist/esm/_virtual/_commonjsHelpers.js.map +1 -0
- package/dist/esm/_virtual/client.js +28 -0
- package/dist/esm/_virtual/client.js.map +1 -0
- package/dist/esm/_virtual/client2.js +4 -0
- package/dist/esm/_virtual/client2.js.map +1 -0
- package/dist/esm/advancedIconSearch.js +529 -0
- package/dist/esm/advancedIconSearch.js.map +1 -0
- package/dist/esm/iconAnalytics.js +393 -152
- package/dist/esm/iconAnalytics.js.map +1 -1
- package/dist/esm/index.js +7 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/node_modules/react-dom/client.js +37 -0
- package/dist/esm/node_modules/react-dom/client.js.map +1 -0
- package/dist/types/NiceDesktopIconExporter.d.ts +119 -0
- package/dist/types/NiceFaviconGenerator.d.ts +64 -0
- package/dist/types/NiceIconEditor.d.ts +97 -0
- package/dist/types/NiceIconPreview.d.ts +47 -0
- package/dist/types/NiceIconSetCreator.d.ts +97 -0
- package/dist/types/advancedIconSearch.d.ts +218 -0
- package/dist/types/iconAnalytics.d.ts +219 -112
- package/dist/types/index.d.ts +18 -6
- package/package.json +2 -2
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { __exports as client } from '../../_virtual/client2.js';
|
|
2
|
+
import require$$0 from 'react-dom';
|
|
3
|
+
|
|
4
|
+
var hasRequiredClient;
|
|
5
|
+
|
|
6
|
+
function requireClient () {
|
|
7
|
+
if (hasRequiredClient) return client;
|
|
8
|
+
hasRequiredClient = 1;
|
|
9
|
+
|
|
10
|
+
var m = require$$0;
|
|
11
|
+
if (process.env.NODE_ENV === 'production') {
|
|
12
|
+
client.createRoot = m.createRoot;
|
|
13
|
+
client.hydrateRoot = m.hydrateRoot;
|
|
14
|
+
} else {
|
|
15
|
+
var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
16
|
+
client.createRoot = function(c, o) {
|
|
17
|
+
i.usingClientEntryPoint = true;
|
|
18
|
+
try {
|
|
19
|
+
return m.createRoot(c, o);
|
|
20
|
+
} finally {
|
|
21
|
+
i.usingClientEntryPoint = false;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
client.hydrateRoot = function(c, h, o) {
|
|
25
|
+
i.usingClientEntryPoint = true;
|
|
26
|
+
try {
|
|
27
|
+
return m.hydrateRoot(c, h, o);
|
|
28
|
+
} finally {
|
|
29
|
+
i.usingClientEntryPoint = false;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
return client;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export { requireClient as __require };
|
|
37
|
+
//# sourceMappingURL=client.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"client.js","sources":["../../../../../../node_modules/react-dom/client.js"],"sourcesContent":["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n exports.createRoot = m.createRoot;\n exports.hydrateRoot = m.hydrateRoot;\n} else {\n var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n exports.createRoot = function(c, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.createRoot(c, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n exports.hydrateRoot = function(c, h, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.hydrateRoot(c, h, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n}\n"],"names":[],"mappings":";;;;;;;;;CAEA,IAAI,CAAC,GAAG,UAAoB;AAC5B,CAAA,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;AAC3C,GAAE,MAAA,CAAA,UAAkB,GAAG,CAAC,CAAC,UAAU;AACnC,GAAE,MAAA,CAAA,WAAmB,GAAG,CAAC,CAAC,WAAW;AACrC,CAAA,CAAC,MAAM;AACP,GAAE,IAAI,CAAC,GAAG,CAAC,CAAC,kDAAkD;AAC9D,GAAE,iBAAkB,GAAG,SAAS,CAAC,EAAE,CAAC,EAAE;AACtC,KAAI,CAAC,CAAC,qBAAqB,GAAG,IAAI;AAClC,KAAI,IAAI;OACF,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/B,KAAA,CAAK,SAAS;AACd,OAAM,CAAC,CAAC,qBAAqB,GAAG,KAAK;AACrC,KAAA;GACA,CAAG;GACD,MAAA,CAAA,WAAmB,GAAG,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1C,KAAI,CAAC,CAAC,qBAAqB,GAAG,IAAI;AAClC,KAAI,IAAI;OACF,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnC,KAAA,CAAK,SAAS;AACd,OAAM,CAAC,CAAC,qBAAqB,GAAG,KAAK;AACrC,KAAA;GACA,CAAG;AACH,CAAA;;;;;;","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file NiceDesktopIconExporter.tsx
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.1 — Desktop Icon Exporter
|
|
5
|
+
*
|
|
6
|
+
* Comprehensive desktop icon export utility with:
|
|
7
|
+
* - Multiple sizes (16, 24, 32, 48, 64, 128, 256, 512)
|
|
8
|
+
* - High-DPI / Retina variants (@2x, @3x)
|
|
9
|
+
* - Windows .ico export (multi-resolution ICO)
|
|
10
|
+
* - macOS .icns export
|
|
11
|
+
* - Linux PNG set export (hicolor theme)
|
|
12
|
+
* - ZIP package download
|
|
13
|
+
*/
|
|
14
|
+
import React, { type ComponentType } from 'react';
|
|
15
|
+
import type { NtdIconProps } from './types';
|
|
16
|
+
export interface DesktopIconSize {
|
|
17
|
+
size: number;
|
|
18
|
+
label: string;
|
|
19
|
+
platforms: ('windows' | 'macos' | 'linux')[];
|
|
20
|
+
}
|
|
21
|
+
export interface RetinaVariant {
|
|
22
|
+
scale: number;
|
|
23
|
+
suffix: string;
|
|
24
|
+
}
|
|
25
|
+
export interface ExportedIcon {
|
|
26
|
+
filename: string;
|
|
27
|
+
size: number;
|
|
28
|
+
scale: number;
|
|
29
|
+
platform: string;
|
|
30
|
+
dataUrl: string;
|
|
31
|
+
blob?: Blob;
|
|
32
|
+
}
|
|
33
|
+
export interface IconExportConfig {
|
|
34
|
+
/** App/icon name for filenames */
|
|
35
|
+
name: string;
|
|
36
|
+
/** Include Windows ICO format */
|
|
37
|
+
includeWindows: boolean;
|
|
38
|
+
/** Include macOS ICNS format */
|
|
39
|
+
includeMacOS: boolean;
|
|
40
|
+
/** Include Linux PNG sets */
|
|
41
|
+
includeLinux: boolean;
|
|
42
|
+
/** Include Retina/HiDPI variants */
|
|
43
|
+
includeRetina: boolean;
|
|
44
|
+
/** Background color (transparent if not set) */
|
|
45
|
+
backgroundColor?: string;
|
|
46
|
+
/** Padding around icon (0-0.5, percentage of size) */
|
|
47
|
+
padding: number;
|
|
48
|
+
/** Icon fill color */
|
|
49
|
+
fillColor: string;
|
|
50
|
+
/** Export sizes to include */
|
|
51
|
+
sizes: number[];
|
|
52
|
+
}
|
|
53
|
+
export interface UseDesktopIconExporterReturn {
|
|
54
|
+
config: IconExportConfig;
|
|
55
|
+
setConfig: React.Dispatch<React.SetStateAction<IconExportConfig>>;
|
|
56
|
+
icons: ExportedIcon[];
|
|
57
|
+
isExporting: boolean;
|
|
58
|
+
progress: number;
|
|
59
|
+
exportAll: () => Promise<void>;
|
|
60
|
+
exportWindows: () => Promise<string>;
|
|
61
|
+
exportMacOS: () => Promise<string>;
|
|
62
|
+
exportLinux: () => Promise<ExportedIcon[]>;
|
|
63
|
+
downloadAll: () => Promise<void>;
|
|
64
|
+
downloadSingle: (icon: ExportedIcon) => void;
|
|
65
|
+
}
|
|
66
|
+
/** Standard desktop icon sizes used across platforms */
|
|
67
|
+
export declare const DESKTOP_ICON_SIZES: DesktopIconSize[];
|
|
68
|
+
/** Retina/HiDPI scale factors */
|
|
69
|
+
export declare const RETINA_VARIANTS: RetinaVariant[];
|
|
70
|
+
/** Linux hicolor theme icon directories */
|
|
71
|
+
export declare const LINUX_HICOLOR_DIRS: {
|
|
72
|
+
size: number;
|
|
73
|
+
dir: string;
|
|
74
|
+
}[];
|
|
75
|
+
/**
|
|
76
|
+
* Hook for exporting desktop icons in multiple formats and sizes.
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* ```tsx
|
|
80
|
+
* const { exportAll, downloadAll, icons, isExporting } = useDesktopIconExporter(MyIcon);
|
|
81
|
+
*
|
|
82
|
+
* // Export all icons
|
|
83
|
+
* await exportAll();
|
|
84
|
+
*
|
|
85
|
+
* // Download as ZIP
|
|
86
|
+
* await downloadAll();
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
export declare function useDesktopIconExporter(icon: ComponentType<NtdIconProps>, initialConfig?: Partial<IconExportConfig>): UseDesktopIconExporterReturn;
|
|
90
|
+
export interface NiceDesktopIconExporterProps {
|
|
91
|
+
/** Icon component to export */
|
|
92
|
+
icon: ComponentType<NtdIconProps>;
|
|
93
|
+
/** Initial configuration */
|
|
94
|
+
initialConfig?: Partial<IconExportConfig>;
|
|
95
|
+
/** Callback when icons are exported */
|
|
96
|
+
onExport?: (icons: ExportedIcon[]) => void;
|
|
97
|
+
/** Custom class name */
|
|
98
|
+
className?: string;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Desktop icon exporter component with UI for configuring and downloading icons.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```tsx
|
|
105
|
+
* import { NiceDesktopIconExporter } from '@nice2dev/icons';
|
|
106
|
+
* import { NtdRocket } from '@nice2dev/icons/paths';
|
|
107
|
+
*
|
|
108
|
+
* function App() {
|
|
109
|
+
* return (
|
|
110
|
+
* <NiceDesktopIconExporter
|
|
111
|
+
* icon={NtdRocket}
|
|
112
|
+
* initialConfig={{ name: 'my-app', fillColor: '#ff6b35' }}
|
|
113
|
+
* />
|
|
114
|
+
* );
|
|
115
|
+
* }
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
export declare const NiceDesktopIconExporter: React.FC<NiceDesktopIconExporterProps>;
|
|
119
|
+
export default NiceDesktopIconExporter;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file NiceFaviconGenerator.tsx
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.4 — Favicon Generator Component
|
|
5
|
+
*
|
|
6
|
+
* Advanced favicon generator with:
|
|
7
|
+
* - All standard sizes (16, 32, 48, 180, 192, 512)
|
|
8
|
+
* - manifest.json generation
|
|
9
|
+
* - Apple touch icon support
|
|
10
|
+
* - Windows tile support
|
|
11
|
+
*/
|
|
12
|
+
import React, { type ComponentType } from 'react';
|
|
13
|
+
import type { NtdIconProps } from './types';
|
|
14
|
+
export interface FaviconSize {
|
|
15
|
+
name: string;
|
|
16
|
+
size: number;
|
|
17
|
+
purpose: string;
|
|
18
|
+
format: 'png' | 'ico' | 'svg';
|
|
19
|
+
}
|
|
20
|
+
export interface ManifestConfig {
|
|
21
|
+
name: string;
|
|
22
|
+
shortName: string;
|
|
23
|
+
description?: string;
|
|
24
|
+
themeColor: string;
|
|
25
|
+
backgroundColor: string;
|
|
26
|
+
display: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';
|
|
27
|
+
startUrl: string;
|
|
28
|
+
}
|
|
29
|
+
export interface GeneratedAsset {
|
|
30
|
+
filename: string;
|
|
31
|
+
size: number;
|
|
32
|
+
purpose: string;
|
|
33
|
+
dataUrl: string;
|
|
34
|
+
blob?: Blob;
|
|
35
|
+
}
|
|
36
|
+
export interface NiceFaviconGeneratorProps {
|
|
37
|
+
/** Icon component to convert */
|
|
38
|
+
icon: ComponentType<NtdIconProps>;
|
|
39
|
+
/** Icon fill color */
|
|
40
|
+
fill?: string;
|
|
41
|
+
/** Initial manifest config */
|
|
42
|
+
manifestConfig?: Partial<ManifestConfig>;
|
|
43
|
+
/** Callback when assets generated */
|
|
44
|
+
onGenerate?: (assets: GeneratedAsset[], manifest: string) => void;
|
|
45
|
+
/** Custom class */
|
|
46
|
+
className?: string;
|
|
47
|
+
}
|
|
48
|
+
export interface UseFaviconGeneratorReturn {
|
|
49
|
+
config: ManifestConfig;
|
|
50
|
+
setConfig: React.Dispatch<React.SetStateAction<ManifestConfig>>;
|
|
51
|
+
assets: GeneratedAsset[];
|
|
52
|
+
isGenerating: boolean;
|
|
53
|
+
generate: () => Promise<void>;
|
|
54
|
+
downloadAll: () => void;
|
|
55
|
+
downloadSingle: (asset: GeneratedAsset) => void;
|
|
56
|
+
getManifestJson: () => string;
|
|
57
|
+
getHtmlTags: () => string;
|
|
58
|
+
}
|
|
59
|
+
export declare function useFaviconGenerator(icon: ComponentType<NtdIconProps>, fill?: string, initialConfig?: Partial<ManifestConfig>): UseFaviconGeneratorReturn;
|
|
60
|
+
/**
|
|
61
|
+
* Favicon generator component for creating all favicon variants.
|
|
62
|
+
*/
|
|
63
|
+
export declare function NiceFaviconGenerator({ icon, fill, manifestConfig, onGenerate, className, }: NiceFaviconGeneratorProps): React.ReactElement;
|
|
64
|
+
export default NiceFaviconGenerator;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file NiceIconEditor.tsx
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.4 — Icon Editor Component
|
|
5
|
+
*
|
|
6
|
+
* Simple editor for modifying existing icons:
|
|
7
|
+
* - Change colors (fill, stroke)
|
|
8
|
+
* - Combine icons (badge/overlay)
|
|
9
|
+
* - Scale / transform
|
|
10
|
+
* - Export to multiple formats
|
|
11
|
+
*/
|
|
12
|
+
import React, { type ComponentType } from 'react';
|
|
13
|
+
import type { NtdIconProps } from './types';
|
|
14
|
+
export interface IconEditorState {
|
|
15
|
+
/** Primary fill color */
|
|
16
|
+
fill: string;
|
|
17
|
+
/** Stroke color */
|
|
18
|
+
stroke: string;
|
|
19
|
+
/** Stroke width */
|
|
20
|
+
strokeWidth: number;
|
|
21
|
+
/** Size in pixels */
|
|
22
|
+
size: number;
|
|
23
|
+
/** Rotation in degrees */
|
|
24
|
+
rotation: number;
|
|
25
|
+
/** Horizontal flip */
|
|
26
|
+
flipX: boolean;
|
|
27
|
+
/** Vertical flip */
|
|
28
|
+
flipY: boolean;
|
|
29
|
+
/** Opacity (0-1) */
|
|
30
|
+
opacity: number;
|
|
31
|
+
/** Badge/overlay icon */
|
|
32
|
+
badge?: {
|
|
33
|
+
icon: ComponentType<NtdIconProps>;
|
|
34
|
+
position: BadgePosition;
|
|
35
|
+
size: number;
|
|
36
|
+
fill: string;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
40
|
+
export type ExportFormat = 'svg' | 'png' | 'ico' | 'base64' | 'react';
|
|
41
|
+
export interface ExportOptions {
|
|
42
|
+
format: ExportFormat;
|
|
43
|
+
size?: number;
|
|
44
|
+
backgroundColor?: string;
|
|
45
|
+
padding?: number;
|
|
46
|
+
}
|
|
47
|
+
export interface NiceIconEditorProps {
|
|
48
|
+
/** Icon to edit */
|
|
49
|
+
icon: ComponentType<NtdIconProps>;
|
|
50
|
+
/** Icon name */
|
|
51
|
+
iconName?: string;
|
|
52
|
+
/** Initial editor state */
|
|
53
|
+
defaultState?: Partial<IconEditorState>;
|
|
54
|
+
/** Called when state changes */
|
|
55
|
+
onChange?: (state: IconEditorState) => void;
|
|
56
|
+
/** Called on export */
|
|
57
|
+
onExport?: (data: string, format: ExportFormat) => void;
|
|
58
|
+
/** Available badges */
|
|
59
|
+
badges?: {
|
|
60
|
+
icon: ComponentType<NtdIconProps>;
|
|
61
|
+
name: string;
|
|
62
|
+
}[];
|
|
63
|
+
/** Custom color presets */
|
|
64
|
+
colorPresets?: string[];
|
|
65
|
+
/** Custom size presets */
|
|
66
|
+
sizePresets?: number[];
|
|
67
|
+
/** Show advanced controls */
|
|
68
|
+
showAdvanced?: boolean;
|
|
69
|
+
/** Custom class */
|
|
70
|
+
className?: string;
|
|
71
|
+
}
|
|
72
|
+
export interface UseIconEditorOptions {
|
|
73
|
+
defaultState?: Partial<IconEditorState>;
|
|
74
|
+
onChange?: (state: IconEditorState) => void;
|
|
75
|
+
}
|
|
76
|
+
export interface UseIconEditorReturn {
|
|
77
|
+
state: IconEditorState;
|
|
78
|
+
setFill: (color: string) => void;
|
|
79
|
+
setStroke: (color: string) => void;
|
|
80
|
+
setStrokeWidth: (width: number) => void;
|
|
81
|
+
setSize: (size: number) => void;
|
|
82
|
+
setRotation: (degrees: number) => void;
|
|
83
|
+
setFlipX: (flip: boolean) => void;
|
|
84
|
+
setFlipY: (flip: boolean) => void;
|
|
85
|
+
setOpacity: (opacity: number) => void;
|
|
86
|
+
setBadge: (badge: IconEditorState['badge']) => void;
|
|
87
|
+
reset: () => void;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Hook for managing icon editor state.
|
|
91
|
+
*/
|
|
92
|
+
export declare function useIconEditor(options?: UseIconEditorOptions): UseIconEditorReturn;
|
|
93
|
+
/**
|
|
94
|
+
* Icon editor component for modifying and exporting icons.
|
|
95
|
+
*/
|
|
96
|
+
export declare function NiceIconEditor({ icon: Icon, iconName, defaultState, onChange, onExport, badges, colorPresets, sizePresets, showAdvanced, className, }: NiceIconEditorProps): React.ReactElement;
|
|
97
|
+
export default NiceIconEditor;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file NiceIconPreview.tsx
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.4 — Icon Preview Component
|
|
5
|
+
*
|
|
6
|
+
* Advanced icon preview with:
|
|
7
|
+
* - Grid view
|
|
8
|
+
* - Dark/light mode preview
|
|
9
|
+
* - Size comparison
|
|
10
|
+
* - Animation preview
|
|
11
|
+
*/
|
|
12
|
+
import React, { type ComponentType } from 'react';
|
|
13
|
+
import type { NtdIconProps } from './types';
|
|
14
|
+
export type PreviewMode = 'light' | 'dark' | 'both' | 'gradient';
|
|
15
|
+
export type PreviewLayout = 'grid' | 'list' | 'comparison';
|
|
16
|
+
export interface PreviewSize {
|
|
17
|
+
label: string;
|
|
18
|
+
size: number;
|
|
19
|
+
}
|
|
20
|
+
export interface NiceIconPreviewProps {
|
|
21
|
+
/** Icon component to preview */
|
|
22
|
+
icon: ComponentType<NtdIconProps>;
|
|
23
|
+
/** Icon name for display */
|
|
24
|
+
iconName?: string;
|
|
25
|
+
/** Preview mode */
|
|
26
|
+
mode?: PreviewMode;
|
|
27
|
+
/** Layout */
|
|
28
|
+
layout?: PreviewLayout;
|
|
29
|
+
/** Custom sizes to show */
|
|
30
|
+
sizes?: PreviewSize[];
|
|
31
|
+
/** Show animation preview */
|
|
32
|
+
showAnimation?: boolean;
|
|
33
|
+
/** Available animations */
|
|
34
|
+
animations?: {
|
|
35
|
+
name: string;
|
|
36
|
+
className: string;
|
|
37
|
+
}[];
|
|
38
|
+
/** Fill color */
|
|
39
|
+
fill?: string;
|
|
40
|
+
/** Custom class */
|
|
41
|
+
className?: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Icon preview component with multiple modes and sizes.
|
|
45
|
+
*/
|
|
46
|
+
export declare function NiceIconPreview({ icon: Icon, iconName, mode, layout, sizes, showAnimation, animations, fill, className, }: NiceIconPreviewProps): React.ReactElement;
|
|
47
|
+
export default NiceIconPreview;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file NiceIconSetCreator.tsx
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.4 — Icon Set Creator Component
|
|
5
|
+
*
|
|
6
|
+
* Tool for creating custom icon sets from the icon library:
|
|
7
|
+
* - Select icons for project
|
|
8
|
+
* - Custom naming
|
|
9
|
+
* - TypeScript types generation
|
|
10
|
+
* - Tree-shaking friendly export
|
|
11
|
+
*/
|
|
12
|
+
import React, { type ComponentType } from 'react';
|
|
13
|
+
import type { NtdIconProps } from './types';
|
|
14
|
+
import type { IconMetadata } from './iconMetadata';
|
|
15
|
+
export interface IconSetItem {
|
|
16
|
+
/** Original icon name */
|
|
17
|
+
originalName: string;
|
|
18
|
+
/** Custom name for the set */
|
|
19
|
+
customName: string;
|
|
20
|
+
/** Icon component */
|
|
21
|
+
icon: ComponentType<NtdIconProps>;
|
|
22
|
+
/** Icon metadata */
|
|
23
|
+
metadata?: IconMetadata;
|
|
24
|
+
/** Include in export */
|
|
25
|
+
included: boolean;
|
|
26
|
+
}
|
|
27
|
+
export interface IconSetConfig {
|
|
28
|
+
/** Set name (e.g., 'MyProjectIcons') */
|
|
29
|
+
name: string;
|
|
30
|
+
/** Package name for export */
|
|
31
|
+
packageName: string;
|
|
32
|
+
/** Description */
|
|
33
|
+
description: string;
|
|
34
|
+
/** Version */
|
|
35
|
+
version: string;
|
|
36
|
+
/** Author */
|
|
37
|
+
author: string;
|
|
38
|
+
/** License */
|
|
39
|
+
license: string;
|
|
40
|
+
/** Export format */
|
|
41
|
+
format: 'esm' | 'cjs' | 'both';
|
|
42
|
+
/** Generate TypeScript types */
|
|
43
|
+
generateTypes: boolean;
|
|
44
|
+
/** Include metadata in export */
|
|
45
|
+
includeMetadata: boolean;
|
|
46
|
+
/** Tree-shaking friendly (individual exports) */
|
|
47
|
+
treeShaking: boolean;
|
|
48
|
+
}
|
|
49
|
+
export type ExportOutput = {
|
|
50
|
+
filename: string;
|
|
51
|
+
content: string;
|
|
52
|
+
type: 'ts' | 'js' | 'json' | 'd.ts';
|
|
53
|
+
};
|
|
54
|
+
export interface NiceIconSetCreatorProps {
|
|
55
|
+
/** Available icons to choose from */
|
|
56
|
+
icons: {
|
|
57
|
+
name: string;
|
|
58
|
+
icon: ComponentType<NtdIconProps>;
|
|
59
|
+
metadata?: IconMetadata;
|
|
60
|
+
}[];
|
|
61
|
+
/** Initial selected icons */
|
|
62
|
+
initialSelection?: string[];
|
|
63
|
+
/** Default config */
|
|
64
|
+
defaultConfig?: Partial<IconSetConfig>;
|
|
65
|
+
/** Called when selection changes */
|
|
66
|
+
onSelectionChange?: (selection: IconSetItem[]) => void;
|
|
67
|
+
/** Called on export */
|
|
68
|
+
onExport?: (output: ExportOutput[]) => void;
|
|
69
|
+
/** Custom class */
|
|
70
|
+
className?: string;
|
|
71
|
+
}
|
|
72
|
+
export interface UseIconSetCreatorOptions {
|
|
73
|
+
icons: NiceIconSetCreatorProps['icons'];
|
|
74
|
+
initialSelection?: string[];
|
|
75
|
+
defaultConfig?: Partial<IconSetConfig>;
|
|
76
|
+
}
|
|
77
|
+
export interface UseIconSetCreatorReturn {
|
|
78
|
+
items: IconSetItem[];
|
|
79
|
+
config: IconSetConfig;
|
|
80
|
+
selectedCount: number;
|
|
81
|
+
toggleIcon: (name: string) => void;
|
|
82
|
+
selectAll: () => void;
|
|
83
|
+
deselectAll: () => void;
|
|
84
|
+
renameIcon: (originalName: string, newName: string) => void;
|
|
85
|
+
updateConfig: (updates: Partial<IconSetConfig>) => void;
|
|
86
|
+
generateExport: () => ExportOutput[];
|
|
87
|
+
getSelectedItems: () => IconSetItem[];
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Hook for managing icon set creator state.
|
|
91
|
+
*/
|
|
92
|
+
export declare function useIconSetCreator(options: UseIconSetCreatorOptions): UseIconSetCreatorReturn;
|
|
93
|
+
/**
|
|
94
|
+
* Icon Set Creator component for building custom icon packages.
|
|
95
|
+
*/
|
|
96
|
+
export declare function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectionChange, onExport, className, }: NiceIconSetCreatorProps): React.ReactElement;
|
|
97
|
+
export default NiceIconSetCreator;
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file advancedIconSearch.ts
|
|
3
|
+
* @module @nice2dev/icons
|
|
4
|
+
* @description PRO-28.3 — Advanced Icon Search with fuzzy matching,
|
|
5
|
+
* filters, semantic search support, and analytics.
|
|
6
|
+
*/
|
|
7
|
+
import type { IconCategory, IconMetadata } from './iconMetadata';
|
|
8
|
+
/** Domain classification for icons */
|
|
9
|
+
export type IconDomain = 'general' | 'finance' | 'healthcare' | 'education' | 'technology' | 'ecommerce' | 'social' | 'gaming' | 'media' | 'enterprise' | 'science' | 'travel' | 'food' | 'sports' | 'lifestyle';
|
|
10
|
+
/** Use-case classification for icons */
|
|
11
|
+
export type IconUseCase = 'cursor' | 'toolbar' | 'menu' | 'status' | 'notification' | 'indicator' | 'action' | 'navigation' | 'display' | 'avatar' | 'illustration' | 'badge' | 'decoration';
|
|
12
|
+
/** Style classification */
|
|
13
|
+
export type IconStyle = 'solid' | 'outline' | 'duotone' | 'flat' | 'gradient' | 'hand-drawn';
|
|
14
|
+
/** Localized names for i18n */
|
|
15
|
+
export interface LocalizedNames {
|
|
16
|
+
en: string;
|
|
17
|
+
pl?: string;
|
|
18
|
+
de?: string;
|
|
19
|
+
es?: string;
|
|
20
|
+
fr?: string;
|
|
21
|
+
pt?: string;
|
|
22
|
+
it?: string;
|
|
23
|
+
ja?: string;
|
|
24
|
+
zh?: string;
|
|
25
|
+
ko?: string;
|
|
26
|
+
ru?: string;
|
|
27
|
+
ar?: string;
|
|
28
|
+
[key: string]: string | undefined;
|
|
29
|
+
}
|
|
30
|
+
/** Extended icon metadata with advanced tagging */
|
|
31
|
+
export interface ExtendedIconMetadata extends IconMetadata {
|
|
32
|
+
/** Primary category */
|
|
33
|
+
primaryCategory: IconCategory;
|
|
34
|
+
/** Secondary categories */
|
|
35
|
+
secondaryCategories: IconCategory[];
|
|
36
|
+
/** Domain classification */
|
|
37
|
+
domains: IconDomain[];
|
|
38
|
+
/** Use-case classification */
|
|
39
|
+
useCases: IconUseCase[];
|
|
40
|
+
/** Compatible styles */
|
|
41
|
+
styles: IconStyle[];
|
|
42
|
+
/** Recommended size range [min, max] */
|
|
43
|
+
recommendedSizes: [number, number];
|
|
44
|
+
/** Closely related icons */
|
|
45
|
+
relatedIcons: string[];
|
|
46
|
+
/** Alternative names / aliases */
|
|
47
|
+
aliases: string[];
|
|
48
|
+
/** Localized display names */
|
|
49
|
+
localizedNames: LocalizedNames;
|
|
50
|
+
/** Keywords for search optimization */
|
|
51
|
+
searchKeywords: string[];
|
|
52
|
+
/** Date added to library */
|
|
53
|
+
dateAdded?: string;
|
|
54
|
+
/** Version when added */
|
|
55
|
+
versionAdded?: string;
|
|
56
|
+
/** Is the icon deprecated? */
|
|
57
|
+
deprecated?: boolean;
|
|
58
|
+
/** Deprecated message / replacement */
|
|
59
|
+
deprecatedMessage?: string;
|
|
60
|
+
}
|
|
61
|
+
/** Advanced search filters */
|
|
62
|
+
export interface AdvancedSearchFilters {
|
|
63
|
+
/** Filter by categories */
|
|
64
|
+
categories?: IconCategory[];
|
|
65
|
+
/** Filter by domains */
|
|
66
|
+
domains?: IconDomain[];
|
|
67
|
+
/** Filter by use cases */
|
|
68
|
+
useCases?: IconUseCase[];
|
|
69
|
+
/** Filter by available styles */
|
|
70
|
+
styles?: IconStyle[];
|
|
71
|
+
/** Filter by minimum size */
|
|
72
|
+
minSize?: number;
|
|
73
|
+
/** Filter by maximum size */
|
|
74
|
+
maxSize?: number;
|
|
75
|
+
/** Only recent icons (days) */
|
|
76
|
+
recentDays?: number;
|
|
77
|
+
/** Exclude deprecated */
|
|
78
|
+
excludeDeprecated?: boolean;
|
|
79
|
+
/** Only favorites */
|
|
80
|
+
favoritesOnly?: boolean;
|
|
81
|
+
/** Only recently used */
|
|
82
|
+
recentlyUsedOnly?: boolean;
|
|
83
|
+
}
|
|
84
|
+
/** Search result with match metadata */
|
|
85
|
+
export interface AdvancedSearchResult {
|
|
86
|
+
/** Icon name/ID */
|
|
87
|
+
name: string;
|
|
88
|
+
/** Extended metadata */
|
|
89
|
+
metadata: ExtendedIconMetadata;
|
|
90
|
+
/** Match score (0-100) */
|
|
91
|
+
score: number;
|
|
92
|
+
/** What matched */
|
|
93
|
+
matchedIn: ('name' | 'alias' | 'tag' | 'description' | 'keyword' | 'localized')[];
|
|
94
|
+
/** Highlighted text snippets */
|
|
95
|
+
highlights: {
|
|
96
|
+
field: string;
|
|
97
|
+
text: string;
|
|
98
|
+
}[];
|
|
99
|
+
}
|
|
100
|
+
/** Search analytics data */
|
|
101
|
+
export interface SearchAnalytics {
|
|
102
|
+
/** Search query */
|
|
103
|
+
query: string;
|
|
104
|
+
/** Time taken (ms) */
|
|
105
|
+
duration: number;
|
|
106
|
+
/** Total results */
|
|
107
|
+
totalResults: number;
|
|
108
|
+
/** Filters applied */
|
|
109
|
+
filters: AdvancedSearchFilters;
|
|
110
|
+
/** Timestamp */
|
|
111
|
+
timestamp: number;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Calculate Levenshtein distance between two strings.
|
|
115
|
+
*/
|
|
116
|
+
export declare function levenshteinDistance(a: string, b: string): number;
|
|
117
|
+
/**
|
|
118
|
+
* Calculate fuzzy match score (0-100).
|
|
119
|
+
*/
|
|
120
|
+
export declare function fuzzyMatchScore(query: string, target: string): number;
|
|
121
|
+
/**
|
|
122
|
+
* Tokenize a search query.
|
|
123
|
+
*/
|
|
124
|
+
export declare function tokenizeQuery(query: string): string[];
|
|
125
|
+
/**
|
|
126
|
+
* Register an icon with extended metadata.
|
|
127
|
+
*/
|
|
128
|
+
export declare function registerExtendedIcon(name: string, metadata: Partial<ExtendedIconMetadata>): void;
|
|
129
|
+
/**
|
|
130
|
+
* Get extended metadata for an icon.
|
|
131
|
+
*/
|
|
132
|
+
export declare function getExtendedMetadata(name: string): ExtendedIconMetadata | undefined;
|
|
133
|
+
/**
|
|
134
|
+
* Mark an icon as favorite.
|
|
135
|
+
*/
|
|
136
|
+
export declare function toggleFavorite(name: string): boolean;
|
|
137
|
+
/**
|
|
138
|
+
* Check if icon is favorite.
|
|
139
|
+
*/
|
|
140
|
+
export declare function isFavorite(name: string): boolean;
|
|
141
|
+
/**
|
|
142
|
+
* Get all favorite icons.
|
|
143
|
+
*/
|
|
144
|
+
export declare function getFavorites(): string[];
|
|
145
|
+
/**
|
|
146
|
+
* Record icon usage (for analytics).
|
|
147
|
+
*/
|
|
148
|
+
export declare function recordIconUsage(name: string): void;
|
|
149
|
+
/**
|
|
150
|
+
* Get recently used icons.
|
|
151
|
+
*/
|
|
152
|
+
export declare function getRecentlyUsed(limit?: number): string[];
|
|
153
|
+
/**
|
|
154
|
+
* Perform advanced search with fuzzy matching and filters.
|
|
155
|
+
*/
|
|
156
|
+
export declare function advancedSearch(query: string, filters?: AdvancedSearchFilters, options?: {
|
|
157
|
+
maxResults?: number;
|
|
158
|
+
minScore?: number;
|
|
159
|
+
locale?: string;
|
|
160
|
+
}): AdvancedSearchResult[];
|
|
161
|
+
/**
|
|
162
|
+
* Find similar icons based on metadata overlap.
|
|
163
|
+
*/
|
|
164
|
+
export declare function findSimilarIcons(iconName: string, limit?: number): {
|
|
165
|
+
name: string;
|
|
166
|
+
similarity: number;
|
|
167
|
+
}[];
|
|
168
|
+
/**
|
|
169
|
+
* Get search suggestions based on partial input.
|
|
170
|
+
*/
|
|
171
|
+
export declare function getSearchSuggestions(partial: string, limit?: number): string[];
|
|
172
|
+
/**
|
|
173
|
+
* Get search analytics summary.
|
|
174
|
+
*/
|
|
175
|
+
export declare function getSearchAnalytics(): {
|
|
176
|
+
totalSearches: number;
|
|
177
|
+
averageDuration: number;
|
|
178
|
+
topQueries: {
|
|
179
|
+
query: string;
|
|
180
|
+
count: number;
|
|
181
|
+
}[];
|
|
182
|
+
zeroResultQueries: string[];
|
|
183
|
+
};
|
|
184
|
+
/**
|
|
185
|
+
* Get icon usage statistics.
|
|
186
|
+
*/
|
|
187
|
+
export declare function getIconUsageStats(): {
|
|
188
|
+
mostUsed: {
|
|
189
|
+
name: string;
|
|
190
|
+
count: number;
|
|
191
|
+
}[];
|
|
192
|
+
leastUsed: string[];
|
|
193
|
+
neverUsed: string[];
|
|
194
|
+
};
|
|
195
|
+
/**
|
|
196
|
+
* Clear search history.
|
|
197
|
+
*/
|
|
198
|
+
export declare function clearSearchHistory(): void;
|
|
199
|
+
/**
|
|
200
|
+
* Clear recently used.
|
|
201
|
+
*/
|
|
202
|
+
export declare function clearRecentlyUsed(): void;
|
|
203
|
+
export interface UseAdvancedSearchReturn {
|
|
204
|
+
query: string;
|
|
205
|
+
setQuery: (query: string) => void;
|
|
206
|
+
filters: AdvancedSearchFilters;
|
|
207
|
+
setFilters: React.Dispatch<React.SetStateAction<AdvancedSearchFilters>>;
|
|
208
|
+
results: AdvancedSearchResult[];
|
|
209
|
+
isSearching: boolean;
|
|
210
|
+
suggestions: string[];
|
|
211
|
+
search: () => void;
|
|
212
|
+
clearFilters: () => void;
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* React hook for advanced icon search.
|
|
216
|
+
*/
|
|
217
|
+
export declare function useAdvancedIconSearch(debounceMs?: number, locale?: string): UseAdvancedSearchReturn;
|
|
218
|
+
export default advancedSearch;
|