dazpixel

Pixel art SVG icon library for React.

Installation

npm install dazpixel
# or
pnpm add dazpixel

Usage

import { ArrowRight, Star } from 'dazpixel';

// Default 16px
<ArrowRight />

// Custom size via prop
<Star size={32} />

// Custom color via CSS
<ArrowRight style={{ color: '#ff6b6b' }} />

// With Tailwind — CSS size overrides the size prop
<Star className="w-8 h-8 text-blue-500" />

Why crispEdges

All icons use shape-rendering="crispEdges" so they stay sharp at any size, not just 16px. Every SVG coordinate is an integer aligned to whole pixels, giving you true pixel art rendering without anti-aliasing blur. This means icons look crisp whether you display them at 16px, 32px, or 128px.

Contributing a new icon

1. Create the component at src/icons/MyIcon.tsx using IconBase:

   import { IconBase } from '../IconBase';
   import type { IconProps } from '../types';
   
   export function MyIcon(props: IconProps) {
     return (
       <IconBase {...props}>
         <rect x={6} y={2} width={2} height={2} />
         {/* more rects ... */}
       </IconBase>
     );
   }

2. All SVG coordinates must be whole numbers — no decimals.

3. viewBox is always 0 0 16 16 (handled by IconBase).

4. Export from src/icons/index.ts:

   export { MyIcon } from './MyIcon';

5. Run pnpm build and verify it renders on the web app.

6. Naming convention: PascalCase, descriptive noun (e.g. ChevronDown, not Arrow2).