Turn…<\/p>\n\n\n\n
<!-- camera.svg -->\n<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <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\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 13a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n<\/svg><\/code><\/pre>\n\n\n\nInto…<\/p>\n\n\n\n
<x-icon-camera class=\"w-6 h-6\" \/><\/pre>\n\n\n\nOr into…<\/p>\n\n\n\n
@svg('camera', 'w-6 h-6')<\/pre>\n\n\n\nSearch<\/strong> all 84,305 Blade Icons:<\/p>\n\n\n\nhttps:\/\/blade-ui-kit.com\/blade-icons#search<\/a><\/p>\n\n\n\nBut for a better overview you may want to go to the homepages of the icons set instead. For example:<\/p>\n\n\n\n
https:\/\/heroicons.com\/<\/a><\/p>\n\n\n\n\n\n\n\nSage Blade Icons<\/h4>\n\n\n\n
Sage Blade Icons is a simple Composer package \/ wrapper to use Blade Icons<\/a> with Sage 10<\/a>.<\/p>\n\n\n\nhttps:\/\/github.com\/zirkeldesign\/sage-blade-icons<\/a><\/p>\n\n\n\n(I didn’t use this. because I got errors)<\/p>\n\n\n\n
Install via package Composer:<\/p>\n\n\n\n
composer require zirkeldesign\/sage-blade-icons<\/pre>\n\n\n\nThis package comes with a build-in dependency for the base package Blade Icons<\/a>. To use a specific icon package<\/a> (i.e. Blade Heroicons<\/a>), you’ll need to require the package via Composer:<\/p>\n\n\n\ncomposer require blade-ui-kit\/blade-heroicons<\/pre>\n\n\n\nAfter this you should be able to use a package-depended Blade component<\/a> to include your icon in the Blade views. I.e.<\/p>\n\n\n\n<x-heroicon-o-adjustments class=\"w-6 h-6 text-gray-500\"\/>\n<\/pre>\n\n\n\nRoots Documentation:<\/h4>\n\n\n\n
How to use blade-icons-blade-icons<\/a><\/p>\n\n\n\nNote: I prefer to install the blade icons in the theme folder, so I should try this:<\/p>\n\n\n\n
(https:\/\/discourse.roots.io\/u\/zupa<\/a>)<\/p>\n\n\n\n
\n\n\n\nZupa: <\/strong>I had some problems to installing blade-ui-kit\/blade-icons<\/code> package and got the same error.<\/p>\n\n\n\nFixed by:<\/p>\n\n\n\n
- Install with
composer require blade-ui-kit\/blade-icons<\/code> in sage theme root folder, not bedrock root folder.<\/li>- Create folder called
config<\/code> in theme root folder<\/li>- Run
wp acorn package:discover<\/code> or else package config might not be detected\/able to publish config-file<\/li>- Run
wp acorn vendor:publish --tag=blade-icons<\/code> to publish config file to config folder.<\/li>- In config -file, uncomment everything and let path be
resources\/svg<\/code> and create that folder in resources (or change if you want).<\/li>- In
bud.config.mjs<\/code> add svg to assets array like this .assets([\"images\",\"svg\"])<\/code> (if you chose to create the svg -folder)<\/li>- Run
wp acorn config:clear<\/code> in theme root folder.<\/li>- Add your icons\/svg -files to
resources\/svg<\/code><\/li>- Run
yarn build<\/code> and yarn dev<\/code><\/li>- Run
wp acorn optimize<\/code><\/li>- Run
wp acorn icons:cache<\/code><\/li>- Use
<x-icon-name_of_svg_file \/><\/code> to display the icon.<\/li><\/ol>\n\n\n\nDon\u2019t 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<\/code> package as it is already included in the other packages I believe.<\/p>\n\n\n\nTo get Blade Icons to work I did this:<\/p>\n\n\n\n
note: <\/strong> I did not use the wrapper from zirkeldesign, because it gives errors<\/p>\n\n\n\n
\n\n\n\nBut following the guide on roots.io I did this:<\/strong><\/p>\n\n\n\nIn the bedrock(!) folder<\/strong>:<\/p>\n\n\n\nlando composer require blade-ui-kit\/blade-icons\nlando wp acorn package:discover\n\nDiscovered Package: blade-ui-kit\/blade-icons\nDiscovered Package: nesbot\/carbon\nDiscovered Package: log1x\/acf-composer\nDiscovered Package: log1x\/sage-svg\nDiscovered Package: roots\/sage\n\nlando wp acorn vendor:publish --tag=blade-icons\n\nCopied File [\/app\/vendor\/blade-ui-kit\/blade-icons\/config\/blade-icons.php] To [\/config\/blade-icons.php]\nPublishing complete.\n<\/pre>\n\n\n\nThen edit the created config\/blade-icons.php<\/code>:<\/p>\n\n\n\nRoots docs: From the published config\/blade-icons.php<\/code> file, we recommend setting the default set to point to your theme directory:<\/p>\n\n\n\n<?php\n\nreturn [\n 'sets' => [\n 'default' => [\n 'path' => 'web\/app\/themes\/MYTHEME\/resources\/images\/icons', # Relative path to the new directory\n 'prefix' => 'icon',\n ],\n ],\n];\n<\/pre>\n\n\n\nAdd a new directory inside resources\/images\/<\/code> named icons\/<\/code> and place your SVG icons in this directory.<\/p>\n\n\n\nAdding icon sets<\/h4>\n\n\n\n
To add aditional icon sets, require them as Composer dependencies the same as you did for the blade-icons<\/code> package. In this example, we’ll add the blade-heroicons<\/code> package:<\/p>\n\n\n\nlando composer require blade-ui-kit\/blade-heroicons\n\n# again I need to discover and publish, even if I don't really need the config for heroicons\nlando wp acorn package:discover\n\n# maybe discover was enough? Anyway I also published\nlando wp acorn vendor:publish --tag=blade-heroicons-config <\/pre>\n\n\n\nI can now add icons to my blade views:<\/p>\n\n\n\n
<x-heroicon-o-adjustments class=\"w-20 h-20 text-blue-300\"\/><\/code><\/p>\n\n\n\n![\"\"](\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/08\/image-2.png\")
<\/figure>\n\n\n\nThe @svg directive does not work, probably because I have also installed the svg-sage package (?)<\/p>\n\n\n\n
<\/p>\n\n\n\n
And then there is also this:<\/strong><\/p>\n\n\n\nben<\/a> roots dev Mar 27<\/a><\/p>\n\n\n\nIn our case, we\u2019re using the blade-icons<\/code> package with a couple different icon sets. We needed to run wp acorn icons:cache<\/code> and the performance issues were solved ![\":tada:\"](\"https:\/\/discourse.roots.io\/images\/emoji\/twitter\/tada.png?v=12\")
<\/p>\n\n\n\n@Twansparant<\/a> @monokai<\/a> have y\u2019all had any luck digging deeper into the source of your issue?<\/p>\n\n\n\nIf you aren\u2019t 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<\/code> and looking at the list of commands<\/p>\n","protected":false},"excerpt":{"rendered":"Blade Icons A package to easily make use of SVG icons in your Laravel Blade views. Originally “Blade SVG” by Adam Wathan. Turn… 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45,17],"tags":[297,704,735],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14827"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14827"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14827\/revisions"}],"predecessor-version":[{"id":14878,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14827\/revisions\/14878"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}