Bit confused on install instructions -- icons not showing up

So, i am trying to run hero icons and font awesome, I published the config files, uncommented the path to resource/svg.

The icons appear in the blade icon picker in filament forms, but they do not appear on the table or blade views.

I see part of the instructions do say "place icons in this folder"

but on the font awesome page I see "If you want to use the raw SVG icons as assets, you can publish them using:" which makes me think this is optional.

So do i need to manually copy over every single icon set from the vendor directory, or will your plugin pull the icons from the vendor directory?

I have also tried accessing the icon with both

and

<x-{{ $rating->icon }}/>

but neither option displays the icon

I also have many rows that have null in the database for icon choice,

But i am getting this error assumedly because of all the null values with filamentPHP

Svg by name "" from set "heroicons" not found.

Any ideas? And please make the "copy icons to path directory" instruction a bit clearer (easier to spot...ie not at the end of a sentence that is easy to miss) if that is indeed a requirement (though i'd prefer if it just got what it needs from vendors to avoid repeating files)

Hi @jcc5018. You say you're using heroics and fontawsome: does that mean you're using the respective packages?

https://github.com/owenvoke/blade-fontawesome and https://github.com/blade-ui-kit/blade-heroicons

If so, the only thing you need to do is require the packages through composer and you're good to go. For production, also make sure to cache the icons.

The instructions of the icon sets are always complete and you don't need to do the install steps of the core Blade Icons package. That's only if you're working with custom icons and not with icon sets.

You say:

I have also tried accessing the icon with both

But there's nothing after this sentence.

<x-{{ $rating->icon }}/>

This can never work because blade components need their full element name up front. It cannot be dynamic like this. If you need dynamic icons I suggest you use the svg directive: @svg({{ $rating->icon }}, 'w-6 h-6') or helper: {{ svg($rating->icon) }}.

And please make the "copy icons to path directory" instruction a bit clearer

Which instructions do you mean? Can you link to them? You don't need to copy the icons from icon packages. They work out of the box.

If so, the only thing you need to do is require the packages through composer and you're good to go.

Oh how i wish this was the case. I wouldn't be writing this issue if it were.

I have the following installed in composer.json:

"require": {
        "php": "^8.2",
        "althinect/filament-spatie-roles-permissions": "^2.2",
        "amidesfahani/filament-tinyeditor": "^1.0",
        "archilex/filament-toggle-icon-column": "^3.0",
        "ariaieboy/filament-currency": "^1.1",
        "aymanalhattami/filament-page-with-sidebar": "^2.4",
        "bezhansalleh/filament-panel-switch": "^1.0",
        "blade-ui-kit/blade-heroicons": "^2.2",
        "blade-ui-kit/blade-icons": "*",
        "cheesegrits/filament-phone-numbers": "^1.0",
        "cviebrock/eloquent-sluggable": "^10.0",
        "filament/filament": "^3.0-stable",
        "filament/forms": "^3.0-stable",
        "filament/spatie-laravel-media-library-plugin": "^3.0-stable",
        "filament/spatie-laravel-settings-plugin": "^3.0-stable",
        "filament/tables": "^3.0-stable",
        "filipfonal/filament-log-manager": "^2.0",
        "guava/filament-drafts": "^2.1",
        "guava/filament-icon-picker": "^2.0",
        "guzzlehttp/guzzle": "^7.2",
        "hasnayeen/themes": "^3.0",
        "ibrahimbougaoua/filament-rating-star": "^0.0.1",
        "ibrahimbougaoua/filament-sort-order": "^1.1",
        "jeffgreco13/filament-breezy": "v2.2.1.1",
        "kenepa/resource-lock": "^2.0",
        "laravel/fortify": "^1.18",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.3",
        "laravel/tinker": "^2.8",
        "livewire/livewire": "^3.0",
        "livewire/volt": "^1.0",
        "miguilim/filament-auto-panel": "^1.4",
        "owenvoke/blade-fontawesome": "^2.5",
        "ralphjsmit/laravel-filament-components": "^2.0",
        "rawilk/filament-password-input": "^1.1",
        "robsontenorio/mary": "^1.8",
        "spatie/geocoder": "^3.15",
        "spatie/laravel-analytics": "^5.1",
        "spatie/laravel-collection-macros": "^7.13",
        "spatie/laravel-googletagmanager": "^2.6",
        "spatie/laravel-image-optimizer": "^1.7",
        "spatie/laravel-menu": "^4.1",
        "tapp/filament-timezone-field": "^3.0",
        "thiktak/filament-nested-builder-form": "^1.0"
    },

config files of all blade ui packages are published and basically default with the relevant parts uncommented.

There was an issue with the blade icon picker that solved one of the problems Here

so if my icons are stored in the database as fas-___ that fas part appears to be the prefix as determined in the fontawesome config

so do i need to strip the prefixes for this format? @svg('fas-user' || 'user ', 'w-6 h-6')
@svg('{{ $rating->parent->icon }}', 'w-6 h-6')--}}

