@wandelbots/icons

Tree-shakeable React SVG icon components for the Wandelbots Nova Design System.

Installation

pnpm add @wandelbots/icons

Usage

import { Home } from "@wandelbots/icons/Home"
import { Robot } from "@wandelbots/icons/Robot"
import { Jogging } from "@wandelbots/icons/Jogging"

function App() {
  return (
    <nav>
      <Home size={20} />
      <Robot size={20} className="text-blue-500" />
      <Jogging /> {/* defaults to 24px */}
    </nav>
  )
}

Each icon is a typed React component accepting all standard SVGProps<SVGSVGElement> plus a size prop:

interface IconProps extends SVGProps<SVGSVGElement> {
  size?: number | string // defaults to 24
}

Icons use currentColor for fill — they inherit the text color of their parent element.

Available icons

Browse all icons with a search/filter UI in the icon gallery.

Or run the showcase locally:

cd packages/showcase && pnpm docs:dev

Or import them by name (PascalCase, derived from the SVG filename):

| SVG file | Import path | | --- | --- | | home.svg | @wandelbots/icons/Home | | robot.svg | @wandelbots/icons/Robot | | axis-x.svg | @wandelbots/icons/AxisX | | jog-plus.svg | @wandelbots/icons/JogPlus | | orientation-coord-system.svg | @wandelbots/icons/OrientationCoordSystem |

Adding icons

From Figma (recommended)

1. Run the WB Tokens Export plugin → click Export Icons.
2. The plugin pushes SVGs to packages/icons/src/svg/ on a PR branch.

Manually

1. Add a 24×24 SVG to src/svg/<kebab-case-name>.svg using currentColor for fills.
2. Run pnpm generate to produce the React component.
3. Run pnpm build to produce dist/.

Development

pnpm generate   # SVG → React components (src/generated/)
pnpm build      # generate + bundle to dist/
pnpm typecheck  # verify types

How it works

1. Source SVGs live in src/svg/ (committed, either manually added or pushed by the Figma plugin).
2. scripts/generate.ts reads each SVG, optimizes with SVGO (removes dimensions, converts colors to currentColor), and generates a typed React component in src/generated/.
3. tsdown bundles each component in src/generated/*.tsx → individual files in dist/ (e.g. dist/Home.js, dist/Home.d.ts). No barrel — each icon is its own entry point for optimal tree-shaking.