Level 102
How about this? https://packagist.org/packages/blade-ui-kit/blade-icons
1 like
Sep 5, 2022
14
Level 27
"Best" way to utilize icons
Hi,
I'm curious how you guys are utilizing icons in your apps.
UPDATE: Can someone explain why inline SVG is better than CDN CSS?
- It used to be just including a CDN CSS link and writing
<i class="fa fa-shopping-bag" aria-hidden="true"></i>, e.g. fontawesome 4, I read somewhere that this is not efficient - Fontawesome 5 seems to use something very complicated which I haven't figure out yet
- I came across another https://github.com/feathericons/feather#quick-start which uses javascript, this breaks, i.e. the icons don't show up, when the DOM is replaced after the page is loaded
- Are there other easier, efficient and robust ways, especially one that is able to include icons from other libraries?
Thank you.
Level 27
This package has 84k icons 😱😱😱
Level 27
Any idea of a "built-in" way to get a spinner out of https://packagist.org/packages/blade-ui-kit/blade-icons ?
Level 104
@laracoft find a spinner icon that you like and install it. Then apply a spin animation - copy the CSS properties if you're not using Tailwind CSS
Level 27
Level 27
It's spinning now, basically my app.css wasn't updated to include animate-spin, thanks once again!
Level 104
Mostly using SVG icons these days, e.g. heroicons. They're markup, scale easily, and are easy to componentize.
Level 104
@laracoft what I meant by they're markup 🤷♂️
1 like
Level 27
I did a quick google and found these
Apparently the trend is to use inline SVG, can someone explain why?
Level 27
You guys are fast, can someone explain the pros vs cons of using inline SVG vs CDN CSS?
Level 102
@laracoft Inline means that it just shows the svg directly. If you use a cdn, then the browser needs to download all icons before it can use them
Level 27
For a while there, I felt inline SVGs violated the DRY principle, but since they are not that big in size, not often repeated and can be abstracted into blade components, I guess it is similar to tailwind, just a matter of getting used to.
Thank you.
Level 102
@laracoft Yeah the component part makes a big difference :)
Level 122
the con of icon libraries via cdn is pulling in hundreds of icons when you only need two or three as well as tying you in to a specific set of icons
Please or to participate in this conversation.