WP Manifestindependent plugin directory
manifest / editor / icon-block-lucide

Icon Block Lucide

Adds Lucide icon set to the Icon Block.

by Edu Wass · github.com/eduwass/icon-block-lucide · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/eduwass/icon-block-lucide/archive/refs/heads/main.zip
Readme github.com/eduwass/icon-block-lucide ↗

Icon Block - Lucide Icons

https://gist.github.com/user-attachments/assets/d8a1f563-875b-4c82-82c3-eee70f812c27

A WordPress plugin that adds the complete Lucide icon library to The Icon Block by Nick Diego.

✨ Features

  • 2,010+ icons from Lucide and Lucide Lab repositories
  • 48 categories for easy organization (medical, accessibility, devices, text, etc.)
  • Searchable keywords from Lucide's official metadata
  • Optimized SVGs for performance using SVGO
  • Auto-generated from official Lucide repositories with proper escaping
  • Fully integrated with Icon Block's category and search system
  • PHP support for use in custom forms and templates (see php-usage.md)

📦 Installation

For WordPress Users

  1. Place this plugin folder in wp-content/plugins/
  2. Activate the plugin in WordPress Admin → Plugins
  3. The icons will automatically appear in the Icon Block
  4. Browse icons by category or search by keyword

For Developers

If you want to regenerate the plugin with the latest icons from Lucide:

npm run build

That's it! This single command will:

  1. ✅ Download the latest icons from Lucide and Lucide Lab repositories
  2. ✅ Install any missing dependencies
  3. ✅ Generate the register.js file with all icons, categories, and metadata
  4. ✅ Optimize all SVGs for performance
  5. ✅ Make the plugin ready to use

🎨 Icon Categories

Icons are organized into 48 categories:

Top Categories by Icon Count

  • Development (275 icons) - Code, git, terminal, debugging
  • Text (273 icons) - Typography, formatting, editing
  • Arrows (215 icons) - Directional indicators, navigation
  • Devices (196 icons) - Electronics, hardware, gadgets
  • Gaming (195 icons) - Controllers, consoles, esports
  • Files (176 icons) - Documents, folders, storage
  • Design (172 icons) - Creative tools, graphics
  • Social (161 icons) - Social media, sharing, messaging
  • Layout (153 icons) - Grid, alignment, spacing
  • Food & Beverage (147 icons) - Meals, drinks, restaurants

All Categories

accessibility • account • animals • arrows • brands • buildings • charts • communication • connectivity • currency • cursors • design • development • devices • emoji • files • finance • food-beverage • furniture • gaming • home • layout • mail • maps • math • maths • medical • money • multimedia • nature • navigation • notifications • people • photography • science • seasons • security • shapes • shopping • social • sports • sustainability • text • time • tools • transportation • travel • weather

All categories are prefixed with lucide- in the Icon Block to avoid conflicts (e.g., lucide-medical, lucide-text).

🛠️ Development Commands

# Generate everything (recommended)
npm run build

# Download icons only
npm run download

# Generate register.js only (requires icons already downloaded)
npm run generate

# List all categories with icon counts
npm run categories

# Validate generated JavaScript
npm run validate

🐘 PHP Support

This plugin also includes a PHP version of the icon registry for use outside the WordPress block editor (e.g., in custom dashboard forms, ACF fields, or templates).

⚠️ Note: The PHP file is not auto-loaded to avoid ~1-2 MB memory overhead on every page load. Require it only where needed.

Quick Start:

// Load the icon registry (only in files where you need it)
require_once WP_CONTENT_DIR . '/plugins/icon-block-lucide/lucide-icons.php';

// Render an icon
echo render_lucide_icon('alarm-clock-check', 'w-6 h-6 text-blue-500');

// Get all icons for a dropdown
$icons = get_lucide_icons();
foreach ($icons['icons'] as $icon) {
    echo "<option value='{$icon['name']}'>{$icon['title']}</option>";
}

Standalone Use: The lucide-icons.php file works independently - you can copy it to any PHP project without WordPress!

Available Functions:

  • get_lucide_icons() - Get all 2010 icons with metadata
  • get_lucide_icon($name) - Get a specific icon
  • render_lucide_icon($name, $class, $size) - Render SVG with custom styling
  • get_lucide_icons_by_category($category) - Filter icons by category
  • search_lucide_icons($query) - Search icons by name/keywords

