# Blade-icons | Unable to locate a class or view for component
**URL:** https://discourse.roots.io/t/blade-icons-unable-to-locate-a-class-or-view-for-component/23391
**Category:** sage
**Tags:** bedrock, sage10
**Created:** 2022-06-20T09:27:50Z
**Posts:** 20
## Post 1 by @KopDigitaal — 2022-06-20T09:27:50Z
Hi all,
We are following this guide;
> **[Sage 10.x: How to use blade-icons | Roots Documentation](https://docs.roots.io/sage/10.x/guides/use-blade-icons/#installation)**
>
> How to use the blade-icons package with Sage 10.
We are running a bedrock + sage stack. Here are the steps we did follow:
1. `composer require blade-ui-kit/blade-icons` in bedrock root
2. `wp acorn vendor:publish --tag=blade-icons` in bedrock root
3. edited `config/blade-icons.php` like in the documentation
4. created `icons` folder in `resources/images`
5. Added icon set with `composer require blade-ui-kit/blade-heroicons` in bedrock root
6. Included icon in blade file ``
But after that we get following error;
`Unable to locate a class or view for component [heroicon-s-menu]`
Does anybody know how to fix this?
Thanks!
---
## Post 2 by @marcelo2605 — 2022-06-21T14:31:22Z
Try change the `path` value to just `'resources/images/icons',`.
---
## Post 3 by @KopDigitaal — 2022-08-15T12:21:10Z
Thanks, this did work.
But now we are trying to use another library but we now again get the message;
`Unable to locate a class or view for component [phosphor-instagram-logo-light]`
We did include the library with;
`composer require codeat3/blade-phosphor-icons`
Do u know why the new icons are not loading?
Thanks!
---
## Post 4 by @ben — 2022-08-18T20:07:37Z
Have you tried clearing out the cache?
```
wp acorn icons:cache
```
---
## Post 5 by @KopDigitaal — 2022-08-19T11:32:34Z
Hi @ben,
Thanks, but still no luck…
---
## Post 6 by @zupa — 2022-08-21T20:21:30Z
Did you solve this problem?
I had some problems to installing `blade-ui-kit/blade-icons` package and got the same error.
Fixed by:
1. Install with `composer require blade-ui-kit/blade-icons` in sage theme root folder, not bedrock root folder.
2. Create folder called `config` in theme root folder
3. Run `wp acorn package:discover` or else package config might not be detected/able to publish config-file
4. Run `wp acorn vendor:publish --tag=blade-icons` to publish config file to config folder.
5. In config -file, uncomment everything and let path be `resources/svg` and create that folder in resources (or change if you want).
6. In `bud.config.mjs` add svg to assets array like this `.assets(["images","svg"])` (if you chose to create the svg -folder)
7. Run `wp acorn config:clear` in theme root folder.
8. Add your icons/svg -files to `resources/svg`
9. Run `yarn build` and `yarn dev`
10. Run `wp acorn optimize`
11. Run `wp acorn icons:cache`
12. Use `` to display the icon.
Don’t know if all this is necessary but it worked for me.
And instead of installing an entire icon library now you can download individual icons from those packages and just put them in your svg-folder and save some loading time. Or if you want a entire package you could still try above steps except with that package. But first remove the `blade-ui-kit/blade-icons` package as it is already included in the other packages I believe.
---
## Post 7 by @erit — 2022-10-05T23:23:05Z
On using an icon kit:
When attempting to remove blade-ui-kit/blade-icons composer said that the removal failed because blade-ui-kit/blade-heroicons requires it - however, upon inspection it was actually removed and the icons seemed to work anyways. I also attempted to add it back and it still works in that case too.
`wp acorn optimize` & `wp acorn icons:cache` do get things working
The debugger kept complaining that it couldn’t find ‘heroicons-s-document’ in the ‘default’ set. So, I assumed that it just wasn’t being picked up through the composer install. I manually added a new set for heroicons and pointed it at heroicons in the vendor directory, i doubt this is the proper way to do it, but it works.
```
'heroicons' => [
'path' => 'vendor/blade-ui-kit/blade-heroicons/resources/svg',
'prefix' => 'heroicon'
],
```
---
## Post 8 by @pallan — 2024-10-16T08:27:22Z
> [@erit](#):
>
> ```
> 'heroicons' => [
> 'path' => 'vendor/blade-ui-kit/blade-heroicons/resources/svg',
> 'prefix' => 'heroicon'
> ],
> ```
Hello :wave:. In what file did you add this? Cheers.
---
## Post 9 by @pallan — 2024-10-16T09:46:39Z
I understand that this is closed along time ago but I’ve tried to do my homework before posting for support. I have read the ‘use blade icons’ doc.
**My steps**
Ran the first 3 steps of the solution and also installed heroicons via
`composer require blade-ui-kit/blade-heroicons`
**then:**
`wp acorn optimize:clear`
`wp acorn package:discover`
`Discovered Package: blade-ui-kit/blade-icons`
`Discovered Package: nesbot/carbon`
`wp acorn vendor:publish`
Which provider or tag’s files would you like to publish?:
[0] Publish files from all providers and tags listed below
> 0
> Unable to locate publishable resources.
Running: wp acorn vendor:publish --tag=blade-icons results in unable to locate publishable resources
The folder and svg icons for the heroicons gets published correctly on yarn build and “blade-ui-kit/blade-icons”: “^1.7”, appears within composer.json
And this is the error in the browser when trying to render the WP page:
`Unable to locate a class or view for component [heroicon-o-arrow-left]...`
Is this a basic resource location path issue or something else?
This is an old setup :smiling_face_with_tear:
10.0.0-beta.1
acorn to 2.0.0-alpha.0
Node 12.14.0
Local by Flywheel
---
## Post 10 by @dangelion — 2025-01-14T15:19:48Z
> [@zupa](#):
>
> blade-ui-kit/blade-icons
You saved my day, thanks! :pray:
Someone really need to fix the [docs](https://roots.io/sage/docs/use-blade-icons/) because as it is it doesn’t work.
I think the essential step to solve was this command: wp acorn package:discover
---
## Post 11 by @ben — 2025-01-14T22:48:23Z
You shouldn’t need to do that if you followed the docs and [installed Acorn with the autoload dump script](https://roots.io/acorn/docs/installation/#add-the-autoload-dump-script)
---
## Post 12 by @dangelion — 2025-01-15T15:29:29Z
I didn’t install Acorn, I read it worked only with Bedrock which I don’t use. Maybe I wrongly understand it, anyway, Acorn is “a framework for integrating Laravel within WordPress”. I don’t need to integrating Laravel in WP. I want to keep WP as simple as possible. So is there another better way?
---
## Post 13 by @csorrentino — 2025-01-15T16:59:08Z
The blade icons package [requires Laravel](https://github.com/blade-ui-kit/blade-icons?tab=readme-ov-file#requirements) and Sage also [requires it](https://roots.io/sage/docs/installation/#installing-acorn) to use Laravel Blade views. I think you’re going to have a lot of issues trying to get this to work without Acorn.
---
## Post 14 by @DjaguarUncaged — 2025-08-21T11:05:51Z
I’ve been pulling my hair for the past 12 hours because of this issue.
It turns out, I need to add a comment on top of the SVG file like
` `
After adding the comment, I was able to run the following commands without errors:
```
wp acorn optimize
```
```
wp acorn icons:cache
```
---
## Post 15 by @ben — 2025-08-22T13:20:47Z
…I don’t think that’s correct? I’ve never had to do that while using blade-icons with 80+ custom icons on one of my sites
---
## Post 16 by @DjaguarUncaged — 2025-08-22T16:05:08Z
Thanks for breaking my noob misconception :sweat_smile: . Yes, you are right. Anyway, I got it working locally, however uploading it to my siteground hosting, I got the following PHP error logs:
`[21-Aug-2025 22:03:01 UTC] PHP Warning: require(/home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/../symfony/polyfill-mbstring/bootstrap.php): Failed to open stream: No such file or directory in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/autoload_real.php on line 41`
`[21-Aug-2025 22:03:01 UTC] PHP Fatal error: Uncaught Error: Failed opening required '/home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/../symfony/polyfill-mbstring/bootstrap.php' (include_path='.:/usr/local/php82/pear') in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/autoload_real.php:41`
`Stack trace:`
`#0 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/autoload_real.php(45): {closure}('0e6d7bf4a5811bf...', '/home/customer/...')`
`#1 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/autoload.php(22): ComposerAutoloaderInit16af317a7214006aae0c739a0f7d1061::getLoader()`
`#2 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/functions.php(24): require('/home/customer/...')`
`#3 /home/customer/www/staging2.mydomain.com/public_html/wp-settings.php(695): include('/home/customer/...')`
`#4 /home/customer/www/staging2.mydomain.com/public_html/wp-config.php(106): require_once('/home/customer/...')`
`#5 /home/customer/www/staging2.mydomain.com/public_html/wp-load.php(50): require_once('/home/customer/...')`
`#6 /home/customer/www/staging2.mydomain.com/public_html/wp-blog-header.php(13): require_once('/home/customer/...')`
`#7 /home/customer/www/staging2.mydomain.com/public_html/index.php(17): require('/home/customer/...')`
`#8 {main}`
`thrown in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/composer/autoload_real.php on line 41`
`[22-Aug-2025 15:55:05 UTC] PHP Fatal error: Uncaught InvalidArgumentException: Unable to locate a class or view for component [icon-phone]. in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php:315`
`Stack trace:`
`#0 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php(235): Illuminate\View\Compilers\ComponentTagCompiler->componentClass('icon-phone')`
`#1 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php(220): Illuminate\View\Compilers\ComponentTagCompiler->componentString('icon-phone', Array)`
`#2 [internal function]: Illuminate\View\Compilers\ComponentTagCompiler->Illuminate\View\Compilers\{closure}(Array)`
`#3 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php(215): preg_replace_callback('/\n <...', Object(Closure), 'compileTags('compileComponentTags('compile('/home/customer/...')`
`#10 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#11 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#12 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#13 /home/customer/www/staging2.mydomain.com/public_html/wp-content/cache/acorn/framework/views/01736d557b4045cb794e7782aa7c08b4.php(21): Illuminate\View\View->render()`
`#14 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(123): require('/home/customer/...')`
`#15 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(124): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}()`
`#16 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/PhpEngine.php(57): Illuminate\Filesystem\Filesystem->getRequire('/home/customer/...', Array)`
`#17 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(76): Illuminate\View\Engines\PhpEngine->evaluatePath('/home/customer/...', Array)`
`#18 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#19 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#20 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#21 /home/customer/www/staging2.mydomain.com/public_html/wp-content/cache/acorn/framework/views/f6fa13cb330e620e2e8fcdb7d1c72096.php(10): Illuminate\View\View->render()`
`#22 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(123): require('/home/customer/...')`
`#23 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(124): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}()`
`#24 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/PhpEngine.php(57): Illuminate\Filesystem\Filesystem->getRequire('/home/customer/...', Array)`
`#25 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(76): Illuminate\View\Engines\PhpEngine->evaluatePath('/home/customer/...', Array)`
`#26 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#27 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#28 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#29 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/index.php(3): Illuminate\View\View->render()`
`#30 /home/customer/www/staging2.mydomain.com/public_html/wp-includes/template-loader.php(106): include('/home/customer/...')`
`#31 /home/customer/www/staging2.mydomain.com/public_html/wp-blog-header.php(19): require_once('/home/customer/...')`
`#32 /home/customer/www/staging2.mydomain.com/public_html/index.php(17): require('/home/customer/...')`
`#33 {main}`
`Next Illuminate\View\ViewException: Unable to locate a class or view for component [icon-phone]. (View: /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/resources/views/sections/header.blade.php) in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php:315`
`Stack trace:`
`#0 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/PhpEngine.php(59): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(InvalidArgumentException), 1)`
`#1 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(76): Illuminate\View\Engines\PhpEngine->evaluatePath('/home/customer/...', Array)`
`#2 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#3 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#4 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#5 /home/customer/www/staging2.mydomain.com/public_html/wp-content/cache/acorn/framework/views/f6fa13cb330e620e2e8fcdb7d1c72096.php(10): Illuminate\View\View->render()`
`#6 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(123): require('/home/customer/...')`
`#7 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/filesystem/Filesystem.php(124): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}()`
`#8 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/PhpEngine.php(57): Illuminate\Filesystem\Filesystem->getRequire('/home/customer/...', Array)`
`#9 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(76): Illuminate\View\Engines\PhpEngine->evaluatePath('/home/customer/...', Array)`
`#10 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#11 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#12 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#13 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/index.php(3): Illuminate\View\View->render()`
`#14 /home/customer/www/staging2.mydomain.com/public_html/wp-includes/template-loader.php(106): include('/home/customer/...')`
`#15 /home/customer/www/staging2.mydomain.com/public_html/wp-blog-header.php(19): require_once('/home/customer/...')`
`#16 /home/customer/www/staging2.mydomain.com/public_html/index.php(17): require('/home/customer/...')`
`#17 {main}`
`Next Illuminate\View\ViewException: Unable to locate a class or view for component [icon-phone]. (View: /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/resources/views/sections/header.blade.php) (View: /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/resources/views/sections/header.blade.php) in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php:315`
`Stack trace:`
`#0 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/PhpEngine.php(59): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(Illuminate\View\ViewException), 0)`
`#1 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(76): Illuminate\View\Engines\PhpEngine->evaluatePath('/home/customer/...', Array)`
`#2 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(208): Illuminate\View\Engines\CompilerEngine->get('/home/customer/...', Array)`
`#3 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(191): Illuminate\View\View->getContents()`
`#4 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/View.php(160): Illuminate\View\View->renderContents()`
`#5 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/index.php(3): Illuminate\View\View->render()`
`#6 /home/customer/www/staging2.mydomain.com/public_html/wp-includes/template-loader.php(106): include('/home/customer/...')`
`#7 /home/customer/www/staging2.mydomain.com/public_html/wp-blog-header.php(19): require_once('/home/customer/...')`
`#8 /home/customer/www/staging2.mydomain.com/public_html/index.php(17): require('/home/customer/...')`
`#9 {main}`
`thrown in /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php on line 315`
---
## Post 17 by @ben — 2025-08-22T17:43:33Z
:thinking: How are you deploying your Sage site? Are you running `composer install` and `wp acorn icons:cache`?
---
## Post 18 by @DjaguarUncaged — 2025-08-22T20:27:10Z
Hi @ben ,
Thanks for the response.
I actually use:
`composer install --no-dev --optimize-autoloader`
with the following config in my composer:
```
"scripts": {
"post-autoload-dump": [
"Roots\\Acorn\\ComposerScripts::postAutoloadDump",
"wp acorn cache:clear",
"wp acorn optimize:clear",
"wp acorn view:clear",
"wp acorn config:clear",
"wp acorn icons:clear",
"wp acorn optimize"
]
}
```
then upload with rsync.
Still a no go.
My next step is to try remote dev or test in another web host.
---
## Post 19 by @csorrentino — 2025-08-22T21:34:10Z
I’m not sure if this is related to your problem, but one thing I’ve found running roots tools on siteground is you will want to check the version of php that’s running in the shell. Even if your frontend is using a specific version of php, the shell may be running an older version and you’ll need to update your .bash\_profile to create an alias for the version of php that you want to use.
All that to say, as a sanity check, definitely run `php -v` in the shell to make sure it shows the version you expect it to
---
## Post 20 by @DjaguarUncaged — 2025-08-23T03:33:45Z
Thanks for the insights @csorrentino .
Following your advice, I ssh to siteground and got my expected php version which is PHP 8.3.24. Then I realized, I was running valet in my local dev env, it shows 8.4 even though running php -v locally shows 8.3.24, so I updated valet php version to 8.3 then ran the whole build and composer install locally, then rsync to SG. Still the same error.
And then I tried running build/composer in the server itself, it works! I just had to remove node\_modules folder. I think I will go this route for now.