@brd-ui-kit/phosphor-strokes-icons

Phosphor stroke icon components for React, packaged with a Lucide-like import model:

• static icon imports for maximum tree-shaking
• optional by-name API
• optional dynamic loading API

Install

npm i @brd-ui-kit/phosphor-strokes-icons

Peer dependency:

• react ^18 || ^19

Usage

1) Static imports (recommended)

import { Gear, User } from "@brd-ui-kit/phosphor-strokes-icons";

export function Example() {
  return (
    <div>
      <Gear size={24} />
      <User size={20} strokeWidth={1.5} />
    </div>
  );
}

You can also import a single icon subpath:

import { Gear } from "@brd-ui-kit/phosphor-strokes-icons/icons/Gear";

2) By-name API

import { Icon } from "@brd-ui-kit/phosphor-strokes-icons/by-name";

export function Example() {
  return <Icon name="gear" size={24} />;
}

3) Dynamic loading

import { loadIconByName } from "@brd-ui-kit/phosphor-strokes-icons/dynamic";

export async function getIcon() {
  const IconComponent = await loadIconByName("gear");
  return IconComponent;
}

Props

Each icon component supports standard SVG props plus:

• size?: string | number
• color?: string
• strokeWidth?: string | number
• absoluteStrokeWidth?: boolean

Defaults:

• size = 24
• color = "currentColor"
• strokeWidth = 1.5
• absoluteStrokeWidth = true

size can be number (px) or CSS length string ("1rem", "24px").

Scripts

• npm run generate — generate icon components from src/raw-svg
• npm run check — TypeScript validation
• npm run build — generate + tsup build
• npm run pack:dry — inspect npm package before publish

Publish Checklist

1. npm run check
2. npm run build
3. npm run pack:dry
4. npm login
5. npm publish --access public