@puzzle-ui/icons 0.4.0 → 0.5.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/README.md +12 -49
- package/dist/index.cjs +38 -50
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -7
- package/dist/index.d.ts +3 -8
- package/dist/index.js +40 -51
- package/dist/index.js.map +1 -1
- package/package.json +8 -3
package/README.md
CHANGED
|
@@ -1,24 +1,19 @@
|
|
|
1
1
|
# @puzzle-ui/icons
|
|
2
2
|
|
|
3
|
-
React
|
|
4
|
-
or alongside Puzzle UI components.
|
|
3
|
+
React `Icon` component backed by Iconify. Render an icon by passing an Iconify `prefix:name` identifier, and style it with CSS, `currentColor`, or Puzzle theme tokens. Use it when you want a consistent SVG component API without importing individual icon files.
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
> change; use it for experimentation and evaluation rather than production.
|
|
5
|
+
**Documentation: [puzzle-ui.com/docs/icons](https://puzzle-ui.com/docs/icons)**
|
|
8
6
|
|
|
9
|
-
##
|
|
7
|
+
## Install
|
|
10
8
|
|
|
11
9
|
```sh
|
|
12
10
|
npm install @puzzle-ui/icons
|
|
13
|
-
# or
|
|
14
|
-
|
|
15
|
-
# or
|
|
16
|
-
pnpm add @puzzle-ui/icons
|
|
17
|
-
# or
|
|
18
|
-
yarn add @puzzle-ui/icons
|
|
11
|
+
# or: bun add @puzzle-ui/icons
|
|
12
|
+
# or: pnpm add @puzzle-ui/icons
|
|
13
|
+
# or: yarn add @puzzle-ui/icons
|
|
19
14
|
```
|
|
20
15
|
|
|
21
|
-
Requires React and React DOM
|
|
16
|
+
Requires React and React DOM `^19.0.0` as peer dependencies. No theme provider is required.
|
|
22
17
|
|
|
23
18
|
## Usage
|
|
24
19
|
|
|
@@ -30,40 +25,11 @@ export const HomeIcon = () => (
|
|
|
30
25
|
);
|
|
31
26
|
```
|
|
32
27
|
|
|
33
|
-
`Icon` accepts a
|
|
34
|
-
pixels, optional `color`, and SVG attributes. Without an explicit color,
|
|
35
|
-
it can inherit the surrounding text color.
|
|
28
|
+
`Icon` accepts a required `name`, optional pixel `size`, CSS `color`, an optional `showLoader`, and standard SVG attributes. By default, it uses `1em` sizing and inherits `currentColor`. For icon-only controls, label the control and mark the icon decorative with `aria-hidden="true"`.
|
|
36
29
|
|
|
37
|
-
|
|
30
|
+
## Exports and runtime
|
|
38
31
|
|
|
39
|
-
|
|
40
|
-
<button type="button" aria-label="Search">
|
|
41
|
-
<Icon name="lucide:search" aria-hidden="true" />
|
|
42
|
-
</button>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Server rendering
|
|
46
|
-
|
|
47
|
-
The package also exports `SSRIcon` and `SSRIconProps`. `SSRIcon` is an async
|
|
48
|
-
component that fetches icon data on the server and falls back to Iconify's
|
|
49
|
-
client-side loading when data is unavailable.
|
|
50
|
-
|
|
51
|
-
Use it only in rendering environments that support async components, such
|
|
52
|
-
as an appropriate React Server Component setup. It is not a drop-in async
|
|
53
|
-
component for ordinary client-side React rendering.
|
|
54
|
-
|
|
55
|
-
Icon loading can make external requests to Iconify. Account for network
|
|
56
|
-
availability and your Content Security Policy. Framework compatibility is
|
|
57
|
-
still being evaluated.
|
|
58
|
-
|
|
59
|
-
## Exports
|
|
60
|
-
|
|
61
|
-
- `Icon`, `IconProps`
|
|
62
|
-
- `SSRIcon`, `SSRIconProps`
|
|
63
|
-
|
|
64
|
-
Import from `@puzzle-ui/icons`; generated internal icon-set files are not
|
|
65
|
-
exported package entry points. ESM and CommonJS builds and TypeScript
|
|
66
|
-
declarations are included.
|
|
32
|
+
The package root exports `Icon` and `IconProps`; it does not export each icon as a separate component or expose generated collection files as subpaths. ESM, CommonJS, and TypeScript declarations are included. Iconify may load icon data over the network, so consider network availability and your Content Security Policy. Check the relevant icon collection's license before using its artwork.
|
|
67
33
|
|
|
68
34
|
## Development
|
|
69
35
|
|
|
@@ -75,11 +41,8 @@ npm run build --workspace=@puzzle-ui/icons
|
|
|
75
41
|
bun run vitest
|
|
76
42
|
```
|
|
77
43
|
|
|
78
|
-
`prepack` rebuilds the package before packing or publishing. See the root
|
|
79
|
-
[publishing guide](../../README.md#publishing-packages).
|
|
44
|
+
`prepack` rebuilds the package before packing or publishing. See the root [publishing guide](../../README.md#publishing-packages).
|
|
80
45
|
|
|
81
46
|
## License
|
|
82
47
|
|
|
83
|
-
Package code is MIT; see [LICENSE](../../LICENSE), also included at
|
|
84
|
-
`dist/LICENSE` in published packages. Individual icon collections may carry
|
|
85
|
-
their own licenses; check the collection's terms before using its artwork.
|
|
48
|
+
Package code is MIT; see [LICENSE](../../LICENSE), also included at `dist/LICENSE` in published packages. Individual icon collections may carry their own licenses; check the collection's terms before use.
|
package/dist/index.cjs
CHANGED
|
@@ -1,62 +1,50 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
let _iconify_react = require("@iconify/react");
|
|
3
3
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
-
let _iconify_utils = require("@iconify/utils");
|
|
5
4
|
// src/icon.tsx
|
|
6
|
-
const Icon = ({ name, size, color, ...props }) => {
|
|
5
|
+
const Icon = ({ name, size, color, showLoader = false, style, children, ...props }) => {
|
|
6
|
+
const iconStyle = {
|
|
7
|
+
display: "inline-block",
|
|
8
|
+
flexShrink: 0,
|
|
9
|
+
verticalAlign: "middle",
|
|
10
|
+
...style,
|
|
11
|
+
color: color ?? style?.color,
|
|
12
|
+
width: size !== void 0 ? size : style?.width ?? props.width,
|
|
13
|
+
height: size !== void 0 ? size : style?.height ?? props.height
|
|
14
|
+
};
|
|
7
15
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
|
|
8
16
|
...props,
|
|
9
17
|
icon: name ?? "",
|
|
10
|
-
width: size,
|
|
11
|
-
height: size,
|
|
12
|
-
style:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
width: size,
|
|
39
|
-
height: size,
|
|
40
|
-
style: {
|
|
41
|
-
color,
|
|
42
|
-
width: size ? `${size}px` : void 0,
|
|
43
|
-
height: size ? `${size}px` : void 0
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
console.warn(`[SSR] Fallback to client-side for icon: ${name}`);
|
|
47
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
|
|
48
|
-
...props,
|
|
49
|
-
icon: name ?? "",
|
|
50
|
-
width: size,
|
|
51
|
-
height: size,
|
|
52
|
-
style: {
|
|
53
|
-
color,
|
|
54
|
-
width: size ? `${size}px` : void 0,
|
|
55
|
-
height: size ? `${size}px` : void 0
|
|
56
|
-
}
|
|
18
|
+
width: size ?? props.width ?? "1em",
|
|
19
|
+
height: size ?? props.height ?? "1em",
|
|
20
|
+
style: iconStyle,
|
|
21
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
22
|
+
...props,
|
|
23
|
+
width: size ?? props.width ?? "1em",
|
|
24
|
+
height: size ?? props.height ?? "1em",
|
|
25
|
+
style: iconStyle,
|
|
26
|
+
viewBox: "0 0 100 100",
|
|
27
|
+
children: showLoader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
|
|
28
|
+
@keyframes puzzle-icon-loading { from { opacity: 1; } to { opacity: 0.2; } }
|
|
29
|
+
.puzzle-icon-loading-bar { animation: puzzle-icon-loading 1.2s linear infinite; }
|
|
30
|
+
@media (prefers-reduced-motion: reduce) { .puzzle-icon-loading-bar { animation: none; } }
|
|
31
|
+
` }), Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
32
|
+
className: "puzzle-icon-loading-bar",
|
|
33
|
+
x: "47",
|
|
34
|
+
y: "4",
|
|
35
|
+
width: "6",
|
|
36
|
+
height: "24",
|
|
37
|
+
rx: "3",
|
|
38
|
+
fill: iconStyle.color ?? "currentColor",
|
|
39
|
+
transform: `rotate(${index * 30} 50 50)`,
|
|
40
|
+
style: {
|
|
41
|
+
animationDelay: `${index * .1}s`,
|
|
42
|
+
opacity: (index + 1) / 12
|
|
43
|
+
}
|
|
44
|
+
}, index))] }) : children
|
|
45
|
+
})
|
|
57
46
|
});
|
|
58
47
|
};
|
|
59
48
|
exports.Icon = Icon;
|
|
60
|
-
exports.SSRIcon = SSRIcon;
|
|
61
49
|
|
|
62
50
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["IconifyIcon"
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["IconifyIcon"],"sources":["../src/icon.tsx"],"sourcesContent":["import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\n\ntype IconProps = Omit<ComponentProps<\"svg\">, \"mode\" | \"onLoad\" | \"rotate\"> & {\n name: string;\n size?: number;\n color?: string;\n showLoader?: boolean;\n};\n\nconst Icon = ({\n name,\n size,\n color,\n showLoader = false,\n style,\n children,\n ...props\n}: IconProps) => {\n const iconStyle: CSSProperties = {\n display: \"inline-block\",\n flexShrink: 0,\n verticalAlign: \"middle\",\n ...style,\n color: color ?? style?.color,\n width: size !== undefined ? size : (style?.width ?? props.width),\n height: size !== undefined ? size : (style?.height ?? props.height),\n };\n\n return (\n <IconifyIcon\n {...props}\n icon={name ?? \"\"}\n width={size ?? props.width ?? \"1em\"}\n height={size ?? props.height ?? \"1em\"}\n style={iconStyle}\n >\n <svg\n {...props}\n width={size ?? props.width ?? \"1em\"}\n height={size ?? props.height ?? \"1em\"}\n style={iconStyle}\n viewBox=\"0 0 100 100\"\n >\n {showLoader ? (\n <>\n <style>{`\n @keyframes puzzle-icon-loading { from { opacity: 1; } to { opacity: 0.2; } }\n .puzzle-icon-loading-bar { animation: puzzle-icon-loading 1.2s linear infinite; }\n @media (prefers-reduced-motion: reduce) { .puzzle-icon-loading-bar { animation: none; } }\n `}</style>\n {Array.from({ length: 12 }, (_, index) => (\n <rect\n key={index}\n className=\"puzzle-icon-loading-bar\"\n x=\"47\"\n y=\"4\"\n width=\"6\"\n height=\"24\"\n rx=\"3\"\n fill={iconStyle.color ?? \"currentColor\"}\n transform={`rotate(${index * 30} 50 50)`}\n style={{\n animationDelay: `${index * 0.1}s`,\n opacity: (index + 1) / 12,\n }}\n />\n ))}\n </>\n ) : (\n children\n )}\n </svg>\n </IconifyIcon>\n );\n};\n\nexport { Icon, type IconProps };\n"],"mappings":";;;;AAUA,MAAM,QAAQ,EACZ,MACA,MACA,OACA,aAAa,OACb,OACA,UACA,GAAG,YACY;CACf,MAAM,YAA2B;EAC/B,SAAS;EACT,YAAY;EACZ,eAAe;EACf,GAAG;EACH,OAAO,SAAS,OAAO;EACvB,OAAO,SAAS,KAAA,IAAY,OAAQ,OAAO,SAAS,MAAM;EAC1D,QAAQ,SAAS,KAAA,IAAY,OAAQ,OAAO,UAAU,MAAM;CAC9D;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,MAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO,QAAQ,MAAM,SAAS;EAC9B,QAAQ,QAAQ,MAAM,UAAU;EAChC,OAAO;EAEP,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACJ,OAAO,QAAQ,MAAM,SAAS;GAC9B,QAAQ,QAAQ,MAAM,UAAU;GAChC,OAAO;GACP,SAAQ;GAEP,UAAA,aACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD,EAAA,UAAQ;;;;cAIC,CAAA,GACR,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,UAC9B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,WAAU;IACV,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,IAAG;IACH,MAAM,UAAU,SAAS;IACzB,WAAW,UAAU,QAAQ,GAAG;IAChC,OAAO;KACL,gBAAgB,GAAG,QAAQ,GAAI;KAC/B,UAAU,QAAQ,KAAK;IACzB;GACD,GAbM,KAaN,CACF,CACD,EAAA,CAAA,IAEF;EAEC,CAAA;CACM,CAAA;AAEjB"}
|
package/dist/index.d.cts
CHANGED
|
@@ -5,10 +5,4 @@ type IconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
|
|
|
5
5
|
color?: string;
|
|
6
6
|
};
|
|
7
7
|
declare const Icon: ({ name, size, color, ...props }: IconProps) => import("react").JSX.Element;
|
|
8
|
-
|
|
9
|
-
name: string;
|
|
10
|
-
size?: number;
|
|
11
|
-
color?: string;
|
|
12
|
-
};
|
|
13
|
-
declare const SSRIcon: ({ name, size, color, ...props }: SSRIconProps) => Promise<import("react").JSX.Element>;
|
|
14
|
-
export { Icon, type IconProps, SSRIcon, type SSRIconProps };
|
|
8
|
+
export { Icon, type IconProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,12 +3,7 @@ type IconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
|
|
|
3
3
|
name: string;
|
|
4
4
|
size?: number;
|
|
5
5
|
color?: string;
|
|
6
|
+
showLoader?: boolean;
|
|
6
7
|
};
|
|
7
|
-
declare const Icon: ({ name, size, color, ...props }: IconProps) => import("react").JSX.Element;
|
|
8
|
-
|
|
9
|
-
name: string;
|
|
10
|
-
size?: number;
|
|
11
|
-
color?: string;
|
|
12
|
-
};
|
|
13
|
-
declare const SSRIcon: ({ name, size, color, ...props }: SSRIconProps) => Promise<import("react").JSX.Element>;
|
|
14
|
-
export { Icon, type IconProps, SSRIcon, type SSRIconProps };
|
|
8
|
+
declare const Icon: ({ name, size, color, showLoader, style, children, ...props }: IconProps) => import("react").JSX.Element;
|
|
9
|
+
export { Icon, type IconProps };
|
package/dist/index.js
CHANGED
|
@@ -1,60 +1,49 @@
|
|
|
1
1
|
import { Icon as Icon$1 } from "@iconify/react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { getIconData, stringToIcon } from "@iconify/utils";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
3
|
// src/icon.tsx
|
|
5
|
-
const Icon = ({ name, size, color, ...props }) => {
|
|
4
|
+
const Icon = ({ name, size, color, showLoader = false, style, children, ...props }) => {
|
|
5
|
+
const iconStyle = {
|
|
6
|
+
display: "inline-block",
|
|
7
|
+
flexShrink: 0,
|
|
8
|
+
verticalAlign: "middle",
|
|
9
|
+
...style,
|
|
10
|
+
color: color ?? style?.color,
|
|
11
|
+
width: size !== void 0 ? size : style?.width ?? props.width,
|
|
12
|
+
height: size !== void 0 ? size : style?.height ?? props.height
|
|
13
|
+
};
|
|
6
14
|
return /* @__PURE__ */ jsx(Icon$1, {
|
|
7
15
|
...props,
|
|
8
16
|
icon: name ?? "",
|
|
9
|
-
width: size,
|
|
10
|
-
height: size,
|
|
11
|
-
style:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
width: size ?? props.width ?? "1em",
|
|
18
|
+
height: size ?? props.height ?? "1em",
|
|
19
|
+
style: iconStyle,
|
|
20
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
21
|
+
...props,
|
|
22
|
+
width: size ?? props.width ?? "1em",
|
|
23
|
+
height: size ?? props.height ?? "1em",
|
|
24
|
+
style: iconStyle,
|
|
25
|
+
viewBox: "0 0 100 100",
|
|
26
|
+
children: showLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
|
|
27
|
+
@keyframes puzzle-icon-loading { from { opacity: 1; } to { opacity: 0.2; } }
|
|
28
|
+
.puzzle-icon-loading-bar { animation: puzzle-icon-loading 1.2s linear infinite; }
|
|
29
|
+
@media (prefers-reduced-motion: reduce) { .puzzle-icon-loading-bar { animation: none; } }
|
|
30
|
+
` }), Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ jsx("rect", {
|
|
31
|
+
className: "puzzle-icon-loading-bar",
|
|
32
|
+
x: "47",
|
|
33
|
+
y: "4",
|
|
34
|
+
width: "6",
|
|
35
|
+
height: "24",
|
|
36
|
+
rx: "3",
|
|
37
|
+
fill: iconStyle.color ?? "currentColor",
|
|
38
|
+
transform: `rotate(${index * 30} 50 50)`,
|
|
39
|
+
style: {
|
|
40
|
+
animationDelay: `${index * .1}s`,
|
|
41
|
+
opacity: (index + 1) / 12
|
|
42
|
+
}
|
|
43
|
+
}, index))] }) : children
|
|
44
|
+
})
|
|
16
45
|
});
|
|
17
46
|
};
|
|
18
|
-
|
|
19
|
-
async function fetchIconDataServer(iconName) {
|
|
20
|
-
const iconObj = stringToIcon(iconName);
|
|
21
|
-
if (!iconObj) return null;
|
|
22
|
-
try {
|
|
23
|
-
const response = await fetch(`https://iconify.design/${iconObj.prefix}.json?icons=${iconObj.name}`);
|
|
24
|
-
if (!response.ok) return null;
|
|
25
|
-
const json = await response.json();
|
|
26
|
-
return getIconData(json, iconObj.name);
|
|
27
|
-
} catch (error) {
|
|
28
|
-
console.error(`[SSR] Error fetching icon ${iconName}:`, error);
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
const SSRIcon = async ({ name, size, color, ...props }) => {
|
|
33
|
-
const iconData = await fetchIconDataServer(name);
|
|
34
|
-
if (iconData) return /* @__PURE__ */ jsx(Icon$1, {
|
|
35
|
-
...props,
|
|
36
|
-
icon: iconData,
|
|
37
|
-
width: size,
|
|
38
|
-
height: size,
|
|
39
|
-
style: {
|
|
40
|
-
color,
|
|
41
|
-
width: size ? `${size}px` : void 0,
|
|
42
|
-
height: size ? `${size}px` : void 0
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
console.warn(`[SSR] Fallback to client-side for icon: ${name}`);
|
|
46
|
-
return /* @__PURE__ */ jsx(Icon$1, {
|
|
47
|
-
...props,
|
|
48
|
-
icon: name ?? "",
|
|
49
|
-
width: size,
|
|
50
|
-
height: size,
|
|
51
|
-
style: {
|
|
52
|
-
color,
|
|
53
|
-
width: size ? `${size}px` : void 0,
|
|
54
|
-
height: size ? `${size}px` : void 0
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
export { Icon, SSRIcon };
|
|
47
|
+
export { Icon };
|
|
59
48
|
|
|
60
49
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["IconifyIcon"
|
|
1
|
+
{"version":3,"file":"index.js","names":["IconifyIcon"],"sources":["../src/icon.tsx"],"sourcesContent":["import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\n\ntype IconProps = Omit<ComponentProps<\"svg\">, \"mode\" | \"onLoad\" | \"rotate\"> & {\n name: string;\n size?: number;\n color?: string;\n showLoader?: boolean;\n};\n\nconst Icon = ({\n name,\n size,\n color,\n showLoader = false,\n style,\n children,\n ...props\n}: IconProps) => {\n const iconStyle: CSSProperties = {\n display: \"inline-block\",\n flexShrink: 0,\n verticalAlign: \"middle\",\n ...style,\n color: color ?? style?.color,\n width: size !== undefined ? size : (style?.width ?? props.width),\n height: size !== undefined ? size : (style?.height ?? props.height),\n };\n\n return (\n <IconifyIcon\n {...props}\n icon={name ?? \"\"}\n width={size ?? props.width ?? \"1em\"}\n height={size ?? props.height ?? \"1em\"}\n style={iconStyle}\n >\n <svg\n {...props}\n width={size ?? props.width ?? \"1em\"}\n height={size ?? props.height ?? \"1em\"}\n style={iconStyle}\n viewBox=\"0 0 100 100\"\n >\n {showLoader ? (\n <>\n <style>{`\n @keyframes puzzle-icon-loading { from { opacity: 1; } to { opacity: 0.2; } }\n .puzzle-icon-loading-bar { animation: puzzle-icon-loading 1.2s linear infinite; }\n @media (prefers-reduced-motion: reduce) { .puzzle-icon-loading-bar { animation: none; } }\n `}</style>\n {Array.from({ length: 12 }, (_, index) => (\n <rect\n key={index}\n className=\"puzzle-icon-loading-bar\"\n x=\"47\"\n y=\"4\"\n width=\"6\"\n height=\"24\"\n rx=\"3\"\n fill={iconStyle.color ?? \"currentColor\"}\n transform={`rotate(${index * 30} 50 50)`}\n style={{\n animationDelay: `${index * 0.1}s`,\n opacity: (index + 1) / 12,\n }}\n />\n ))}\n </>\n ) : (\n children\n )}\n </svg>\n </IconifyIcon>\n );\n};\n\nexport { Icon, type IconProps };\n"],"mappings":";;;AAUA,MAAM,QAAQ,EACZ,MACA,MACA,OACA,aAAa,OACb,OACA,UACA,GAAG,YACY;CACf,MAAM,YAA2B;EAC/B,SAAS;EACT,YAAY;EACZ,eAAe;EACf,GAAG;EACH,OAAO,SAAS,OAAO;EACvB,OAAO,SAAS,KAAA,IAAY,OAAQ,OAAO,SAAS,MAAM;EAC1D,QAAQ,SAAS,KAAA,IAAY,OAAQ,OAAO,UAAU,MAAM;CAC9D;CAEA,OACE,oBAACA,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO,QAAQ,MAAM,SAAS;EAC9B,QAAQ,QAAQ,MAAM,UAAU;EAChC,OAAO;EAEP,UAAA,oBAAC,OAAD;GACE,GAAI;GACJ,OAAO,QAAQ,MAAM,SAAS;GAC9B,QAAQ,QAAQ,MAAM,UAAU;GAChC,OAAO;GACP,SAAQ;GAEP,UAAA,aACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD,EAAA,UAAQ;;;;cAIC,CAAA,GACR,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,UAC9B,oBAAC,QAAD;IAEE,WAAU;IACV,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,IAAG;IACH,MAAM,UAAU,SAAS;IACzB,WAAW,UAAU,QAAQ,GAAG;IAChC,OAAO;KACL,gBAAgB,GAAG,QAAQ,GAAI;KAC/B,UAAU,QAAQ,KAAK;IACzB;GACD,GAbM,KAaN,CACF,CACD,EAAA,CAAA,IAEF;EAEC,CAAA;CACM,CAAA;AAEjB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@puzzle-ui/icons",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Icons for Puzzle",
|
|
5
|
+
"homepage": "https://puzzle-ui.com",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/senorprogramador/puzzle.git"
|
|
9
|
+
},
|
|
5
10
|
"license": "MIT",
|
|
6
11
|
"publishConfig": {
|
|
7
12
|
"access": "public",
|
|
@@ -38,7 +43,7 @@
|
|
|
38
43
|
"dependencies": {
|
|
39
44
|
"@iconify/react": "^6.0.3",
|
|
40
45
|
"@iconify/utils": "^3.1.7",
|
|
41
|
-
"@puzzle-ui/core": "^0.
|
|
46
|
+
"@puzzle-ui/core": "^0.5.1"
|
|
42
47
|
},
|
|
43
48
|
"peerDependencies": {
|
|
44
49
|
"react": "^19.0.0",
|
|
@@ -48,7 +53,7 @@
|
|
|
48
53
|
"@types/react": "^19.0.0",
|
|
49
54
|
"@types/react-dom": "^19.0.0",
|
|
50
55
|
"tsdown": "^0.23.1",
|
|
51
|
-
"typescript": "^
|
|
56
|
+
"typescript": "^7.0.2",
|
|
52
57
|
"vitest": "latest"
|
|
53
58
|
}
|
|
54
59
|
}
|