@wandelbots/icons

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

Icons are owned by the design department. The artwork comes from Figma and is generated into this package — don't hand-author, patch, or locally override an icon. Missing one? Request it from the design department.

Installation

pnpm add @wandelbots/icons

Usage

import { HomeFilled } from "@wandelbots/icons/HomeFilled"
import { Robot } from "@wandelbots/icons/Robot"
import { Jog } from "@wandelbots/icons/Jog"

function App() {
  return (
    <nav>
      <HomeFilled size={20} />
      <Robot size={20} className="text-blue-500" />
      <Jog /> {/* 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). These are real entry points — check src/svg/ or the gallery before writing an import, as the name must match a shipped file:

| SVG file | Import path | | --- | --- | | home-filled.svg | @wandelbots/icons/HomeFilled | | robot.svg | @wandelbots/icons/Robot | | jog.svg | @wandelbots/icons/Jog | | robot-xyaxis.svg | @wandelbots/icons/RobotXyaxis | | robot-coordinate-system.svg | @wandelbots/icons/RobotCoordinateSystem |

Adding icons

From Figma

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

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.