Binding a class to SVG Tag

[stephenmeehanuk]

Has anyone come across this?

I'm using AlpineJS to bind a class to a SVG, doing so directly to a SVG tag works as expected. Classes toggle, and the existing classes h-5 w-5 ease-in-out duration-300 are preserved.

  <svg class="h-5 w-5 ease-in-out duration-300" :class="mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z"></path></svg>

However, class binding doesn't appear to work with the antlers SVG Tag?

{{ svg src="{svg_source}"  class="h-5 w-5 ease-in-out duration-300" :class="mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'" }}

Outputs this

<svg class="lg:fill-orange-400" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z"></path></svg>

These classes are removed h-5 w-5 ease-in-out duration-300 and it's replaced with lg:fill-orange-400

When using the SVG Tag I'd like it to preserve the classes. Also, the classes on the SVG Tag don't toggle when mastAlt is true/false?

Environment
Application Name: Statamic
Laravel Version: 9.51.0
PHP Version: 8.2.2
Composer Version: 2.4.1
Environment: local
Debug Mode: ENABLED
URL: localsite.test
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: redis
Database: mysql
Logs: stack / single
Mail: smtp
Queue: redis
Session: file

Statamic
Addons: 1
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 3.4.3 PRO

Statamic Addons
simonhamp/statamic-heroicons: 1.1.0

[jackmcdade]

Try this: class="{mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'}"

[stephenmeehanuk]

Thanks, but that doesn't work

 {{ svg src="{svg_source}" class="{mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'}"  }}

Outputs

<svg class="lg:fill-orange-400" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">....</svg>

The class doesn't toggle when mastAlt is true/false, it only works when I use an inline SVG tag (not antlers SVG tag).

[jackmcdade]

Hmmm... any ideas here @JohnathonKoster?

[JohnathonKoster]

@jackmcdade @stephenmeehanuk

I missed the ping, sorry! 🙈

We can use the attr: syntax here (works on Form and SVG tags):

{{ svg src="{svg_source}"  class="h-5 w-5 ease-in-out duration-300"
    attr::class="mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'" }}

The first attr: will be removed, so we need the second : so it becomes part of the final class attribute:

<svg class="h-5 w-5 ease-in-out duration-300" :class="mastAlt ? 'lg:fill-red-400' : 'lg:fill-orange-400'" height="30" width="200">...</svg>

[JohnathonKoster]

Link to relevant source (since I forget about this and rediscover it all the time):

https://github.com/statamic/cms/blob/3.4/src/Tags/Concerns/RendersAttributes.php#L42

[stephenmeehanuk]

Brilliant, thanks John!