Semantic icon token system for VS Code - completion, hover, diagnostics, and preview
npm install semiconsSemantic icon token system for VS Code - provides completion, hover, diagnostics, and preview for icon tokens.
- Completion: Auto-complete icon tokens in attributes
- Hover: Show token details on hover with preview command
- Diagnostics: Real-time validation of icon tokens
- Preview: Webview panel preview of icon tokens
- Search: QuickPick search for icon tokens
- VS Code 1.90.0+
- Node.js 20+
``bash`
cd packages/vscode
pnpm install
pnpm build
1. Press F5 to launch Extension Development Hostsemicons.config.ts
2. Open a test workspace with a or run pnpm semicons generate.tsx
3. Test completion, hover, and diagnostics in , .vue, or .astro files
`bash`
pnpm semicons generate
This creates src/icons.generated/registry.json in your workspace.
The extension uses these settings (configurable in VS Code settings):
| Setting | Default | Description |
|---------|---------|-------------|
| semicons.registryPath | src/icons.generated/registry.json | Path to registry.json |semicons.localIconDir
| | icons/local | Directory for local icons |semicons.iconComponentName
| | Icon | Icon component name |
Local icons should be placed in icons/local/ directory:
``
icons/
└── local/
├── menu.svg
├── menu-dark.svg
└── close.svg
Reference them in your registry as local:menu, local:menu-dark, local:close.
In .tsx, .vue, or .astro files:
`tsx`
Type navigation: and select from completion list.
Hover over a token to see:
- Token name
- Asset reference
- A11y label
- Preview command link
Invalid or deprecated tokens are highlighted:
- Error: Token not found or invalid format
- Warning: Deprecated token
Run Semicons: Preview Icon command or click preview link in hover to open webview panel with icon preview.
Run Semicons: Search Token command to search and insert tokens via QuickPick.
| Command | Description |
|---------|-------------|
| semicons.refreshRegistry | Refresh registry from disk |semicons.searchToken
| | Search and insert token |semicons.previewIcon
| | Preview token in webview |
- TypeScript React (.tsx).jsx
- JavaScript React ().vue
- Vue ().astro
- Astro ()
`bash`
pnpm build # Production build
pnpm watch # Development watch mode
1. Press F5 to start Extension Development Host
2. Open test workspace
3. Test features in real-time
``
packages/vscode/
├── package.json # Extension manifest
├── tsconfig.json
├── esbuild.js # Bundler script
├── src/
│ ├── extension.ts # Entry point
│ ├── registry/
│ │ ├── types.ts # Type definitions
│ │ ├── loader.ts # Load registry.json
│ │ ├── cache.ts # Multi-folder cache
│ │ └── watcher.ts # FileSystemWatcher
│ ├── features/
│ │ ├── completion.ts
│ │ ├── hover.ts
│ │ ├── diagnostics.ts
│ │ └── commands.ts
│ ├── views/
│ │ └── previewWebview.ts
│ └── utils/
│ ├── config.ts
│ ├── path.ts
│ └── tokenParse.ts
└── README.md
`bashInstall vsce
npm install -g @vscode/vsce
MIT