or this format:

<x-icon-camera class="w-6 h-6" />=> <x-{{ $rating->parent->icon }}/> or <x-icon-{{ $rating->parent->icon }}/>

   @if($rating->tag != 'Not Applicable')
                        <div class="bg-white rounded-lg p-4 shadow-md text-center bordered">
                            {{--                            <x-icon name="{{ $rating->parent->icon ??''}}"/>--}}
                            **<x-{{ $rating->parent->icon }} />**
                            {{--                            @svg('{{  $rating->parent->icon }}', 'w-6 h-6')--}}
                            <h5>{{$rating->parent->tag}}</h5>
                            <span>{{ $rating->tag }}</span>
                        </div>

                    @endif

this produces the following when rendered: (i had the wrong reference to the icons before)

Community Level

Solo

produces "Svg by name "fas-user-friends" from set "heroicons" not found." ERROR

@svg({{ $rating->parent->icon }}, 'w-6 h-6')

produces syntax error, unexpected token "<" php storm is complaining about the comma and expects )

removing , 'w-6 h-6' produces same unexpected token error

I did just try without the {{ }} as you copied, and this does finally work @svg( $rating->parent->icon,'h-6 w-6')

But the question still remains how to format the blade versions to account for the prefixes

Which instructions do you mean? Can you link to them? You don't need to copy the icons from icon packages. They work out of the box.

Make sure that the path defined for this icon set exists. By default it's resources/svg. Your SVG icons will need to be placed in this directory.

So you have a path for a reason i assume. So you say here, i dont need to copy icons from package, but the instructions say you do. So which is it?

Sidenote I know I am newer to programming, but these things that are supposed to "work out of the box" and then cause me hours of headaches are the main reason it is taking me so long to do this project. I just end up frustrated and give up for weeks or months. Displaying an icon should have been easy and i probably should have just stuck with the icon cdn link instead of fooling with components. I see you are part of Laravel core team, so my only suggestion to you all (any developer with packages that a lot of people use) would be to strive to make instructions clear as if a user has no experience (dont assume everyone knows what you are talking about--not the problem in this scenario, but has been a problem with laravel and filament docs in the past). Provide links to real working examples when available as sometimes concepts don't always connect to new people like me (especially when they are vague). Even links to additional information in the php docs or whatnot may help if it further explains the how or why it works.

Thanks

Oh how i wish this was the case. I wouldn't be writing this issue if it were.

I designed the system for these packages to be exactly that. Me and hundreds of others are currently using them as such.

I have the following installed in composer.json:

You don't need to explicitly mention blade-ui-kit/blade-icons in your composer.json if you only use the icon sets.

config files of all blade ui packages are published and basically default with the relevant parts uncommented.

This isn't needed for the icon sets. You can just use them out of the box.

so do i need to strip the prefixes for this format? https://github.com/svg('fas-user' || 'user ', 'w-6 h-6')

Or syntax (||) isn't supported here.

syntax error, unexpected token "<" php storm is complaining about the comma and expects )

Right sorry, that's my bad. You can actually just do @svg($rating->parent->icon, 'w-6 h-6')

But the question still remains how to format the blade versions to account for the prefixes

Not sure what you mean here sorry.

