@duochat/icons

A clean, customizable SVG icon library for DuoChat — TypeScript-first, tree-shakeable React components, zero runtime dependencies beyond React.

Each icon ships as its own file under dist/ with matching package.json exports subpaths (for example @duochat/icons/SendIcon). The root entry still re-exports every icon for barrel imports.

Installation

npm install @duochat/icons

yarn add @duochat/icons

pnpm add @duochat/icons

bun add @duochat/icons

React (≥ 17) is a peer dependency — make sure it is already in your project.

Local preview (this repo)

After cloning, run npm install, then npm run build:icons (if you changed SVGs), then start the gallery:

npm run preview

Opens a Vite page that lists every generated icon from src/components with search, color, size, and stroke width controls.

Usage

Barrel import (named exports)

Best when you use many icons from one file; bundlers can still tree-shake unused exports in most setups.

import { SendIcon, MessageIcon, MicIcon } from "@duochat/icons";

export default function ChatBar() {
  return (
    <div>
      <MicIcon />
      <MessageIcon size={20} color="#6366f1" />
      <SendIcon size={24} strokeWidth={2} />
    </div>
  );
}

Per-icon import (default export)

Each icon is addressable as @duochat/icons/<ComponentName>. The name matches the React component (PascalCase + Icon suffix, e.g. SendIcon, MicIcon).

import SendIcon from "@duochat/icons/SendIcon";
import MicIcon from "@duochat/icons/MicIcon";

CommonJS:

const SendIcon = require("@duochat/icons/SendIcon");

IconProps and other types stay on the package root:

import type { IconProps } from "@duochat/icons";

Props

Every icon accepts standard SVG props plus these shortcuts:

| Prop | Type | Default | Description | |----------------|----------|-------------------|--------------------------------------------------| | size | number | varies by SVG | Width and height in px | | color | string | "currentColor" | Fill or stroke color (inherits from CSS) | | strokeWidth | number | varies by icon | Stroke width (stroke / mixed icons) |

Any extra prop (for example className, onClick, aria-label) is forwarded to the underlying <svg>.

Available icons

Icons are generated from public/icons/. Every component in src/components/ is exported from @duochat/icons and has a deep import path @duochat/icons/<SameExportName>.

| Component | Barrel import | Per-icon import | |------------------|---------------|-----------------| | MessageIcon | import { MessageIcon } from "@duochat/icons" | import MessageIcon from "@duochat/icons/MessageIcon" | | MicIcon | import { MicIcon } from "@duochat/icons" | import MicIcon from "@duochat/icons/MicIcon" | | PaperclipIcon | import { PaperclipIcon } from "@duochat/icons" | import PaperclipIcon from "@duochat/icons/PaperclipIcon" | | SearchIcon | import { SearchIcon } from "@duochat/icons" | import SearchIcon from "@duochat/icons/SearchIcon" | | SendIcon | import { SendIcon } from "@duochat/icons" | import SendIcon from "@duochat/icons/SendIcon" | | SettingsIcon | import { SettingsIcon } from "@duochat/icons" | import SettingsIcon from "@duochat/icons/SettingsIcon" | | ThumbsUpIcon | import { ThumbsUpIcon } from "@duochat/icons" | import ThumbsUpIcon from "@duochat/icons/ThumbsUpIcon" | | XIcon | import { XIcon } from "@duochat/icons" | import XIcon from "@duochat/icons/XIcon" |

After npm run build, see package.json → exports for the full list of subpaths.

Adding new icons

1. Add your .svg under public/icons/ (prefer a 24×24 viewBox; stroke or fill as exported from your design tool).
2. Run:

npm run build

This regenerates src/components/*.tsx, src/index.ts, package.json exports, and the Rollup output under dist/ (including per-icon .js, .esm.js, and .d.ts files).

Contributing

1. Fork the repo.
2. Add your SVG to public/icons/.
3. Run npm run build to regenerate components and exports.
4. Open a pull request.

Publishing to npm

# One-time: log in to npm
npm login

# Bump version, build, publish
npm version patch   # or minor / major
npm publish --access public

prepublishOnly runs npm run build, which regenerates icons, package.json exports, and dist/ before publish.

License

MIT