AlpineJS conditional classes about blade-icons HOT 8 CLOSED

If you use x-bind:class it works.

Credits: alpinejs/alpine#722

from blade-icons.

@Enaah yeah that was added pretty recently so this shouldn't be an issue anymore.

from blade-icons.

Can you copy paste the full icon tag?

from blade-icons.

I would normally do this:

<x-zondicon-user-group class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" :class="{ 'text-gray-600': open }" />

This returns an error, as the output is:

<?php $component->withAttributes(['class' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute({ 'text-gray-600': open })]); ?>

Moving it in front doesn't work, as I'm overriding the class (although it feels a little sketchy what I'm doing, I must admit)

from blade-icons.

This isn't exactly a Blade Icons issue but rather an incompatibility with Blade components from Laravel and Alpine.js syntax. I'm not really sure how to solve this but it's probably best that you either open an issue on the Alpine.js issue tracker or a discussion on the laravel repo (not an issue). Or try a support channel like discord, laracasts forums etc.

from blade-icons.

@driesvints thanks, I guess it turned out to be my lack of knowledge this time :-)

from blade-icons.

@ju5t What was your solution for this in the end please?

from blade-icons.

Another solution is ::class

Source: https://laravel.com/docs/8.x/blade#escaping-attribute-rendering

from blade-icons.