Dottt Icons

A TypeScript icon library with tree-shaking support.

Features

• Full TypeScript support
• Tree-shakeable imports
• Optional props with sensible defaults
• Accessibility built-in
• Auto-generated exports

Installation

npm install dottt

Usage

Individual imports (recommended)

import { Home, Mail } from "dottt";

function MyComponent() {
  return (
    <div>
      <Home />
      <Mail size={32} color="#3b82f6" className="nav-icon" />
    </div>
  );
}

Bundle import

import { Home, Mail } from "dottt";

Props

interface IconProps extends SVGProps<SVGSVGElement> {
  size?: number | string;    // default: 24
  color?: string;            // default: "currentColor"
}

All standard SVG props are supported (className, style, onClick, etc.).

Development

Adding icons

1. Add SVG files to the svgs/ directory
2. Run pnpm svgr to generate components
3. Run pnpm build to build the package

Scripts

• pnpm svgr - Convert SVGs to React components
• pnpm transform - Transform existing components
• pnpm generate-exports - Generate package exports
• pnpm build - Build the library
• pnpm dev - Build in watch mode

Bundle optimization

• ES modules for tree-shaking
• Individual exports for each icon
• TypeScript declarations included
• Source maps for debugging

Accessibility

Icons include role="img" and aria-hidden="true" by default.

Available icons

AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Home, Landmark, Loader, LogOut, Mail, MailCheck, Rows5, Search, Settings, Trash, TrendingDown, TrendingUp, Trophy, X

License

ISC