Blade-icons | Unable to locate a class or view for component

sage
,
1

Hi all,

We are following this guide;

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 <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?
Thanks!

2

Try change the path value to just 'resources/images/icons',.

3

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!

4

Have you tried clearing out the cache?

wp acorn icons:cache
5

Hi @ben,

Thanks, but still no luckā€¦

6

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 <x-icon-name_of_svg_file /> 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.

5 Likes
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'
      ],
8

Hello :wave:. In what file did you add this? Cheers.

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
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