Generate PHP Registry:

cd dev/scripts
npm run generate-php

📖 Full PHP documentation: See php-usage.md for complete usage guide and examples.

📁 Project Structure

wp-content/plugins/icon-block-lucide/
├── README.md                  # This file
├── php-usage.md               # PHP usage guide
├── package.json               # Main build scripts
├── icon-block-lucide.php      # WordPress plugin file
├── register.js                # Generated: 2,010 icons for blocks (14,000+ lines)
├── lucide-icons.php           # Generated: 2,010 icons for PHP (1.05 MB)
├── .gitignore                 # Ignores dev/ folder
│
├── dev/                       # Development folder (git-ignored)
│   ├── icons/                # Downloaded icons
│   │   ├── lucide/          # 1,637 icons from main repo
│   │   └── lucide-lab/      # 373 experimental icons
│   └── scripts/              # Build scripts
│       ├── download-icons.sh
│       ├── generate-register.js      # Generates register.js
│       ├── generate-php-registry.js  # Generates lucide-icons.php
│       ├── list-categories.js
│       └── package.json
│
└── prepare-svgs-for-icon-block/  # Original tool (reference)

🔧 How It Works

1. Icon Download

  • Uses Git sparse checkout to efficiently download only the icons/ directory
  • Pulls from both repositories:
    • lucide-icons/lucide (main, stable icons)
    • lucide-icons/lucide-lab (experimental icons)
  • Each icon includes:
    • .svg file - The actual icon
    • .json file - Metadata with categories, tags, contributors

2. Code Generation

The generator script (dev/scripts/generate-register.js):

  • Reads all SVG files and their JSON metadata
  • Extracts categories and keywords from JSON files
  • Optimizes SVGs using SVGO (removes unnecessary attributes, keeps viewBox)
  • Properly escapes special characters (quotes, apostrophes)
  • Generates a complete register.js file with:
    • All icon definitions with metadata
    • Category definitions with translations
    • WordPress hook registration via iconBlock.icons filter

3. WordPress Integration

The generated code:

  • Creates an icon library object matching The Icon Block's v2.0+ structure
  • Registers via the iconBlock.icons filter hook
  • Each library contains:
    • name: Library identifier ('lucide')
    • title: Display name ('Lucide')
    • categories: Array of category objects (prefixed with 'lucide-')
    • icons: Array of icon objects with metadata
  • Prefixes categories with lucide- to avoid conflicts
  • Makes icons searchable by keywords
  • Supports all Icon Block features (sizing, colors, rotation, etc.)

📊 Generated Output Stats

  • Total Icons: 2,010 (1,637 Lucide + 373 Lucide Lab)
  • Categories: 48 unique categories
  • Category Assignments: 4,140 (icons can have multiple categories)
  • Keywords: Thousands of searchable terms
  • File Size: ~14,000 lines of optimized JavaScript

🔄 Updating to Latest Icons

When Lucide releases new icons:

npm run build

This regenerates everything with the latest icons from the Lucide repositories.

🧪 Testing

# Validate JavaScript syntax
npm run validate

# Check what categories exist
npm run categories

# View icon counts by category
cd dev/scripts
npm run list-categories

💡 Example Usage

After activating the plugin in WordPress:

  1. Add an Icon Block to your page/post
  2. Browse icons by category (e.g., "Lucide Medical", "Lucide Text")
  3. Or search by keyword (e.g., "heart", "code", "arrow")
  4. Customize size, color, and alignment as needed

🎯 Key Features for Developers

Proper Escaping

Handles special characters safely:

  • Apostrophes in titles: "Master's Degree" → "Master\'s Degree"
  • Quotes in keywords and SVG attributes
  • Unicode characters preserved

SVG Optimization

  • Removes width and height attributes for responsive scaling
  • Keeps viewBox for proper aspect ratios
  • Removes unnecessary metadata
  • Optimizes path data

Metadata Preservation

  • Every icon includes categories from Lucide's official metadata
  • Keywords/tags enable powerful search functionality
  • Contributor information preserved in comments

📚 Resources

🙏 Credits

📄 License

This integration is MIT licensed. Lucide icons are ISC licensed. See individual repositories for details.