Hi all,
We are following this guide;
We are running a bedrock + sage stack. Here are the steps we did follow:
composer require blade-ui-kit/blade-icons in bedrock root
wp acorn vendor:publish --tag=blade-icons in bedrock root
edited config/blade-icons.php like in the documentation
created icons folder in resources/images
Added icon set with composer require blade-ui-kit/blade-heroicons in bedrock root
Included icon in blade file <x-heroicon-s-menu />
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?
Try change the path value to just 'resources/images/icons',.
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!
ben
August 18, 2022, 8:07pm
4
Have you tried clearing out the cache?
wp acorn icons:cache
Hi @ben ,
Thanks, but still no luckā¦
zupa
August 21, 2022, 8:21pm
6
Did you solve this problem?blade-ui-kit/blade-icons package and got the same error.
Fixed by:
Install with composer require blade-ui-kit/blade-icons in sage theme root folder, not bedrock root folder.
Create folder called config in theme root folder
Run wp acorn package:discover or else package config might not be detected/able to publish config-file
Run wp acorn vendor:publish --tag=blade-icons to publish config file to config folder.
In config -file, uncomment everything and let path be resources/svg and create that folder in resources (or change if you want).
In bud.config.mjs add svg to assets array like this .assets(["images","svg"]) (if you chose to create the svg -folder)
Run wp acorn config:clear in theme root folder.
Add your icons/svg -files to resources/svg
Run yarn build and yarn dev
Run wp acorn optimize
Run wp acorn icons:cache
Use <x-icon-name_of_svg_file /> to display the icon.
Donāt know if all this is necessary but it worked for me.blade-ui-kit/blade-icons package as it is already included in the other packages I believe.
6 Likes
erit
October 5, 2022, 11:23pm
7
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'
],
pallan
October 16, 2024, 8:27am
8
Hello
pallan
October 16, 2024, 9:46am
9
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 composer require blade-ui-kit/blade-heroicons
then: wp acorn optimize:clearwp acorn package:discoverDiscovered Package: blade-ui-kit/blade-iconsDiscovered Package: nesbot/carbonwp acorn vendor:publish
0
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
zupa:
blade-ui-kit/blade-icons
You saved my day, thanks! docs because as it is it doesnāt work.
ben
January 14, 2025, 10:48pm
11
You shouldnāt need to do that if you followed the docs and installed Acorn with the autoload dump script
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?
The blade icons package requires Laravel and Sage also requires it to use Laravel Blade views. I think youāre going to have a lot of issues trying to get this to work without Acorn.
1 Like
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
<!-- airplay.svg --> <svg xmlns=" SVG namespace " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"/> <path d="m12 15 5 6H7Z"/> </svg>
After adding the comment, I was able to run the following commands without errors:
wp acorn optimize
wp acorn icons:cache
ben
August 22, 2025, 1:20pm
15
ā¦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
Thanks for breaking my noob misconception
[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:41Stack 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:315Stack 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), '<header class="...')#4 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php(89): Illuminate\View\Compilers\ComponentTagCompiler->compileSelfClosingTags('<header class="...')#5 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/ComponentTagCompiler.php(76): Illuminate\View\Compilers\ComponentTagCompiler->compileTags('<header class="...')#6 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/BladeCompiler.php(455): Illuminate\View\Compilers\ComponentTagCompiler->compile('<header class="...')#7 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/BladeCompiler.php(287): Illuminate\View\Compilers\BladeCompiler->compileComponentTags('<header class="...')#8 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Compilers/BladeCompiler.php(187): Illuminate\View\Compilers\BladeCompiler->compileString('<header class="...')#9 /home/customer/www/staging2.mydomain.com/public_html/wp-content/themes/mydomain/vendor/illuminate/view/Engines/CompilerEngine.php(68): Illuminate\View\Compilers\BladeCompiler->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:315Stack 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:315Stack 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
ben
August 22, 2025, 5:43pm
17
composer install and wp acorn icons:cache?
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.
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
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.
. In what file did you add this? Cheers.
. Yes, you are right. Anyway, I got it working locally, however uploading it to my siteground hosting, I got the following PHP error logs:
How are you deploying your Sage site? Are you running