Semicons VS Code Extension

Semantic icon token system for VS Code - provides completion, hover, diagnostics, and preview for icon tokens.

Features

- 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

Requirements

- VS Code 1.90.0+
- Node.js 20+

Installation

$3

``bash
cd packages/vscode
pnpm install
pnpm build
`

$3

1. Press F5 to launch Extension Development Host
2. Open a test workspace with a semicons.config.ts or run pnpm semicons generate
3. Test completion, hover, and diagnostics in .tsx, .vue, or .astro files

Setup

$3

`bash
pnpm semicons generate
`

This creates src/icons.generated/registry.json in your workspace.

$3

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 |

$3

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.

Usage

$3

In .tsx, .vue, or .astro files:

`tsx

`

Type navigation: and select from completion list.

$3

Hover over a token to see:
- Token name
- Asset reference
- A11y label
- Preview command link

$3

Invalid or deprecated tokens are highlighted:
- Error: Token not found or invalid format
- Warning: Deprecated token

$3

Run Semicons: Preview Icon command or click preview link in hover to open webview panel with icon preview.

$3

Run Semicons: Search Token command to search and insert tokens via QuickPick.

Commands

| Command | Description |
|---------|-------------|
| semicons.refreshRegistry | Refresh registry from disk |
| semicons.searchToken | Search and insert token |
| semicons.previewIcon | Preview token in webview |

Supported File Types

- TypeScript React (.tsx)
- JavaScript React (.jsx)
- Vue (.vue)
- Astro (.astro)

Development

$3

`bash
pnpm build # Production build
pnpm watch # Development watch mode
`

$3

1. Press F5 to start Extension Development Host
2. Open test workspace
3. Test features in real-time

$3

`
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
`

Publishing

`bash


Install vsce

npm install -g @vscode/vsce

Package

vsce package

Publish

vsce publish
``

License

MIT