Lord Icon Preview Extension

A Visual Studio Code extension that provides instant preview of Lord Icons by detecting icon IDs in your code. Support for JavaScript, TypeScript, HTML, JSX, and TSX files with automatic 8-character alphanumeric ID detection.

✨ Features

🔍 Hover Preview: Instantly preview Lord Icons by hovering over 8-character icon IDs
🖱️ Context Menu: Right-click on selected text to preview icons
⌨️ Keyboard Shortcut: Use Ctrl+Shift+I (or Cmd+Shift+I on Mac) to preview selected icons
🖼️ Interactive Webview: Full-size icon viewer with size controls and animation triggers
📄 Multi-language Support: Works with JavaScript, TypeScript, HTML, JSX, and TSX files
🤖 Automatic Detection: Zero configuration - automatically detects valid 8-character alphanumeric IDs
📏 Size Controls: Adjust preview size (60px, 120px, 200px, 300px)
🎬 Animation Controls: Play, pause, and trigger icon animations
📋 Copy Functionality: Copy HTML code examples and CDN URLs
🎨 Professional Icon: Custom extension icon with crown and magnifying glass

🚀 Quick Start

Install the extension from the VS Code Marketplace
Open any supported file (JS, TS, HTML, JSX, TSX)
Add a Lord Icon ID (e.g., lftzgwgx) to your code
Hover over the ID to see an instant preview
Right-click for full-size view with controls

📖 Usage

Hover Preview

const icons = {
    home: 'lftzgwgx',      // ← Hover here for instant preview
    search: 'warimioc',    // ← Works with any 8-character ID
    profile: 'rpviwvwn'    // ← Detects quoted and unquoted IDs
};

Select an 8-character icon ID in your editor
Right-click → "Preview Lordicon"
Interactive webview opens with full controls

Keyboard Shortcut

Windows/Linux: Ctrl+Shift+I
Mac: Cmd+Shift+I

🎯 Supported File Types

JavaScript (.js)
TypeScript (.ts)
HTML (.html)
JSX (.jsx)
TSX (.tsx)

🛠️ Development

Prerequisites

Node.js (v16 or higher)
npm (v7 or higher)
Visual Studio Code

Setup

# Clone the repository
git clone https://github.com/phelliperodrigues/lordicon-preview.git
cd lordicon-preview

# Install dependencies
npm install

# Compile the extension
npm run compile

# Open in VS Code
code .

Testing

Press F5 to open Extension Development Host
Open example files in examples/ folder
Test hover, context menu, and keyboard shortcuts

Building

# Compile TypeScript
npm run compile

# Build VSIX package
npx vsce package

📁 Project Structure

lordicon-preview/
├── src/
│   └── extension.ts         # Main extension logic
├── examples/
│   ├── example.js          # JavaScript example
│   ├── example.ts          # TypeScript example
│   └── example.html        # HTML example
├── package.json            # Extension manifest
├── tsconfig.json           # TypeScript configuration
├── icon.png               # Extension icon (128x128)
├── icon.svg               # Icon source file
├── CHANGELOG.md           # Version history
├── CONTRIBUTING.md        # Contribution guidelines
└── README.md              # This file

🔧 Technical Details

Icon Detection

Pattern: ^[a-zA-Z0-9]{8}$
Supports: Quoted and unquoted IDs
CDN: https://cdn.lordicon.com/{iconId}.json

Extension API

vscode.languages.registerHoverProvider
vscode.window.createWebviewPanel
vscode.commands.registerCommand

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Contribution Steps

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

🐛 Issues

Found a bug or have a feature request? Please open an issue with:

Clear description of the problem
Steps to reproduce
Expected vs actual behavior
VS Code version and OS

📝 Changelog

See CHANGELOG.md for version history and release notes.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Lord Icons for providing the amazing icon library
Visual Studio Code for the excellent extension API
The open source community for inspiration and support

Made with ❤️ for the developer community

Report Bug · Request Feature · Contribute

Lord Icon Preview

Phellipe Rodrigues