Filament•11mo ago

Can't use svg in TextColumn

What I want to achive is a column which shows an icon and when you click on it, a defined text is copied to the clipboard. The problem is, that the IconColumn has no copyable method, so I tried to use the TextColumn:

TextColumn::make("copy_column")
  ->getStateUsing("Copy")
  ->copyable()
  ->copyableState(fn($record) => $record->id)

TextColumn::make("copy_column")
  ->getStateUsing("Copy")
  ->copyable()
  ->copyableState(fn($record) => $record->id)

this works as expected and it shows the text "Copy". Now I tried to use an icon:

TextColumn::make("copy_column")
            ->getStateUsing(function() {
                return new HtmlString(
                    '<svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
                    </svg>');
            })
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)

TextColumn::make("copy_column")
            ->getStateUsing(function() {
                return new HtmlString(
                    '<svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
                    </svg>');
            })
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)

but the column is empty. Any ideas?

Solution:

ugly, but maybe this works ```php ->icon('heroicon-o-clipboard') ->getStateUsing(fn () => '<span></span>') ->html()...

Jump to solution

23 Replies

bernhardOP•11mo ago

Btw. using an (base64) image works:

TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)

TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)

LeandroFerreira•11mo ago

->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))

->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))

bernhardOP•11mo ago

Tried that as well, not working.

bernhardOP•11mo ago

Funny thing is, that the cell is empty

bernhardOP•11mo ago

Using Blade:render and just plain return new HtmlString( '<svg style="width: 20px;...

bernhardOP•11mo ago

while using <img> it works

Tim van Heugten•11mo ago

How about when you make it a custom icon as explained here: https://filamentphp.com/docs/3.x/support/icons

Icons - Core Concepts - Filament

Tim van Heugten•11mo ago

Good idea for reusability anyway

bernhardOP•11mo ago

Why? The heroicon-o-clipboard is just fine, I don't need a custom icon.

Tim van Heugten•11mo ago

Oh sorry, thought you were looking for a custom icon.

LeandroFerreira•11mo ago

share the whole code please

awcodes•11mo ago

Html runs through symfony/html-sanitizer, it might be that svg isn’t an allowed tag.

bernhardOP•11mo ago

The whole code is just

TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)

TextColumn::make("copy_column")
  ->getStateUsing(function() {
      return new HtmlString(
          '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADlSURBVEiJ7dWxSgNBFAXQEw2kSGyF1IJdCsvt0lnlM/Qb/IR8UiD+ggnBMrY2SadYRAQtdgaWJbuZhU2R4G0ee7nv3Zk7sI9TR2cPN8ITrmv6vvCA7SGDbul7gGdcYpl2xmbI8ItJWwPLN+iF+hlqSlwRG0zxWiQvahpiXPcJwwXdPPRVYiyPaKx5XJOgz4pk3Q3KcR1C1PWKZJ1BK/g3aGwQH+rjWAYvuMXiWAawbmt4lUGrOG+DXahXibOiblck9220iAHe5L/0lOVzhx/cyDce8s1VhW/MMEQ/wWCFR7wnaE8If/ABIVrL7Im7AAAAAElFTkSuQmCC">');
  })
  ->html()
  ->copyable()
  ->copyableState(fn($record) => $record->id)

Or not working:

TextColumn::make("copy_column")
            ->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)

TextColumn::make("copy_column")
            ->formatStateUsing(fn () => new HtmlString(Blade::render('<x-heroicon-o-clipboard class="w-5 h-5"/>')))
            ->html()
            ->copyable()
            ->copyableState(fn($record) => $record->id)

The problem is, that it seems that svg is somehow parsed out everything else works

awcodes•11mo ago

See my message

bernhardOP•11mo ago

Oh. That miight be the problem 😮

LeandroFerreira•11mo ago

ahh, use getStateUsing instead of formatStateUsing probably copy_column isnt a column..

bernhardOP•11mo ago

Tried both Thats right, but thats irrelevant, since all other versions are working, including regular text, html and even images. @awcodes is right. SVG gets parsed out. Will make a PR to add copyable to IconColumn ;). Thanks all for your time!

awcodes•11mo ago

You could possibly bind to the HtmlSanitizerInterface and modify the settings too. Currently it’s using ->allowSafeElements() and svg isn’t considered a safe element since it’s technically executable markup outside of a code block.

Solution

LeandroFerreira•11mo ago

ugly, but maybe this works

->icon('heroicon-o-clipboard')
->getStateUsing(fn () => '<span></span>')
->html()

->icon('heroicon-o-clipboard')
->getStateUsing(fn () => '<span></span>')
->html()

bernhardOP•11mo ago

This works. Thanks! Didn't know there was an icon method on the TextColumn 😄

LeandroFerreira•11mo ago

yes, there is.. But it is joining with the state, and I had thought you didn't want this.

bernhardOP•11mo ago

In my case, this doesn't matter, since i dont need the state at all, since I get the state for the clipboard by myself copyableState. Thank you very much

LeandroFerreira•11mo ago

nice, because I didn't like this ->getStateUsing(fn () => '<span></span>') 😅

Gaming

Programming

Can't use svg in TextColumn