more v2 updates

Author: halfmage

README.md

@@ -1,55 +1,143 @@
 ![Pixelarticons Cover](cover.jpg "Pixelarticons Cover")
-# Pixelarticons
 
-![npm](https://img.shields.io/npm/v/pixelarticons.svg?color=green&label=npm&style=popout-square)
-![npm](https://img.shields.io/npm/dt/pixelarticons.svg?color=blue&style=popout-square)
+# Pixelarticons
 
-486 carefully handmade pixel art icons based on a 24×24 grid using `fill="currentColor"`. Each icon is drawn on the pixel grid without anti-aliasing for a crisp, consistent look. Use at 24px, 48px, 72px, or 96px for best results — other sizes will appear blurry.
+[![npm version](https://img.shields.io/npm/v/pixelarticons.svg?color=black&label=npm&style=flat-square)](https://www.npmjs.com/package/pixelarticons)
+[![npm downloads](https://img.shields.io/npm/dt/pixelarticons.svg?color=black&style=flat-square)](https://www.npmjs.com/package/pixelarticons)
+[![License: MIT](https://img.shields.io/badge/license-MIT-black.svg?style=flat-square)](LICENSE)
 
-## Get the icons
+**800 handcrafted pixel art icons** — drawn on a strict 24×24 grid, no anti-aliasing, pure `<path>` elements, `fill="currentColor"`. Works with React, as raw SVGs, via CDN, or as a webfont.
 
-- [🌐 Pixelarticons website](https://pixelarticons.com "Pixelarticons - Website")
+- [🌐 Browse all icons](https://pixelarticons.com)
 - [🎨 Figma community file](https://www.figma.com/community/file/952542622393317653/Pixelarticons)
-- Use them directly in your code: 👇
 
-## Getting Started
+---
 
-### Install via package manager
+## Installation
 
 ```bash
-npm i pixelarticons
+npm install pixelarticons
+```
+
+---
+
+## Usage
+
+### React
+
+Every icon ships as a ready-to-use React component with full TypeScript types.
+
+```jsx
+import { Heart, ArrowLeft, AddBox } from 'pixelarticons/react'
+
+export default function App() {
+  return (
+    <div>
+      <Heart width={48} height={48} />
+      <ArrowLeft className="text-blue-500" />
+      <AddBox style={{ color: 'red' }} />
+    </div>
+  )
+}
+```
+
+Components accept all standard SVG props (`width`, `height`, `className`, `style`, `onClick`, …). The default size is `24×24`. For the sharpest rendering use multiples of 24: **24px, 48px, 72px, 96px**.
+
+**Tree-shakeable per-icon imports** keep bundles small:
+
+```jsx
+import { Heart } from 'pixelarticons/react/Heart'
+```
+
+Icon names follow **PascalCase** matching their SVG filename (`arrow-left.svg` → `ArrowLeft`). Icons whose names start with a digit are prefixed with `Icon` (e.g. `4g.svg` → `Icon4G`).
+
+---
+
+### Raw SVG
+
+The `svg/` directory contains every icon as a standalone file — drop them directly into any project:
+
+```html
+<img src="node_modules/pixelarticons/svg/heart.svg" width="48" height="48" />
+```
+
+Or inline them for CSS color control:
+
+```html
+<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
+  <!-- paste path data from svg/heart.svg -->
+</svg>
 ```
 
-### Use directly via unpkg
+---
+
+### CDN (no install)
+
+Use any icon directly via [unpkg](https://unpkg.com) without installing anything:
 
 ```html
-<img src="https://unpkg.com/pixelarticons@latest/svg/file.svg" />
+<img src="https://unpkg.com/pixelarticons@latest/svg/heart.svg" width="48" />
 ```
 
-Replace `file` with any icon name (e.g. `heart`, `arrow-left`, `add-box`).
+Replace `heart` with any icon name (kebab-case, e.g. `arrow-left`, `add-box`, `zoom-in`).
+
+---
 
-### Generate webfonts
+### Webfont
 
-Outputs `.ttf`, `.woff`, `.woff2`, `.eot`, `.svg` fonts plus CSS/SCSS/React components into `./fonts/`:
+Generate `.ttf`, `.woff`, `.woff2`, `.eot`, `.svg` fonts plus CSS/SCSS stylesheets into `./fonts/`:
 
 ```bash
 npm run font
 ```
 
+Link the generated CSS and use icon classes in HTML:
+
+```html
+<link rel="stylesheet" href="fonts/pixelarticons.css" />
+<i class="pixel-heart"></i>
+```
+
+---
+
+## Unlock all 2000+ icons
+
+The free package includes 800 icons. If you purchased a license, run the upgrade command to unlock the full icon set:
+
+```bash
+npx pixelarticons upgrade --key=YOUR_LICENSE_KEY
+```
+
+This verifies your license and downloads all icons directly into your local `svg/` directory — no extra setup needed.
+
+You can find your license key in your **Gumroad library** or in the **purchase confirmation email** you received from Gumroad.
+
+---
+
 ## Contributing
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for design rules, naming conventions, and how to add new icons.
+Contributions are welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for the full design rules and naming conventions. The short version:
+
+- `viewBox="0 0 24 24"`, `<path>` elements only, `fill="currentColor"`
+- Paths must align to the pixel grid — no sub-pixel coordinates
+- Filenames use kebab-case describing function, not appearance
 
-Useful commands when working on icons:
+**Useful commands:**
 
 ```bash
 npm run validate   # check all SVGs against design rules
 npm run browser    # preview all icons in a local HTML file
 ```
 
-## Where to find us
+---
+
+## Links
 
-- [Website](https://www.pixelarticons.com "Pixelarticons - Website")
-- [Instagram](https://www.instagram.com/pixelarticons/ "Pixelarticons - Instagram")
-- [NPM](https://www.npmjs.com/package/pixelarticons "Pixelarticons - NPM")
+- [Website](https://pixelarticons.com)
+- [Instagram](https://www.instagram.com/pixelarticons/)
+- [NPM](https://www.npmjs.com/package/pixelarticons)
 - [GitHub Issues](https://github.com/halfmage/pixelarticons/issues)
+
+---
+
+MIT © [Gerrit Halfmann](https://github.com/halfmage)

bin/pull.js bin/upgrade.jsbin/pull.js renamed to bin/upgrade.js

@@ -45,7 +45,7 @@ function spinner(text) {
 const keyArg = process.argv.slice(2).find((a) => a.startsWith('--key='));
 
 if (!keyArg || !keyArg.slice('--key='.length).trim()) {
-  console.error('Usage: npx pixelarticons pull --key=YOUR_LICENSE_KEY');
+  console.error('Usage: npx pixelarticons upgrade --key=YOUR_LICENSE_KEY');
   process.exit(1);
 }
 
@@ -91,7 +91,13 @@ postJSON(VERIFY_URL, { licenseKey })
   .then(({ tmpFile, s2 }) => {
     execSync(`unzip -o "${tmpFile}" -d "${svgDir}"`, { stdio: 'ignore' });
     fs.unlinkSync(tmpFile);
-    s2.succeed('Upgraded — All icons are now available!\n');
+    s2.succeed('Icons downloaded');
+
+    const root = path.join(__dirname, '..');
+    const s3 = spinner('Generating React components...');
+    execSync('npm run generate:react', { cwd: root, stdio: 'ignore' });
+    execSync('npm run build:react', { cwd: root, stdio: 'ignore' });
+    s3.succeed('Done — All 2000+ icons are now available as SVGs and React components!\n');
   })
   .catch((err) => {
     process.stderr.write(`\r${RED}✗${RESET} ${err.message}\n`);

cover.jpg

@@ -7,7 +7,7 @@
     "react": ">=16"
   },
   "bin": {
-    "pixelarticons": "bin/pull.js"
+    "pixelarticons": "bin/upgrade.js"
   },
   "scripts": {
     "font": "svgtofont --sources ./svg --output ./fonts",