Weave Code
Filament Rich Editor Heroicons Laravel Package
oliwol/filament-rich-editor-heroicons
Filament v4/v5 plugin for RichEditor (TipTap) that adds a searchable Heroicons picker. Insert inline SVG icons (outline/solid/mini) into content with configurable size, alignment, and color, and render them via RichContentRenderer.
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.
Frequently asked questions about Filament Rich Editor Heroicons
- How do I install this package for Filament v4 or v5?
- Run `composer require oliwol/filament-rich-editor-heroicons` to install via Composer. The package supports both Filament v4 and v5, with no additional setup required beyond adding the plugin to your `RichEditor` component.
- Will this work with Filament v6 when it’s released?
- The package is currently optimized for Filament v4/v5. While no official v6 support is announced, the developer monitors Filament’s roadmap. Check the GitHub repo for updates or test against pre-release versions if you’re using v6.
- Can I limit the Heroicons to only 'outline' or 'solid' styles?
- Yes, the package supports filtering icon styles. Configure the plugin with `styles(['outline'])` or `styles(['solid', 'mini'])` in your `FilamentRichEditorHeroicons::make()` call to restrict the picker to specific styles.
- Does this package require Node.js or additional build steps?
- No, this package integrates purely with Filament’s existing setup. It uses Alpine.js and Tailwind CSS (via Filament) and doesn’t introduce new build dependencies. All Heroicon SVGs are pre-bundled and dynamically loaded.
- How do I customize the size or color of inserted Heroicons?
- Use the `size()` and `color()` methods when configuring the plugin. For example, `FilamentRichEditorHeroicons::make()->size('24')->color('#3b82f6')` sets a default size of 24px and blue color for all inserted icons.
- Are there performance concerns with loading all Heroicons?
- The package uses lazy-loading for SVGs and includes debouncing for the searchable dropdown. For large icon libraries, consider limiting styles (e.g., `styles(['outline'])`) or implementing pagination via custom JavaScript.
- How do I render Heroicons in Blade templates or API responses?
- Register the plugin with `RichContentRenderer` in your Blade view or model accessor. Use `RichContentRenderer::make($html)->plugins([FilamentRichEditorHeroicons::make()])` to ensure icons render correctly outside the editor.
- Is there a way to add custom SVG attributes or dynamic icons?
- The package supports basic customization (size, color, alignment). For advanced use cases like dynamic icons or custom SVG attributes, you may need to extend the plugin or fork it to modify the underlying TipTap node logic.
- Does this package include accessibility features like ARIA labels?
- The plugin includes basic accessibility support, but ARIA labels are optional. You can configure them via the `aria()` method, e.g., `FilamentRichEditorHeroicons::make()->aria('true')`, to ensure icons meet WCAG standards.
- Are there alternatives if I need a different icon library?
- If you require a different icon library (e.g., Font Awesome, Material Icons), you’d need to fork this package or build a custom TipTap plugin. This package is specifically designed for Heroicons and leverages their SVG format for inline embedding.
Weaver
How can I help you explore Laravel packages today?