Blade Icons

A package to easily make use of SVG icons in your Laravel Blade views. Originally “Blade SVG” by Adam Wathan.

Turn…

<!-- camera.svg -->
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>

Into…

<x-icon-camera class="w-6 h-6" />

Or into…

@svg('camera', 'w-6 h-6')

Search all 84,305 Blade Icons:

https://blade-ui-kit.com/blade-icons#search

But for a better overview you may want to go to the homepages of the icons set instead. For example:

https://heroicons.com/

Sage Blade Icons

Sage Blade Icons is a simple Composer package / wrapper to use Blade Icons with Sage 10.

https://github.com/zirkeldesign/sage-blade-icons

(I didn’t use this. because I got errors)

Install via package Composer:

composer require zirkeldesign/sage-blade-icons

This package comes with a build-in dependency for the base package Blade Icons. To use a specific icon package (i.e. Blade Heroicons), you’ll need to require the package via Composer:

composer require blade-ui-kit/blade-heroicons

After this you should be able to use a package-depended Blade component to include your icon in the Blade views. I.e.

<x-heroicon-o-adjustments class="w-6 h-6 text-gray-500"/>

Roots Documentation:

How to use blade-icons-blade-icons

Note: I prefer to install the blade icons in the theme folder, so I should try this:

(https://discourse.roots.io/u/zupa)

Zupa: I had some problems to installing 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.
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.

To get Blade Icons to work I did this:

note: I did not use the wrapper from zirkeldesign, because it gives errors

But following the guide on roots.io I did this:

In the bedrock(!) folder:

lando composer require blade-ui-kit/blade-icons
lando wp acorn package:discover

Discovered Package: blade-ui-kit/blade-icons
Discovered Package: nesbot/carbon
Discovered Package: log1x/acf-composer
Discovered Package: log1x/sage-svg
Discovered Package: roots/sage

lando wp acorn vendor:publish --tag=blade-icons

Copied File [/app/vendor/blade-ui-kit/blade-icons/config/blade-icons.php] To [/config/blade-icons.php]
Publishing complete.

Then edit the created config/blade-icons.php:

Roots docs: From the published config/blade-icons.php file, we recommend setting the default set to point to your theme directory:

<?php

return [
    'sets' => [
        'default' => [
            'path' => 'web/app/themes/MYTHEME/resources/images/icons', # Relative path to the new directory
            'prefix' => 'icon',
        ],
    ],
];

Add a new directory inside resources/images/ named icons/ and place your SVG icons in this directory.

Adding icon sets

To add aditional icon sets, require them as Composer dependencies the same as you did for the blade-icons package. In this example, we’ll add the blade-heroicons package:

lando composer require blade-ui-kit/blade-heroicons

# again I need to discover and publish, even if I don't really need the config for heroicons
lando wp acorn package:discover

# maybe discover was enough? Anyway I also published
lando wp acorn vendor:publish --tag=blade-heroicons-config

I can now add icons to my blade views:

<x-heroicon-o-adjustments class="w-20 h-20 text-blue-300"/>

The @svg directive does not work, probably because I have also installed the svg-sage package (?)

And then there is also this:

ben roots dev Mar 27

In our case, we’re using the blade-icons package with a couple different icon sets. We needed to run wp acorn icons:cache and the performance issues were solved

@Twansparant @monokai have y’all had any luck digging deeper into the source of your issue?

If you aren’t using blade-icons, are you using another package that might have registered a command that would allow things to be cached? You can check by running wp acorn and looking at the list of commands