F
Filament•2mo ago
Mouse0270

Using Icons Inside RichContentRenderer

Is it possible to use icons inside the RichContentRenderer? My component looks like this: 
@php
  use Filament\Forms\Components\RichEditor\RichContentRenderer;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\Button;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\Typography;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\CardTile;
@endphp

@props(['content'])

<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {!! RichContentRenderer::make($content)->customBlocks([
        Button::class,
        Typography::class,
        CardTile::class
      ])->toHtml() !!}
    </div>
  </div>
</section>
@php
  use Filament\Forms\Components\RichEditor\RichContentRenderer;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\Button;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\Typography;
  use App\Filament\Forms\Components\RichEditor\RichContentCustomBlocks\CardTile;
@endphp

@props(['content'])

<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {!! RichContentRenderer::make($content)->customBlocks([
        Button::class,
        Typography::class,
        CardTile::class
      ])->toHtml() !!}
    </div>
  </div>
</section>
And CardTile Looks like this: 
@php
  use Filament\Support\Icons\Heroicon;
@endphp

<x-card class="text-center">
  @if($icon)
    <x-card.header>
      <div class="flex justify-center mb-4">
        <x-filament::badge :icon="Heroicon::OutlinedRectangleStack">
          Star
        </x-filament::badge>
      </div>
    </x-card.header>
  @endif
  
  @if($content)
    <x-card.content>
      <x-typography.h3>{{ $title }}</x-typography.h3>
      <div class="prose prose-sm max-w-none">
        {!! $content !!}
      </div>
    </x-card.content>
  @endif
  
  @if($buttonText && $buttonUrl)
    <x-card.footer class="justify-center">
      <x-button href="{{ $buttonUrl }}">
        {{ $buttonText }}
      </x-button> 
    </x-card.footer>
  @endif
</x-card>
@php
  use Filament\Support\Icons\Heroicon;
@endphp

<x-card class="text-center">
  @if($icon)
    <x-card.header>
      <div class="flex justify-center mb-4">
        <x-filament::badge :icon="Heroicon::OutlinedRectangleStack">
          Star
        </x-filament::badge>
      </div>
    </x-card.header>
  @endif
  
  @if($content)
    <x-card.content>
      <x-typography.h3>{{ $title }}</x-typography.h3>
      <div class="prose prose-sm max-w-none">
        {!! $content !!}
      </div>
    </x-card.content>
  @endif
  
  @if($buttonText && $buttonUrl)
    <x-card.footer class="justify-center">
      <x-button href="{{ $buttonUrl }}">
        {{ $buttonText }}
      </x-button> 
    </x-card.footer>
  @endif
</x-card>
But it appears the icon refuses to show up inside of the tile, however it works fine outside of the RichContentRenderer
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?