oliwol/filament-rich-editor-heroicons

A seamless integration for Filament v4/v5 that allows users to insert Heroicons directly into the RichEditor (TipTap). Enhance your content by adding scalable vector icons with a dedicated picker button.

v0.0.2 2026-02-05 09:18 UTC

Requires

• php: ^8.2
• filament/filament: ^v4.0|^v5.0
• spatie/laravel-package-tools: ^1.15.0
• ueberdosis/tiptap-php: ^2.0

Requires (Dev)

• laravel/pint: ^1.25.0
• orchestra/testbench: ^10.0
• pestphp/pest: ^3.0|^4.0
• phpstan/phpstan: ^2.0
• rector/rector: ^2.0

MIT

• laravel
• tiptap
• filament
• Heroicons
• rich-editor
• oliwol
• filament-rich-editor-heroicons

README

A Filament v4/v5 plugin that adds a Heroicon picker to the RichEditor (TipTap). Search and insert any outline Heroicon as an inline SVG directly into the editor content.

🚀 Installation

Install the package via Composer:

composer require oliwol/filament-rich-editor-heroicons

⚡️ Quick Start

use Filament\Forms\Components\RichEditor;
use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons;

RichEditor::make('content')
    ->toolbarButtons([
        'bold',
        'italic',
        'link',
        'addHeroicon',
    ])
    ->plugins([
        FilamentRichEditorHeroicons::make(),
    ])

🛠️ Usage

Editor Integration

Add FilamentRichEditorHeroicons::make() to the plugins() array of your RichEditor component and include addHeroicon in the toolbarButtons():

use Filament\Forms\Components\RichEditor;
use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons;

RichEditor::make('content')
    ->toolbarButtons([
        'bold',
        'italic',
        'underline',
        'link',
        'addHeroicon',
        // ... other buttons
    ])
    ->plugins([
        FilamentRichEditorHeroicons::make(),
    ])

Rendering Stored Content

When rendering stored content outside the editor (e.g. in a Blade view or model accessor), register the plugin with RichContentRenderer:

use Filament\Forms\Components\RichEditor\RichContentRenderer;
use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons;

RichContentRenderer::make($this->html)
    ->plugins([
        FilamentRichEditorHeroicons::make(),
    ])

⚙️ How it works

1. Clicking the toolbar button opens a modal with a searchable dropdown of all outline Heroicons.
2. After selecting an icon, it is rendered as an inline SVG element and inserted into the editor content.
3. The icon name is stored as a data-icon attribute, and the rendered SVG is stored as data-svg for display.

🌍 Translations

The package ships with English and German translations. You can publish and customize them:

php artisan vendor:publish --tag="filament-rich-editor-heroicons-translations"

✅ Testing

composer test

📄 License

This package is open-sourced software licensed under the MIT license.