@pablo-v/pixel-icons 1.1.0 → 1.2.0
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 +10 -0
- package/dist/animated-icons.d.ts +12 -0
- package/dist/animated-icons.d.ts.map +1 -0
- package/dist/animated-icons.js +888 -0
- package/dist/animated-icons.js.map +1 -0
- package/dist/create-pixel-icon.d.ts +9 -0
- package/dist/create-pixel-icon.d.ts.map +1 -1
- package/dist/create-pixel-icon.js +21 -4
- package/dist/create-pixel-icon.js.map +1 -1
- package/dist/icons.d.ts +45 -0
- package/dist/icons.d.ts.map +1 -1
- package/dist/icons.js +840 -30
- package/dist/icons.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/pixel-icons.css +20 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -11,3 +11,13 @@ import '@pablo-v/tokens/styles.css';
|
|
|
11
11
|
import '@pablo-v/pixel-icons/style.css';
|
|
12
12
|
import { PixelIcons } from '@pablo-v/pixel-icons';
|
|
13
13
|
```
|
|
14
|
+
|
|
15
|
+
## Animated icons
|
|
16
|
+
|
|
17
|
+
`SpinnerIcon`, `HourglassIcon`, `TypingIcon` and the other animated icons loop frame by frame. Set `--pxl-icon-duration` to change the speed; under `prefers-reduced-motion` they rest on their first frame.
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
<SpinnerIcon label="Loading" style={{ '--pxl-icon-duration': '1200ms' } as React.CSSProperties} />;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Build your own with `createAnimatedPixelIcon(name, frames, { duration })`, where each frame is a 16×16 bitmap. Every frame must be exactly 16 rows of 16 characters, or neighbouring frames show through.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const BatteryChargingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
2
|
+
export declare const BellRingingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
3
|
+
export declare const DownloadingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
4
|
+
export declare const HeartbeatIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
5
|
+
export declare const HourglassIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
6
|
+
export declare const MapPinBouncingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
7
|
+
export declare const SparklingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
8
|
+
export declare const SpinnerIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
9
|
+
export declare const TypingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
10
|
+
export declare const UploadingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
11
|
+
export declare const WifiConnectingIcon: import("./create-pixel-icon.js").PixelIcon;
|
|
12
|
+
//# sourceMappingURL=animated-icons.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animated-icons.d.ts","sourceRoot":"","sources":["../src/animated-icons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,4CA6E/B,CAAC;AAEF,eAAO,MAAM,eAAe,4CA6E3B,CAAC;AAEF,eAAO,MAAM,eAAe,4CA6E3B,CAAC;AAEF,eAAO,MAAM,aAAa,4CAiHzB,CAAC;AAEF,eAAO,MAAM,aAAa,4CA6EzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,4CA6E9B,CAAC;AAEF,eAAO,MAAM,aAAa,4CAyCzB,CAAC;AAEF,eAAO,MAAM,WAAW,4CAqJvB,CAAC;AAEF,eAAO,MAAM,UAAU,4CA6EtB,CAAC;AAEF,eAAO,MAAM,aAAa,4CA6EzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,4CA6E9B,CAAC"}
|