Chakra CreateIcon Preview

Preview Chakra UI createIcon(...) components without running the application or executing workspace code.

Features

• Real icon thumbnails in the editor gutter beside declarations and JSX usages.
• Larger previews when hovering over an imported icon component name, including named aliases and namespace imports.
• A searchable workspace gallery with preview, insert, copy SVG, and open-source actions.
• A focused preview panel with checkerboard background, metadata, and copy actions.
• Open With → Chakra Icon Preview for files inside an icons directory.
• Automatic refresh when matching icon files change.
• Light- and dark-theme-aware rendering for currentColor icons.

The parser supports static Chakra definitions such as:

export const AddIcon = createIcon({
  displayName: "AddIcon",
  viewBox: "0 0 12 12",
  path: <path d="M1 6h10" stroke="currentColor" strokeWidth="2" />,
  defaultProps: { fill: "none" },
});

It handles fragments, paths, groups, shapes, gradients, masks, filters, definitions, animations, numeric JSX values, static style objects, and file-local string/number constants.

Install locally

Build the VSIX:

cd tools/vscode-chakra-icon-preview
npm install
npm run check
npm run package

Then open VS Code's Extensions view, choose Views and More Actions… → Install from VSIX…, and select the generated chakra-create-icon-preview-0.1.0.vsix file.

You can also install it from a terminal:

code --install-extension chakra-create-icon-preview-0.1.0.vsix

Commands

• Chakra Icons: Browse Gallery
• Chakra Icons: Preview Icon
• Chakra Icons: Copy SVG
• Chakra Icons: Copy JSX
• Chakra Icons: Copy Component Name
• Chakra Icons: Copy Import Statement
• Chakra Icons: Refresh Index

The gallery's Insert action inserts <IconName /> at the last active text-editor cursor. It deliberately does not guess or rewrite imports.

Configuration

{
  "chakraIconPreview.include": ["**/icons/**/*.{ts,tsx,js,jsx}"],
  "chakraIconPreview.exclude": "**/{node_modules,.git,dist,out,.next}/**",
  "chakraIconPreview.gutter.enabled": true,
  "chakraIconPreview.hover.enabled": true,
  "chakraIconPreview.previewColor": "theme"
}

Use "theme" to follow VS Code's active light/dark theme, or provide a fixed SVG color such as "#71717a".

If your icon components live outside an icons directory, add their workspace glob to chakraIconPreview.include. The custom Open With editor is intentionally limited to files under an icons directory; hover, gutter, gallery, and commands honor the configurable include globs.

Static-preview boundary

The extension parses TSX with the TypeScript compiler API and serializes an allowlisted SVG subset. It never imports or executes workspace modules.

Dynamic expressions, imported geometry, component-valued paths, and runtime theme calculations are omitted and reported as a partial preview. Event attributes, scripts, foreignObject, and unsupported elements are not emitted into preview SVGs.

Development

Open tools/vscode-chakra-icon-preview as a VS Code folder, run npm install, and press F5 to start an Extension Development Host.

Useful checks:

npm test
npm run compile
npm run audit:workspace

audit:workspace is tailored to this repository. It verifies that every icon under src/components/element/icons is statically recognized and that imported JSX usages resolve to exactly one indexed icon.