@pablo-v/pixel-icons 1.1.0 → 1.3.0

package/README.md

@@ -11,3 +11,25 @@ import '@pablo-v/tokens/styles.css';
 import '@pablo-v/pixel-icons/style.css';
 import { PixelIcons } from '@pablo-v/pixel-icons';
 ```
+
+## Brand icons
+
+`GoogleIcon`, `GitHubIcon`, `AppleIcon`, `MicrosoftIcon` and other common brand marks are drawn in the same monochrome 16×16 grid, so they inherit `currentColor` like every other icon. Pass `label` when the icon is the only content, for example an icon-only GitHub sign-in button.
+
+```tsx
+<Button>
+  <GitHubIcon /> Continue with GitHub
+</Button>;
+```
+
+All brand names and logos are trademarks of their respective owners. These pixel redraws imply no endorsement, and some providers (Google, Apple, Microsoft) require their official artwork on sign-in buttons, so check each brand's guidelines before using them there.
+
+## Animated icons
+
+`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.
+
+```tsx
+<SpinnerIcon label="Loading" style={{ '--pxl-icon-duration': '1200ms' } as React.CSSProperties} />;
+```
+
+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.

package/dist/animated-icons.d.ts

@@ -0,0 +1,12 @@
+export declare const BatteryChargingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const BellRingingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const DownloadingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const HeartbeatIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const HourglassIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const MapPinBouncingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const SparklingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const SpinnerIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const TypingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const UploadingIcon: import("./create-pixel-icon.js").PixelIcon;
+export declare const WifiConnectingIcon: import("./create-pixel-icon.js").PixelIcon;
+//# sourceMappingURL=animated-icons.d.ts.map

package/dist/animated-icons.d.ts.map

@@ -0,0 +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"}