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.

4 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'
      ],