### Icon Button Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
How to create a button that includes an icon and an associated click handler.
```jsx
```
--------------------------------
### Webfont Sizing
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
CSS example for controlling the size of webfont icons.
```css
.icon { font-size: 24px; }
.icon-large { font-size: 48px; }
```
--------------------------------
### Install Pixelarticons via npm
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Install the pixelarticons package using npm. This is the first step to using the icons in your project.
```bash
npm install pixelarticons
```
--------------------------------
### Install React Peer Dependency
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
If you encounter React peer dependency warnings, run `npm install react`. It should typically already be installed in a React project.
```bash
npm install react
```
--------------------------------
### Usage Example for downloadFile
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Shows how to use the `downloadFile` function to download a zip archive from a URL and save it to a local path. Includes basic error handling for the download process.
```javascript
try {
await downloadFile(
'https://example.com/icons-v2.zip',
'/tmp/pixelarticons-v2.zip'
);
console.log('Download complete');
} catch (err) {
console.error('Download failed:', err.message);
}
```
--------------------------------
### Usage Example for postJSON
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Demonstrates how to use the `postJSON` function to send a license key and handle the response, including parsing the JSON body if the request is successful.
```javascript
try {
const { statusCode, body } = await postJSON(
'https://pixelarticons.com/.netlify/functions/verify-license',
{ licenseKey: 'abc123' }
);
if (statusCode === 200) {
const { downloadUrl } = JSON.parse(body);
}
} catch (err) {
console.error('Request failed:', err.message);
}
```
--------------------------------
### React Component Import Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/project-overview.md
Demonstrates how to import individual React components from the pixelarticons library, emphasizing tree-shakeable imports for specific icons.
```javascript
import IconName from "pixelarticons/react/IconName"
```
--------------------------------
### Basic HTML and CSS Integration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
A complete HTML example demonstrating how to link the webfont CSS and use `` tags with appropriate classes to display icons. This is a standard approach for framework-agnostic projects.
```html
```
--------------------------------
### HTML Usage Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Demonstrates how to use the generated icon font in HTML by linking the CSS and using icon classes.
```html
```
--------------------------------
### Generated CSS Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Example of the CSS generated by the svgtofont tool, including @font-face and icon class definitions.
```css
@font-face {
font-family: 'pixelart-icons-font';
src: url('pixelart-icons-font.eot');
src: url('pixelart-icons-font.eot?#iefix') format('embedded-opentype'),
url('pixelart-icons-font.woff2') format('woff2'),
url('pixelart-icons-font.woff') format('woff'),
url('pixelart-icons-font.ttf') format('truetype'),
url('pixelart-icons-font.svg#pixelart-icons-font') format('svg');
font-weight: normal;
font-style: normal;
}
.pixel-{icon-name} {
font-family: 'pixelart-icons-font';
display: inline-block;
font-size: 24px;
/* icon character mapping */
}
```
--------------------------------
### Apply Icons with Different Sizes in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Provides an example of applying different size classes to `` tags to render icons at various scales. This demonstrates the practical application of the CSS sizing rules.
```html
```
--------------------------------
### CSS for Icon Color Inheritance
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Example CSS demonstrating how icons inherit color from their parent text elements using currentColor.
```css
/* Icons inherit color from text */
.red-icon { color: red; }
```
--------------------------------
### Apply Icons with Different Colors in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Shows how to apply color classes to `` tags to render icons in specific colors. This example illustrates the usage of the CSS color rules.
```html
```
--------------------------------
### CDN Usage (unpkg)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
Access icons via a CDN like unpkg without needing npm installation. This is suitable for quick prototypes and small projects, offering HTTP caching but incurring network latency on the first load.
```html
```
--------------------------------
### Preloading Critical Fonts
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Example of using `` to ensure critical webfont files are loaded early in the page lifecycle, improving perceived performance.
```html
```
--------------------------------
### TailwindCSS Integration Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Shows how to apply Pixelarticons within a Tailwind CSS framework by combining the icon class with Tailwind's utility classes for sizing and color.
```html
```
--------------------------------
### Custom .svgtofontrc Configuration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
An example of a customized `.svgtofontrc` file. This demonstrates how to change the font name, CSS font size, and add class name prefixes.
```json
{
"fontName": "my-custom-icons",
"css": {
"fontSize": "32px",
"prefix": ".icon-",
"className": "my-icon"
}
}
```
--------------------------------
### Usage example for spinner function
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Demonstrates how to use the spinner function to provide feedback during an asynchronous operation like license verification. The spinner indicates success or failure based on the operation's outcome.
```javascript
const s = spinner('Verifying license...');
try {
const result = await verifyLicense(key);
s.succeed('License verified');
} catch (err) {
s.fail('License verification failed: ' + err.message);
}
```
--------------------------------
### TypeScript Usage Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Example of using a Pixelarticons React component within a TypeScript functional component, including custom props for size and click handlers.
```typescript
import { Heart } from 'pixelarticons/react'
import React from 'react'
interface Props {
size?: number
onClick?: React.MouseEventHandler
}
const MyIcon: React.FC = ({ size = 24, onClick }) => {
return
}
```
--------------------------------
### Peer Dependency Configuration (React)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Specifies React as a peer dependency, requiring consumers to have React 16.0 or higher installed.
```json
{
"peerDependencies": {
"react": ">=16"
}
}
```
--------------------------------
### Usage example for generateReact function
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Shows how to call the generateReact function with source and output directory paths. The function will process all SVG files in the source directory and generate corresponding React components in the output directory.
```javascript
const svgDir = '/path/to/svg';
const reactDir = '/path/to/react';
generateReact(svgDir, reactDir);
// Creates: /path/to/react/Heart.js, Heart.d.ts, Home.js, Home.d.ts, ..., index.js, index.d.ts
```
--------------------------------
### Conditional Icon Rendering
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Example of rendering different icons based on a boolean condition, such as a lock state.
```jsx
{isLocked ? : }
```
--------------------------------
### SVG File Path Reference in Projects
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
Provides the standard file path for Pixelarticons SVGs when installed via npm. It also shows how build tools might resolve these paths using import statements.
```text
All SVG files are located at:
node_modules/pixelarticons/svg/{kebab-case-name}.svg
When installed via npm, the full path is:
./node_modules/pixelarticons/svg/heart.svg
./node_modules/pixelarticons/svg/home.svg
./node_modules/pixelarticons/svg/alarm-clock.svg
For projects using build tools, relative paths work based on how the tool resolves modules:
// Webpack/Vite with proper configuration
import heart from 'pixelarticons/svg/heart.svg'
```
--------------------------------
### Example SVG File Structure
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
This is the typical structure of a standalone SVG icon file from the Pixelarticons library. It includes the SVG namespace, dimensions, fill color, and viewBox, along with path data.
```xml
```
--------------------------------
### Bootstrap Integration with Webfont
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Combine webfont classes with Bootstrap utility classes for styling. This example uses a heart icon with a size of 2x and danger color.
```html
```
--------------------------------
### Build Tool SVG Import Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
Shows how to import SVG files directly into your JavaScript code when using build tools like Webpack or Vite. The SVG content is typically inlined as a string.
```javascript
import heartSvg from 'pixelarticons/svg/heart.svg'
import lockSvg from 'pixelarticons/svg/lock.svg'
const template = `
`
```
--------------------------------
### Upgrade to Premium Icons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Use the CLI tool to upgrade to premium icons by providing your license key.
```bash
npx pixelarticons upgrade --key=LICENSE_KEY
```
--------------------------------
### Previewing Icons with Interactive Browser Tool
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Run the provided npm script to open an interactive HTML page for previewing and searching all icons.
```bash
npm run browser
```
--------------------------------
### Useful Commands for Development
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Run validation checks against design rules or preview all icons in a local HTML file using these npm scripts.
```bash
npm run validate
```
```bash
npm run browser
```
--------------------------------
### Preview Icons Locally
Source: https://github.com/halfmage/pixelarticons/blob/master/CONTRIBUTING.md
Run this command to generate a local \`icons.html\` file and open it in your browser. This provides a searchable grid of all icons loaded directly from the \`svg/\` directory.
```bash
npm run browser
```
--------------------------------
### SVG File Location
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
The location of individual SVG icon files within the installed package.
```bash
node_modules/pixelarticons/svg/{icon-name}.svg
```
--------------------------------
### Run pixelarticons upgrade CLI
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Invoke the pixelarticons CLI to upgrade your icon library. Replace YOUR_LICENSE_KEY with your actual license key.
```bash
npx pixelarticons upgrade --key=YOUR_LICENSE_KEY
```
--------------------------------
### TypeScript Component Type Declarations
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Example of TypeScript type declarations for generated React components, providing type safety for consumers.
```typescript
import React from 'react';
export declare const ComponentName: (props: React.SVGProps) => JSX.Element;
```
--------------------------------
### List CLI Tool Location
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
The CLI tool for license upgrades is available at `node_modules/.bin/pixelarticons`. Use this for managing licenses.
```text
node_modules/.bin/pixelarticons
```
--------------------------------
### Generated React Component Structure
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Example of how an individual icon component like 'Heart' is structured using React.createElement. Attributes are camelCased and colors are normalized.
```javascript
import React from 'react';
export const Heart = (props) => React.createElement('svg',
Object.assign({
viewBox: '0 0 24 24',
width: '24',
height: '24',
fill: 'currentColor',
xmlns: 'http://www.w3.org/2000/svg'
}, props),
React.createElement('path', {d: "M13 22h-2v-2h2v2Zm-2-2H9v-2h2v2Z", fill: 'currentColor'}),
React.createElement('path', {d: "M11 8h2v4h-2V8Z", fill: 'currentColor'}),
// ... more path elements
);
```
--------------------------------
### Upgrade to Premium Icons (CLI)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Command to upgrade to premium icons using the Pixelarticons CLI tool. Replace YOUR_KEY with your actual license key.
```bash
npx pixelarticons upgrade --key=YOUR_KEY
```
--------------------------------
### CDN Usage for Pixelarticons
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Access icons directly via a CDN like unpkg without any installation. Replace 'heart' with the desired icon name in kebab-case.
```html
```
--------------------------------
### Project Structure Overview
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/project-overview.md
Illustrates the directory layout of the pixelarticons project, highlighting key files and directories such as CLI tools, generation scripts, SVG sources, and generated React components.
```tree
pixelarticons/
├── bin/
│ └── upgrade.js # CLI tool for license key verification and icon upgrade
├── scripts/
│ ├── generate-react.js # Generates React components from SVG files
│ ├── generate-browser.js # Generates interactive HTML preview
│ └── validate-icons.js # SVG validation against design rules
├── svg/ # 813 SVG icon files (24×24 viewBox)
├── react/ # Generated React components (auto-generated)
├── package.json
├── .svgtofontrc # Configuration for webfont generation
└── README.md
```
--------------------------------
### Upgrade to Full Icon Set
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Run the upgrade command with your license key to unlock and download the complete set of 2000+ icons. This command also regenerates React components.
```bash
npx pixelarticons upgrade --key=YOUR_LICENSE_KEY
```
--------------------------------
### Basic Icon Rendering
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import and render multiple icons using their default 24x24 size.
```jsx
import { Heart, Home, Bell } from 'pixelarticons/react'
function MyIcons() {
return (
)
}
```
--------------------------------
### HTML Tag Usage
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
Embed SVG files directly using the `` tag. This method is simple and requires no build setup, but offers limited styling options.
```html
```
--------------------------------
### Listing All Icons via CLI
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Use the command line to list all available SVG icons in the library. This helps in identifying and selecting the correct icon names.
```bash
ls pixelarticons/svg/ | sed 's/\.svg$//' | sort
```
--------------------------------
### Generate Browser HTML Script
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/build-scripts.md
Execute the script to generate an interactive HTML file for previewing icons. This script creates 'icons.html' and opens it in the default browser.
```bash
node scripts/generate-browser.js
open icons.html
```
--------------------------------
### package.json Scripts for Icon Management
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Common npm scripts for managing Pixelarticons, including generation, validation, and preview.
```bash
npm run generate:react # React components from SVG
npm run validate # Check SVG design rules
npm run browser # Interactive icon preview
npm run font # Generate webfonts
```
--------------------------------
### Color Icons Using CSS
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Demonstrates how to change the color of icons by applying the CSS `color` property. Icons inherit text color, allowing for easy customization of their appearance.
```css
.icon-red {
color: #e53935;
}
.icon-blue {
color: #1e88e5;
}
```
--------------------------------
### Browser Caching Control
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Example HTTP header for browser caching. Setting a long `max-age` with `immutable` ensures webfont files are cached effectively, reducing server load and improving load times for repeat visitors.
```http
Cache-Control: public, max-age=31536000, immutable
```
--------------------------------
### Generate Webfont
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Run the npm script to generate webfonts. This is typically used for web design and deployment.
```bash
npm run font
```
--------------------------------
### Tree-shaking for Efficient Bundling
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import specific icons directly from their paths (e.g., `pixelarticons/react/Heart`) to enable tree-shaking and reduce bundle size. This contrasts with importing all icons from `pixelarticons/react`.
```jsx
// Modern bundlers (Webpack 5+, Vite, etc.) eliminate unused icons
import { Heart } from 'pixelarticons/react/Heart' // Only Heart is bundled
import { Home } from 'pixelarticons/react/Home' // Only Home is bundled
// vs.
import * from 'pixelarticons/react' // All 800+ icons bundled (unless unused ones are dropped by bundler)
```
--------------------------------
### Extending SCSS with Custom Mixins
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Illustrates how to import the generated SCSS font file and define custom mixins to easily apply icons with specific styles. This allows for more dynamic icon usage within SCSS projects.
```scss
@import 'fonts/pixelart-icons-font.scss';
// Custom mixin
@mixin icon($name, $size: 24px) {
font-family: 'pixelart-icons-font';
font-size: $size;
color: $name;
display: inline-block;
}
// Usage
.my-button::before {
@include icon('heart', 32px);
}
```
--------------------------------
### CLI License Verification Response
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
The expected JSON response upon successful license key verification (200 OK).
```json
{
"downloadUrl": "https://..."
}
```
--------------------------------
### Usage of SVG Files in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Demonstrates different ways to use SVG icon files in HTML: as an image source, inline, or via a CDN.
```html
```
--------------------------------
### Import All React Components
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import all 800+ components at once for easy access. Use standard SVG props for customization.
```typescript
import * from 'pixelarticons/react'
// Usage: all 800+ components available as named exports
```
--------------------------------
### Valid Icon Component Usages
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/types.md
Demonstrates various ways to use an icon component with different combinations of optional props.
```typescript
// All of these are valid:
// No props
// Size props
// Class prop
// Style prop
// Event handler
// Accessibility prop
// Ref prop
```
--------------------------------
### List Icons via Bash
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Use the `ls` command with `sed` to list all available icon names from the SVG directory. This is useful for programmatic access.
```bash
ls node_modules/pixelarticons/svg/ | sed 's/\.svg$//'
```
--------------------------------
### Pre-publish Hook Configuration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/build-scripts.md
Configures the 'prepublishOnly' NPM script to automatically run the 'generate:react' script before publishing to npm, ensuring components are up-to-date.
```json
{
"scripts": {
"generate:react": "node scripts/generate-react.js",
"prepublishOnly": "npm run generate:react"
}
}
```
--------------------------------
### package.json Build Scripts
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Relevant scripts defined in `package.json` for generating components, validating SVGs, previewing icons, and generating webfonts.
```json
{
"peerDependencies": { "react": ">=16" },
"bin": { "pixelarticons": "bin/upgrade.js" },
"scripts": {
"generate:react": "node scripts/generate-react.js",
"validate": "node scripts/validate-icons.js",
"browser": "node scripts/generate-browser.js && open icons.html",
"font": "svgtofont --sources ./svg --output ./fonts"
}
}
```
--------------------------------
### CLI Upgrade Process
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Steps performed by the `pixelarticons upgrade` command: license verification, icon download, extraction, and React component regeneration.
```markdown
1. Verifies license key
2. Downloads 2000+ additional icons
3. Extracts to `svg/` directory
4. Regenerates React components
```
--------------------------------
### Package Keywords
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Keywords for the npm package, used for discoverability.
```json
[
"pixel",
"pixelart",
"icon",
"icons",
"iconset",
"vector"
]
```
--------------------------------
### Webfont Output Files
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
The output files generated when creating the webfont.
```bash
fonts/pixelart-icons-font.woff2
fonts/pixelart-icons-font.css
```
--------------------------------
### React Component Usage
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Import and use React components for icons. Ensure the 'react' import path is correct.
```jsx
import { Heart } from 'pixelarticons/react'
```
--------------------------------
### Build Script: Generate React Components
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Build script to automatically generate React component files from SVG assets.
```bash
npm run generate:react
```
--------------------------------
### TypeScript Typing for React Icons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Demonstrates how to type a React icon component using TypeScript. Ensure correct imports.
```typescript
import { Heart } from 'pixelarticons/react'
const icon: React.SVGProps =
```
--------------------------------
### Sizing Icons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Render icons at multiples of 24px (e.g., 24px, 48px, 96px) for sharp, pixel-perfect display.
```jsx
import { Heart } from 'pixelarticons/react'
export function SizedIcons() {
return (
<>
{/* Small — 24px (1x) */}
{/* Medium — 48px (2x) */}
{/* Large — 96px (4x) */}
)
}
```
--------------------------------
### License Verification Endpoint
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
This endpoint is used by the CLI tool to verify the provided license key and obtain a download URL for assets.
```APIDOC
## License Verification Endpoint
### Description
This endpoint is used by the CLI tool to verify the provided license key and obtain a download URL for assets.
### Method
POST
### Endpoint
`https://pixelarticons.com/.netlify/functions/verify-license`
### Request Body
- **licenseKey** (string) - Required - The license key for verification.
### Request Example
```json
{
"licenseKey": "string"
}
```
### Response
#### Success Response (200 OK)
- **downloadUrl** (string) - The URL to download the assets.
```
--------------------------------
### Web Components for SVG Integration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/svg-usage.md
Illustrates creating a custom web component to dynamically load and display SVG icons. This approach encapsulates SVG logic and allows for reusable icon elements.
```javascript
class IconButton extends HTMLElement {
connectedCallback() {
const iconName = this.getAttribute('icon')
fetch(`node_modules/pixelarticons/svg/${iconName}.svg`)
.then(r => r.text())
.then(svg => {
this.innerHTML = svg
})
}
}
customElements.define('icon-button', IconButton)
```
```html
```
--------------------------------
### Using Raw SVG Files
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Incorporate icons directly into your project by referencing the SVG files from the 'svg/' directory. This method allows for direct CSS color control when inlining SVGs.
```html
```
```html
```
--------------------------------
### Render Icons in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Shows the basic HTML structure for rendering icons using `` tags with the generated icon classes. This is the standard method for displaying icons on a web page.
```html
```
--------------------------------
### package.json Scripts for Pixelarticons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/INDEX.md
Defines scripts for generating React components, validating icons, creating browser previews, and generating webfonts using svgtofont.
```json
{
"name": "pixelarticons",
"version": "2.1.2",
"main": "index.js",
"peerDependencies": { "react": ">=16" },
"bin": { "pixelarticons": "bin/upgrade.js" },
"scripts": {
"generate:react": "node scripts/generate-react.js",
"validate": "node scripts/validate-icons.js",
"browser": "node scripts/generate-browser.js && open icons.html",
"font": "svgtofont --sources ./svg --output ./fonts"
}
}
```
--------------------------------
### Import Single React Icon (Tree-shakeable)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Import a single icon for better tree-shaking. Use the specific path 'pixelarticons/react/{IconName}'.
```typescript
import { Heart } from 'pixelarticons/react/Heart'
export default function App() {
return
}
```
--------------------------------
### Import All React Icons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Import multiple icons at once for use in React components. Ensure 'pixelarticons/react' is imported.
```typescript
import { Heart, Home, Bell, Mail, Lock } from 'pixelarticons/react'
export default function App() {
return
}
```
--------------------------------
### Check Webfont Path and CORS Headers
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
If the webfont is not loading, verify the CSS file path and ensure CORS headers are correctly configured if loading from a different origin.
```text
Check CSS file path and CORS headers if cross-origin
```
--------------------------------
### Tree-shaking React Components (Less Optimal)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Avoid importing all components from the main package if not needed, as this can lead to larger bundle sizes. Prefer specific icon imports.
```jsx
// ⚠ Less optimal — all 800+ components may be bundled
import { Heart } from 'pixelarticons/react'
```
--------------------------------
### Check Icon Size Multiples for Clarity
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Ensure icon sizes are multiples of 24px (e.g., 24, 48, 72) for optimal clarity and alignment on pixel grids. This prevents blurriness.
```text
Icon size is multiple of 24
```
--------------------------------
### Regenerate Webfonts
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Add new SVG icons and regenerate font files using npm scripts. Ensure the `svg/` directory contains your new icon files.
```bash
# Add new icon to svg/ directory
touch svg/my-new-icon.svg
# Regenerate fonts
npm run font
```
--------------------------------
### Generated React component structure
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Illustrates the structure of a generated React component file, including the import of React and the component definition using React.createElement. It also shows the corresponding TypeScript declaration.
```javascript
import React from 'react';
export const IconName = (props) => React.createElement('svg',
Object.assign({
viewBox: '0 0 24 24',
width: '24',
height: '24',
fill: 'currentColor',
xmlns: 'http://www.w3.org/2000/svg'
}, props),
// ... shape elements as React.createElement calls
);
```
```typescript
import React from 'react';
export declare const IconName: (props: React.SVGProps) => JSX.Element;
```
--------------------------------
### Tree-shaking React Components (Good Practice)
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Import individual icons to enable tree-shaking and reduce bundle size. This ensures only the necessary components are included in your final build.
```jsx
// ✓ Good — only Heart bundled
import { Heart } from 'pixelarticons/react/Heart'
```
--------------------------------
### Use Per-Icon Imports for Build Size
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
To reduce build size, import icons individually (e.g., `import { Heart } from 'pixelarticons/react/Heart'`) instead of importing the entire package.
```jsx
import { Heart } from 'pixelarticons/react/Heart'
```
--------------------------------
### Check CSS File Linking for Webfont
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Verify that the CSS file for the webfont is correctly linked in your project. Incorrect paths can prevent the font from loading.
```text
CSS file linked correctly
```
--------------------------------
### .gitignore File
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/INDEX.md
Lists files and directories that should be ignored by Git, such as dependencies and build artifacts.
```ignore
node_modules/
/react
icons.html
.DS_Store
```
--------------------------------
### Icon Naming Conventions
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Mapping between SVG file names, React component names, and webfont class names. Note the 'Icon' prefix for digit-starting names in React.
```markdown
| SVG File | React | Webfont Class |
|----------|-------|---------------|
| `heart.svg` | `Heart` | `.pixel-heart` |
| `alarm-clock.svg` | `AlarmClock` | `.pixel-alarm-clock` |
| `4g.svg` | `Icon4G` | `.pixel-4g` |
**Rule**: Digit-starting names get `Icon` prefix in React.
```
--------------------------------
### Styling Icons with CSS Classes
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Apply custom styles to icons using CSS modules. Ensure the CSS file is correctly imported and referenced.
```jsx
import { Heart } from 'pixelarticons/react'
import styles from './MyComponent.module.css'
export function StyledIcon() {
return (
)
}
/* MyComponent.module.css */
.iconPrimary {
color: #e53935;
}
```
--------------------------------
### SVG to Font Configuration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
Configures the svgtofont tool, setting the font name and CSS font size.
```json
{
"fontName": "pixelart-icons-font",
"css": {
"fontSize": "24px"
}
}
```
--------------------------------
### Webfont Usage in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
How to include and use the generated webfont icons in an HTML document.
```html
```
--------------------------------
### Using Icons in CSS Pseudo-Elements
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Demonstrates how to use webfont icons within CSS pseudo-elements like ::before and ::after. Ensure you use the correct font-family and the Unicode character for the icon.
```css
.button::before {
content: 'icon'; /* Won't work — font needs Unicode char */
}
/* Better: use character code directly */
.button::before {
font-family: 'pixelart-icons-font';
content: '\e001'; /* Heart icon character */
margin-right: 8px;
}
```
--------------------------------
### Include Webfont Stylesheet in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Demonstrates how to link the generated CSS stylesheet in the HTML `` section. This step is necessary to apply the icon styles to your web page.
```html
```
--------------------------------
### Netlify Function Success Response
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Specifies the JSON structure for a successful response from the Netlify license verification function. It includes a `downloadUrl` string for the icon package.
```json
{
"downloadUrl": "https://example.com/downloads/pixelarticons-v2-xyz.zip"
}
```
--------------------------------
### Using Icons as CSS Background Images
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Shows how to use icons as CSS background images via data URIs. This method is less common for icon fonts.
```css
.icon-bg {
background-image: url('data:image/svg+xml;utf8,');
}
```
--------------------------------
### Basic svgtofont Command
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
A fundamental command to generate webfonts. It specifies the input directory for SVG files and the output directory for the generated font files and stylesheets.
```bash
svgtofont --sources ./svg --output ./fonts
```
--------------------------------
### Using Pixelarticons Webfont
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Link the generated CSS file and use the provided icon classes within HTML elements to display icons.
```html
```
--------------------------------
### HTML Structure for Icon Browser
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/build-scripts.md
Basic HTML structure for the icon browser, including a grid layout for icons and controls for search, size, and color.
```html
Pixelarticons Browser
Pixelarticons — N icons
{SVG content}
heart
```
--------------------------------
### List SVG Files Location
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Locate the source SVG files within the `node_modules/pixelarticons/svg/` directory. This is where the original icon assets are stored.
```text
node_modules/pixelarticons/svg/*.svg
```
--------------------------------
### Import Individual React Components
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import specific icons to enable tree-shaking and reduce bundle size. Each icon is imported from its dedicated path.
```typescript
import { Heart } from 'pixelarticons/react/Heart'
import { Home } from 'pixelarticons/react/Home'
// Usage
```
--------------------------------
### List React Components Location
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Find the generated React components in `node_modules/pixelarticons/react/*.js`. These are the files you import into your React applications.
```text
node_modules/pixelarticons/react/*.js
```
--------------------------------
### NPM Scripts Configuration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/build-scripts.md
Defines NPM scripts for generating React components, validating SVGs, creating an interactive browser preview, and generating webfonts.
```json
{
"scripts": {
"generate:react": "node scripts/generate-react.js",
"validate": "node scripts/validate-icons.js",
"browser": "node scripts/generate-browser.js && open icons.html",
"font": "svgtofont --sources ./svg --output ./fonts",
"prepublishOnly": "npm run generate:react"
}
}
```
--------------------------------
### Minimum Size Constraint
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Icons have a minimum size of 24px to ensure alignment with the pixel grid and maintain legibility.
```text
24px
```
--------------------------------
### Optimal Sizing for React Icons
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Recommended sizing for React icons, using multiples of 24px for optimal rendering. Avoid non-multiples to prevent blurriness.
```jsx
// 1x
// 2x (recommended)
// 3x
// 4x
**Avoid** non-multiples (may blur):
// Not recommended
```
--------------------------------
### CLI License Verification Request
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
The JSON payload structure for verifying a license key via HTTPS POST to the license verification endpoint.
```json
{
"licenseKey": "string"
}
```
--------------------------------
### Color Control via className
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Apply color to icons using CSS classes, typically with utility-first frameworks like Tailwind CSS.
```jsx
```
```
--------------------------------
### Preloading Critical Fonts
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Example of using `` to ensure critical webfont files are loaded early in the page lifecycle, improving perceived performance.
```html
```
--------------------------------
### TailwindCSS Integration Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Shows how to apply Pixelarticons within a Tailwind CSS framework by combining the icon class with Tailwind's utility classes for sizing and color.
```html
```
--------------------------------
### Custom .svgtofontrc Configuration
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
An example of a customized `.svgtofontrc` file. This demonstrates how to change the font name, CSS font size, and add class name prefixes.
```json
{
"fontName": "my-custom-icons",
"css": {
"fontSize": "32px",
"prefix": ".icon-",
"className": "my-icon"
}
}
```
--------------------------------
### Usage example for spinner function
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/cli-upgrade.md
Demonstrates how to use the spinner function to provide feedback during an asynchronous operation like license verification. The spinner indicates success or failure based on the operation's outcome.
```javascript
const s = spinner('Verifying license...');
try {
const result = await verifyLicense(key);
s.succeed('License verified');
} catch (err) {
s.fail('License verification failed: ' + err.message);
}
```
--------------------------------
### TypeScript Usage Example
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Example of using a Pixelarticons React component within a TypeScript functional component, including custom props for size and click handlers.
```typescript
import { Heart } from 'pixelarticons/react'
import React from 'react'
interface Props {
size?: number
onClick?: React.MouseEventHandler
```
--------------------------------
### Project Structure Overview
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/project-overview.md
Illustrates the directory layout of the pixelarticons project, highlighting key files and directories such as CLI tools, generation scripts, SVG sources, and generated React components.
```tree
pixelarticons/
├── bin/
│ └── upgrade.js # CLI tool for license key verification and icon upgrade
├── scripts/
│ ├── generate-react.js # Generates React components from SVG files
│ ├── generate-browser.js # Generates interactive HTML preview
│ └── validate-icons.js # SVG validation against design rules
├── svg/ # 813 SVG icon files (24×24 viewBox)
├── react/ # Generated React components (auto-generated)
├── package.json
├── .svgtofontrc # Configuration for webfont generation
└── README.md
```
--------------------------------
### Upgrade to Full Icon Set
Source: https://github.com/halfmage/pixelarticons/blob/master/README.md
Run the upgrade command with your license key to unlock and download the complete set of 2000+ icons. This command also regenerates React components.
```bash
npx pixelarticons upgrade --key=YOUR_LICENSE_KEY
```
--------------------------------
### Basic Icon Rendering
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import and render multiple icons using their default 24x24 size.
```jsx
import { Heart, Home, Bell } from 'pixelarticons/react'
function MyIcons() {
return (
```
--------------------------------
### Listing All Icons via CLI
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Use the command line to list all available SVG icons in the library. This helps in identifying and selecting the correct icon names.
```bash
ls pixelarticons/svg/ | sed 's/\.svg$//' | sort
```
--------------------------------
### Generate Browser HTML Script
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/build-scripts.md
Execute the script to generate an interactive HTML file for previewing icons. This script creates 'icons.html' and opens it in the default browser.
```bash
node scripts/generate-browser.js
open icons.html
```
--------------------------------
### package.json Scripts for Icon Management
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Common npm scripts for managing Pixelarticons, including generation, validation, and preview.
```bash
npm run generate:react # React components from SVG
npm run validate # Check SVG design rules
npm run browser # Interactive icon preview
npm run font # Generate webfonts
```
--------------------------------
### Color Icons Using CSS
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Demonstrates how to change the color of icons by applying the CSS `color` property. Icons inherit text color, allowing for easy customization of their appearance.
```css
.icon-red {
color: #e53935;
}
.icon-blue {
color: #1e88e5;
}
```
--------------------------------
### Browser Caching Control
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Example HTTP header for browser caching. Setting a long `max-age` with `immutable` ensures webfont files are cached effectively, reducing server load and improving load times for repeat visitors.
```http
Cache-Control: public, max-age=31536000, immutable
```
--------------------------------
### Generate Webfont
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/README.md
Run the npm script to generate webfonts. This is typically used for web design and deployment.
```bash
npm run font
```
--------------------------------
### Tree-shaking for Efficient Bundling
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/react-components.md
Import specific icons directly from their paths (e.g., `pixelarticons/react/Heart`) to enable tree-shaking and reduce bundle size. This contrasts with importing all icons from `pixelarticons/react`.
```jsx
// Modern bundlers (Webpack 5+, Vite, etc.) eliminate unused icons
import { Heart } from 'pixelarticons/react/Heart' // Only Heart is bundled
import { Home } from 'pixelarticons/react/Home' // Only Home is bundled
// vs.
import * from 'pixelarticons/react' // All 800+ icons bundled (unless unused ones are dropped by bundler)
```
--------------------------------
### Extending SCSS with Custom Mixins
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/webfont-guide.md
Illustrates how to import the generated SCSS font file and define custom mixins to easily apply icons with specific styles. This allows for more dynamic icon usage within SCSS projects.
```scss
@import 'fonts/pixelart-icons-font.scss';
// Custom mixin
@mixin icon($name, $size: 24px) {
font-family: 'pixelart-icons-font';
font-size: $size;
color: $name;
display: inline-block;
}
// Usage
.my-button::before {
@include icon('heart', 32px);
}
```
--------------------------------
### CLI License Verification Response
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/configuration.md
The expected JSON response upon successful license key verification (200 OK).
```json
{
"downloadUrl": "https://..."
}
```
--------------------------------
### Usage of SVG Files in HTML
Source: https://github.com/halfmage/pixelarticons/blob/master/_autodocs/QUICK-REFERENCE.md
Demonstrates different ways to use SVG icon files in HTML: as an image source, inline, or via a CDN.
```html