Glide Icons Picker for VSCode

A VSCode extension that embeds the Glide Icons Storybook for easy icon browsing and auto-import functionality.

Features

• Embedded Storybook: Browse 720+ icons in the familiar Storybook interface
• Search & Filter: Use Storybook's built-in search and variant filtering
• Auto-Import: Click any icon to automatically insert it with the import statement
• Configurable URL: Use deployed Storybook or local development instance

Usage

1. Open the Icon Picker:

   • Press Cmd+Shift+I (Mac) or Ctrl+Shift+I (Windows/Linux)
   • Or use Command Palette: Insert Glide Icon

2. Browse and Search:

   • Search for icons using the Storybook search box
   • Filter by variant using the Storybook navigation (All Icons, Stroke Icons, etc.)
   • View all 720+ icons in a beautiful grid layout

3. Select an Icon:

   • Click on any icon in the grid
   • The extension will:
     • Insert <IconName /> at your cursor position
     • Add the import statement at the top of your file: import IconName from "@glideapps/icons/components/IconName"

Configuration

Storybook URL

By default, the extension loads the deployed Storybook at:

https://glide-icons.vercel.app/iframe.html?viewMode=story&id=icon--all-icons

To use a local Storybook instance:

1. Open VSCode Settings (Cmd+,)
2. Search for "Glide Icons"
3. Set Glide Icons: Storybook Url to:

   http://localhost:6006/iframe.html?viewMode=story&id=icon--all-icons
   

4. Run npm run storybook in the /icons repository

Installation

From Source

1. Clone this repository
2. Run npm install
3. Run npm run compile
4. Press F5 in VSCode to launch the extension in a new window

Package as .vsix

npm run package

This creates a .vsix file that you can install:

• Open VSCode
• Go to Extensions view
• Click "..." menu → "Install from VSIX..."
• Select the generated .vsix file

Development

Project Structure

glide-icons-vscode/
├── src/
│   ├── extension.ts      # Main extension (loads Storybook iframe)
│   └── iconInserter.ts   # Icon insertion and import logic
└── package.json          # Extension manifest

Commands

• npm run compile - Compile TypeScript
• npm run watch - Watch mode for development
• npm run package - Package as .vsix

Testing

1. Open the project in VSCode
2. Press F5 to launch Extension Development Host
3. Open any TypeScript/JavaScript/React file
4. Press Cmd+Shift+I to test the icon picker

How It Works

The extension:

1. Loads the Glide Icons Storybook in an iframe
2. Listens for postMessage events from the Storybook when icons are clicked
3. Inserts the selected icon component and import statement into your code

The Storybook handles all icon display, search, and filtering - the extension just provides the VSCode integration.

Requirements

• VSCode 1.85.0 or higher
• Works with React/TypeScript projects using @glideapps/icons

License

MIT