"defer" attribute fails

[beeards]

Library version

v1.3.0

Laravel version

v9.18.0

PHP version

v8.1.7

Description

defer it's not working as expected with the helper function. I have the components deactivated, but even activated it fails. And the sets enabled too.

// helpers.php
function svg(string $name, $class = '', array $attributes = []): Svg

Steps to reproduce

// config/blade-icons.php
return [
    // ...
    'sets' => [
        'default' => [
            'paths' => [
                'resources/svg',
                'vendor/blade-ui-kit/blade-heroicons/resources/svg',
            ],
            'disk' => '',
            'prefix' => 'icon',
            'fallback' => '',
            'class' => '',
            'attributes' => [],
        ],
    ],
    // ...
];

Method 1

{{-- home.blade.php --}}
{{ svg('o-home', 'method-A', ['defer']) }}
{{ svg('o-home', 'method-B', ['defer' => true]) }}
{{ svg('o-home', 'method-C', ['defer' => 1]) }}
{{ svg('o-home', 'method-D', ['defer' => '1']) }}
{{ svg('o-home', ['class' => 'method-E'], ['defer']) }}
{{ svg('o-home', ['class' => 'method-F'], ['defer' => true]) }}
{{ svg('o-home', ['class' => 'method-G'], ['defer' => 1]) }}
{{ svg('o-home', ['class' => 'method-H'], ['defer' => '1']) }}
{{ svg('o-home', ['class' => 'method-I', 'defer']) }}
{{ svg('o-home', ['class' => 'method-J', 'defer' => true]) }}
{{ svg('o-home', ['class' => 'method-K', 'defer' => 1]) }}
{{ svg('o-home', ['class' => 'method-L', 'defer' => '1']) }}
<!-- - - - - - - - - -->
@stack('bladeicons')

outputs

<!-- localhost/home -->
<svg defer class="method-A" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg defer="1" class="method-B" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg defer="1" class="method-C" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg defer="1" class="method-D" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-E" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-F" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-G" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-H" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-I" defer 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>

<svg class="method-J" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-K" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce

<svg class="method-L" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
    @push("bladeicons")
    <g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
    @endpush
@endonce
<!-- - - - - - - - - -->
<svg hidden class="hidden">
</svg>

---

Method 2

// config/blade-icons.php
return [
    // ...
    'attributes' => [
        'defer' => true,
    ],
    // ...
];

{{-- home.blade.php --}}
{{ svg('o-home', ['class' => 'method-M']) }}
{{ svg('o-home', 'method-N') }}
<!-- - - - - - - - - -->
@stack('bladeicons')

outputs

<svg class="method-M" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
@push("bladeicons")
<g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
@endpush
@endonce

<svg class="method-N" defer="1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><use href="#icon-08184c0014ea88c93d292d37d36a0a53"></use></svg>
@once("icon-08184c0014ea88c93d292d37d36a0a53")
@push("bladeicons")
<g id="icon-08184c0014ea88c93d292d37d36a0a53"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></g>
@endpush
@endonce

<!-- - - - - - - - - -->
<svg hidden class="hidden">
</svg>

[beeards]

This seems to bypass it, but it's redundant

{!! Blade::render(Blade::render(" {{ svg('o-home', 'method-X-times-render', ['defer' => true]) }} ")) !!}

[driesvints]

This feature was added by @indykoning. Right now, I have no plans on providing support myself for this feature but would appreciate it if either @indykoning could look into this or if someone can send in a PR. Thanks

[indykoning]

It seems that any escape/print texts are compiled later in the process thus not triggering the blade engine to actually compile the @once and @Push statements to php code.

What this boils down to is that it is not possible to directly print out the defered icons i'm afraid.

Three possible fixes in usage of it are using
1:
using the blade component of it

<x-icon-o-home defer/>

2:

{!! Blade::render(svg('o-home', 'method-A', ['defer'])->toHtml()) !!}

As this tells blade to render the html result of the svg function, thus compiling the php code.

3:
not deferring the svg helper function at all which is the fastest fix.

We cannot tell the helper function to compile the output of the svg class itself as we don't know if it is rendered in blade.
Trying to defer would in that case break and deferring wouldn't actually work either.
What could be done is extending the blade directive to render what comes out of the svg function
https://github.com/blade-ui-kit/blade-icons/blob/1.x/src/BladeIconsServiceProvider.php#L98
as the blade directive can only be used in blade

[driesvints]

Gonna revisit this as I want to see this solved. I haven't dug deep into this yet so would appreciate any help here. I'm not sure extending Blade is the right solution.