@2hoch1/pixel-icon-library-react 1.0.2 → 1.1.0-rc

package/LICENSE

@@ -19,7 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-Note: Icon assets and original designs are credited to HackerNoon and the
-Pixel Icon Library project. This package is a React wrapper fork published
-under the @2hoch1 scope.

package/README.md

@@ -1,155 +1,101 @@
-# @2hoch1/pixel-icon-library-react
-
-React components for [Pixel Icon Library](https://pixeliconlibrary.com) - pixelated icons that you can easily import as React components, just like [lucide-react](https://lucide.dev).
-
-## Installation
-
-```bash
-npm install @2hoch1/pixel-icon-library-react react
-# or
-yarn add @2hoch1/pixel-icon-library-react react
-# or
-pnpm add @2hoch1/pixel-icon-library-react react
-```
-
-## Usage
-
-```tsx
-import React from 'react';
-import { AlertTriangle, RotateCw, Home, AlertTriangleSolid, HomeBrands } from '@2hoch1/pixel-icon-library-react';
-
-export function MyComponent() {
-  return (
-    <div>
-      {/* Regular variant (default) */}
-      <AlertTriangle size={24} color="currentColor" />
-      
-      {/* Solid variant */}
-      <AlertTriangleSolid size={24} />
-      
-      {/* Brands variant */}
-      <HomeBrands size={24} />
-      
-      {/* Custom size and color */}
-      <RotateCw size={32} color="blue" strokeWidth={2} />
-    </div>
-  );
-}
-```
-
-## Icon Variants
-
-The library provides 4 variants for most icons:
-
-- **Regular** (default): `<AlertTriangle />`
-- **Solid**: `<AlertTriangleSolid />`
-- **Brands**: `<AlertTriangleBrands />`
-- **Purcats**: `<AlertTrianglePurcats />`
-
-## Component Props
-
-All icon components support the following props:
-
-```typescript
-interface PixelIconProps extends SVGAttributes<SVGSVGElement> {
-  /**
-   * Icon size in pixels
-   * @default 24
-   */
-  size?: string | number;
-
-  /**
-   * Icon color
-   * @default 'currentColor'
-   */
-  color?: string;
-
-  /**
-   * Stroke width
-   * @default 2
-   */
-  strokeWidth?: string | number;
-
-  /**
-   * Whether stroke width should be absolute regardless of size
-   * @default false
-   */
-  absoluteStrokeWidth?: boolean;
-}
-```
-
-## Available Icons
-
-The library includes **450+ pixelated icons** organized by category:
-
-- **Regular**: 190 icons
-- **Solid**: 190 icons
-- **Brands**: 47 icons
-- **Purcats**: 23 icons
-
-Browse all available icons at [pixeliconlibrary.com](https://pixeliconlibrary.com)
-
-## Examples
-
-### With Tailwind CSS
-
-```tsx
-import { Home, Settings, Users } from '@2hoch1/pixel-icon-library-react';
-
-export function Navigation() {
-  return (
-    <nav className="flex gap-4">
-      <Home className="w-6 h-6" />
-      <Settings className="w-6 h-6" />
-      <Users className="w-6 h-6" />
-    </nav>
-  );
-}
-```
-
-### With Custom Styling
-
-```tsx
-import styled from 'styled-components';
-import { AlertTriangle } from '@2hoch1/pixel-icon-library-react';
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #ff6b6b;
-`;
-
-export function ErrorMessage() {
-  return (
-    <IconWrapper>
-      <AlertTriangle size={24} />
-      <span>An error occurred!</span>
-    </IconWrapper>
-  );
-}
-```
-
-### TypeScript Support
-
-Full TypeScript support is included out of the box:
-
-```tsx
-import type { PixelIcon } from '@2hoch1/pixel-icon-library-react';
-
-const iconMap: Record<string, PixelIcon> = {
-  home: Home,
-  settings: Settings,
-  users: Users,
-};
-```
-
-## Credits
-
-- Icons: Created by [HackerNoon](https://hackernoon.com) — see the original [Pixel Icon Library](https://pixeliconlibrary.com) and [@hackernoon](https://github.com/hackernoon).
-- React wrapper: Published as a fork under `@2hoch1/pixel-icon-library-react`.
-
-## License
-
-MIT © [HackerNoon](https://hackernoon.com)
-MIT © [2hoch1](https://github.com/2hoch1/pixel-icon-library/tree/main/packages/pixel-icon-library-react)
+# @2hoch1/pixel-icon-library-react
+
+React components for the [Pixel Icon Library][pixel-icon-library] - a set of pixelated icons that can be easily imported and used as React components.
+
+Icons are pulled directly from `@hackernoon/pixel-icon-library` at build time. This ensures that every release always includes the latest upstream SVGs without requiring manual pre-generation of components.
+
+## Installation
+
+```bash
+npm install @2hoch1/pixel-icon-library-react react
+# or
+yarn add @2hoch1/pixel-icon-library-react react
+# or
+pnpm add @2hoch1/pixel-icon-library-react react
+```
+
+## Usage
+
+<!--prettier-ignore-start-->
+
+```tsx
+import {
+  AdIcon, AlertTriangleSolidIcon, HeartIcon,
+} from "@2hoch1/pixel-icon-library-react";
+
+export function MyComponent() {
+  return (
+    <div>
+      <HeartIcon size={24} />
+      <AlertTriangleSolidIcon size={32} color="red" />
+      <AdIcon width={48} height={48} />
+    </div>
+  );
+}
+```
+
+### Dynamic Icon Component
+
+`PixelIcon` resolves icons dynamically at runtime from the upstream package. Unknown names or failed imports are safely ignored and render `null`.
+
+```tsx
+import { PixelIcon } from "@2hoch1/pixel-icon-library-react";
+
+export function DynamicExample() {
+  return (
+    <div>
+      {/* Regular variant (default) */}
+      <PixelIcon name="heart" size={24} />
+
+      {/* Solid variant - automatically detected from name */}
+      <PixelIcon name="alert-triangle-solid" size={24} />
+
+      {/* Or specify variant explicitly */}
+      <PixelIcon name="alert-triangle" variant="solid" size={24} />
+    </div>
+  );
+}
+```
+
+### Code Splitting with Dynamic Imports
+
+If you want to lazy load icons yourself, `dynamicIconImports` exposes per-icon importers:
+
+```tsx
+import { Suspense, lazy, useMemo } from "react";
+import dynamicIconImports from "@2hoch1/pixel-icon-library-react/dynamicIconImports";
+
+function Icon({ name, ...props }) {
+  const LazyIcon = useMemo(() => lazy(dynamicIconImports[name]), [name]);
+
+  return (
+    <Suspense fallback={<div style={{ width: 24, height: 24 }} />}>
+      <LazyIcon {...props} />
+    </Suspense>
+  );
+}
+
+export function LazyLoadedIcon() {
+  return <Icon name="heart" size={24} />;
+}
+```
+
+<!--prettier-ignore-end-->
+
+You can browse all available icons on the [Pixel Icon Library][pixel-icon-library] website.
+
+## Credits
+
+- **Icons**: Created by [HackerNoon][hackernoon] - see the original [Pixel Icon Library][pixel-icon-library]
+- **React wrapper**: Created by [2hoch1][react-wrapper-repo] - inspired by lucide-react's excellent architecture.
+
+## License
+
+This project is licensed under the [MIT License][license].  
+For the icon license, please refer to the original [Pixel Icon Library][pixel-icon-library-repo] repository.
+
+[pixel-icon-library]: https://pixeliconlibrary.com/
+[hackernoon]: https://hackernoon.com/
+[pixel-icon-library-repo]: https://github.com/hackernoon/pixel-icon-library
+[react-wrapper-repo]: https://github.com/2hoch1/pixel-icon-library-react
+[license]: LICENSE