So you have a path for a reason i assume. So you say here, i dont need to copy icons from package, but the instructions say you do. So which is it?

You're looking at the install instructions of the base Blade Icons package. You don't need to go over those if you're just using an icon set. Just require the icon set through Composer and you're good to go. It doesn't say anywhere on the Blade Heroics install instructions that you also need to do the steps from the base package: https://github.com/blade-ui-kit/blade-heroicons

I know I am newer to programming, but these things that are supposed to "work out of the box" and then cause me hours of headaches are the main reason it is taking me so long to do this project. I just end up frustrated and give up for weeks or months. Displaying an icon should have been easy and i probably should have just stuck with the icon cdn link instead of fooling with components.

Welcome to programming. This is part of the learning process. I've also gone through similar things when I started my career. Just be kind, patient, and hungry to learn more and you'll improve over time.

I see you are part of Laravel core team, so my only suggestion to you all (any developer with packages that a lot of people use) would be to strive to make instructions clear as if a user has no experience (dont assume everyone knows what you are talking about--not the problem in this scenario, but has been a problem with laravel and filament docs in the past). Provide links to real working examples when available as sometimes concepts don't always connect to new people like me (especially when they are vague). Even links to additional information in the php docs or whatnot may help if it further explains the how or why it works.

Perfect docs don't exist unfortunately. Neither does perfect code. Out of tens of thousands users using this package, this is one of the first reports we got where the install instructions weren't clear. This leads me to believe the instructions are clear enough and this might have just been a bit of a learning point for you. That's fine and perfectly alright. I'm here to help if you need that. But right now I'm not going to be making large changes to the docs as I believe they're okay as is.

Good luck on your career 👍

I designed the system for these packages to be exactly that. Me and hundreds of others are currently using them as such.

Well this is great... Glad it works for most people. But it didn't work for me. Whether it be ignorance or something misconfigured or whatnot, it was not working.

Or syntax (||) isn't supported here.

this was meant for you. Do i need to store fas-____ or just the icon code without the prefix in the DB?

ultimately, this is a blade icon package that primarily focuses on blade components usage. So if dynamically generating a component is not an option, that needs to be stated somewhere in the docs, which doesnt appear to be the case.

You say:

You're looking at the install instructions of the base Blade Icons package. You don't need to go over those if you're just using an icon set.

Yet the only reason one would know about using the directive option (@ svg ) is by looking in the base package docs.

So please include "if you need to dynamically display icons from a database, you need to use the directive option as blade components can't be dynamically generated." or something to this effect in each icon pack and the base package. It may also be helpful to edit your instructions from:

Make sure that the path defined for this icon set exists. By default it's resources/svg. Your SVG icons will need to be placed in this directory.

to something like: "Custom SVG icons will need to be placed in this directory. Predefined icon packages above will be referenced from the vendor folder or can be copied here as well" If creating your own package of icons, it will need to include ____ path"

IE make it clear that your instructions are for custom icon sets and not the predefined ones to avoid confusion

Having said that, so I can better understand how things are working to hopefully avoid these problems in the future. Why can't a component be dynamically created? when i insert the right code, it is shown as in the inspector. So why doesn't that render?

And i know this is not your plugin, but it is related, but when using https://github.com/lukas-frey/filament-icon-picker and try to set the IconColumn::make('icon'), to display the icon in the table, it is still trying to search the heroicon set

Svg by name "fas-user-friends" from set "heroicons" not found.

@if(strlen($label) > 0)

        <div class="inline-flex items-center gap-1">

    @endif

            <x-svg

                :name="$icon()"

                {{

                    $attributes->class([

                        'inline',

                        'w-5 h-5' => !Str::contains($attributes->get('class'), ['w-', 'h-'])

                    ])

                 }}

            />

        @if(strlen($label) > 0)

                <div class="{{ $labelClasses() }}">

                    {{ $label }}

                </div>

            </div>

        @endif

I dont know what is going on enough to make that work, but if you see the problem, if you could help fix that code, it would be helpful.

blade-ui-kit / blade-icons

Bit confused on install instructions -- icons not showing up #222

Community Level