Reference

CLI Reference

The StateGlyph CLI copies editable component source files into your project. Own the code — customize it however you need.

Overview

The CLI is an alternative to installing @stateglyph/react as a dependency. Instead of importing from a package, the CLI generates editable TypeScript component files directly in your project. This is useful when you want to customize icons or avoid adding a runtime dependency.

Requirements

•react and lucide-react installed in the receiving project
•Node.js 18 or newer
•No installation required — runs via npx

Commands

`list`

List all available icon names.

Terminal

$ npx @stateglyph/cli list
StateGlyph — 55 icons
  wifi                   Wi-Fi (3 states)  bluetooth              Bluetooth (3 states)  ethernet               Ethernet (2 states)  cellular               Cellular signal (3 states)  lock                   Lock (2 states)  visibility             Visibility (2 states)  shield                 Protection (3 states)  authentication         Authentication (3 states)  theme                  Theme (3 states)  brightness             Brightness (3 states)  contrast               Contrast (3 states)  tool                   Editing tool (3 states)  text-format            Text format (3 states)  alignment              Text alignment (4 states)  folder                 Folder (3 states)  file-access            File access (3 states)  archive                Archive (2 states)  link                   Link (3 states)  weather                Weather (4 states)  daylight               Daylight (4 states)  temperature            Temperature (3 states)  task                   Task (4 states)  priority               Priority (3 states)  pin                    Pin (2 states)  upload                 Upload (4 states)  download               Download (4 states)  save                   Save (4 states)  delete                 Delete (4 states)  refresh                Refresh (4 states)  sync                   Sync (4 states)  send                   Send (4 states)  payment                Payment (4 states)  add-to-cart            Add to cart (4 states)  submit                 Submit (4 states)  install                Install (4 states)  publish                Publish (4 states)  play-pause             Play and pause (2 states)  playback               Playback (4 states)  volume                 Volume (2 states)  microphone             Microphone (2 states)  camera                 Camera (2 states)  fullscreen             Fullscreen (2 states)  repeat                 Repeat (2 states)  shuffle                Shuffle (2 states)  menu                   Menu (2 states)  expand                 Expand (2 states)  sidebar                Sidebar (2 states)  view                   Grid and list (2 states)  chevron-vertical       Vertical chevron (2 states)  chevron-horizontal     Horizontal chevron (2 states)  panel                  Panel (2 states)  copy                   Copy (3 states)  like                   Like (2 states)  bookmark               Bookmark (2 states)  notification           Notification (3 states)

`add <name...>`

Copy one or more icon components into your project.

Terminal

$ npx @stateglyph/cli add uploadAdded:  components/stateglyph/upload-state-icon.tsx

`add all`

Copy every available icon component.

Terminal

$ npx @stateglyph/cli add allAdded 55 icon components in components/stateglyph/

Adding multiple icons

Pass multiple icon names to add them in one command:

npx @stateglyph/cli add upload save download

Options

Flag	Default	Description
--dir <path>	components/stateglyph	Target directory for generated files. Will be created if it doesn't exist.
--force	false	Overwrite existing files. By default, existing files are preserved.

npx @stateglyph/cli add upload --dir src/components/icons

npx @stateglyph/cli add upload --force

Generated output

Each generated file is a self-contained component that imports from react for state and animation hooks and lucide-react for SVG rendering. You can edit, extend, or refactor the generated code freely.

Generated component

// Generated file: components/stateglyph/theme-state-icon.tsx// The file includes its own animation renderer and typed state/glyph maps.// Its only runtime dependencies are react and lucide-react.
export type ThemeState = "light" | "dark" | "system";
// Usage after copying the self-contained component:import { ThemeStateIcon } from "./components/stateglyph/theme-state-icon";
<ThemeStateIcon state="dark" duration={300} />

For the full icon list, see Browse icons →