Web Icons with No External Libraries! (🙅 No More Font Awesome)
Вставка
- Опубліковано 26 сер 2024
- Don't you hate when you're using Font Awesome, and it loads 500KB of JavaScript just to render 3 ICONS? You don't have to rely on big fat external libraries to do it for you! You can do it all by yourself, just grab the SVG and you're good to go! Watch the video to learn more (what big external libraries DON'T want you to know...)
The site I was using for the icons:
iconify.design/
🌐 ericmurphy.xyz/
Affiliate links to services I use:
www.vultr.com/... Get a VPS to host your website or server.
![АЛАУДИНОВ у Скабеевой: эти их ВСУ нас НЕ ДОГОНЯТ 😁 [Пародия]](http://i.ytimg.com/vi/an0anqU4WGQ/mqdefault.jpg)
You're missing the whole point of Iconify. Their library is just about 13kb and it replaces the icon tags with svgs automatically, by loading them dynamically from an API. It also caches the loaded icons locally so that they are only loaded once and new requests and pages that use the same icons won't incurr any further overhead.
Thanks alot man. I was able to increase my Google lighthouse performance a bit by swapping out of the AwesomeFont kit code vs SVG. Much appreciation!!
Love to hear it!
That's the most useful tip I have heard in a while, thank you sir. I found literally zero sources on how to get rid of the bloat introduced by font-awesome. In a plain nextjs application, with the different setup strategies for font-awesome or fort-awesome, the minimum you can achieve is an additional 20kb loaded for all of your pages. That refers to around 10% of additional chunk size per page.
Love to hear it! Glad it helped
Thank you for your response. I failed to mention how helpful your video was because it gave me the info to just tackle the whole use of svg's in a very direct way. You are right the only thing that was helpful from FA was the svg. So thanks again!
This was awesome! I tried to use Font Awesome but couldn't get the kit to load properly with my site. This is a nice alternative and taught me more about a different attribute. Many thanks!
Thanks but what about size of code i tried to put the svg icons on my website on blogger i noticed that code size increased from 40kb to 50kb how to fix it.
Awesome, thank you. Had to tweak some styles to work with the svg, but looks and works great.
Awesome video! Something so simple. I am running into the same thing you did with FA. I am only using 2 icons out of FA. The difference in my project is that I am doing a build using SASS. Your way may seem a little management work on the developer, but that effort pays dividends with site users. Thank you for making this!
That's what I wanted !
Thanks man. This video is really helpful. Have really tried others but didn't work until i met this video
Thank you. I have been looking for this solution, avoiding those unnecessary external libraries
Great video !!! It makes your website load faster, but it takes a bunch of lines that a boring thing sometimes exp if you have consecutively five.
Thanks for this simple and straight to the point video! 👏🏽
Great video explanation. Loved that you showed the amount of resources before and after. Thanks for the video!
Iconify Fixed My Website Icons, Thanks So Much
This is wonderful! Thank you very much, good sir!
Thanks a lot for giving this simple but logical solution.
How to use svg's in css without smashing it into html ?
like keeping it in another file .. but the fill becomes a problem !
You could probably still use the fontawesome tags but make a server-side script to "compile" it into what will actually be served to the client.
love how you go into dev tools. perfect video.
yeah that is what i knew also before, i wanted to actually create my own font library, I do also fight here to get more than font awesome into my new angular template, so i guess it will be easier to stay into my known practics i understand and that buch will go propably down. you can also store those svgs into a folder and call them by name i guess after setting to include & require that folder and than callin those svg elements
Yeah that's another more efficient method if you don't mind doing that yourself 👍
Thanks man. I got the same result without "identify", just grab the SVG code from FA and parse as you did.
Yes you don't need iconify, they just make it a little easier than going through the Dev tools
I use preact for my projects and using local svg is the best thing. It doesn't show any errors.
I'm kind of thinking on making a community plug-in on for instance figma where designers design icons and stuff and getting them with JavaScript as svg's or png's and replace font awesome
Thanks man.
Is there a workaround to subscribe multiple times on a UA-cam channel? This one definitely deserves it.
You save cellular data as well this way! Thank you for the video!
thank you my dude was looking an alternative to optimize my portfolio 👏👏
Very informative, I didn’t think to monitor the amount of data being loaded using font awesome. I’v learned something today. Thanks
Just what I was looking for, Thank you
thanks mate!
Good thinking sir, thank you.
thanks broyher thats help me alot ,good work
This is where I want to go, but I could not get the font size to work. I had to delete the width and height and do width and height in css instead. Is that because my svg icon width and height units are px?
actually font awesome gives me some problem not letting the icon apear. i wont ever use fontawesome
Thanks❤❤
thank you bro, you saved my life
i love you
Great job! You just gave me a homeWork.. :) Subscribed. Keep up the good work!
this is really brilliant!! thank you!!
I do a similar thing, but you can put all your svg icons into one file and give them an id and use xlink to show them. This way you only have one file to load, as it gets cached. eg
This code would show the icon with the id of hat. The svg file can have hundreds of icons with a different id. Of course you have to set the width and height in css, as SVG has to have a width and a height. Let me know if you want to know more
@Entertainment Roller Coaster I am always around
@Entertainment Roller Coaster Once you made your file. Use the first code I posted to show it. eg
Just change the xlink line to whatever icon you want to show eg
@Entertainment Roller Coaster You have all your icons in one file. That means your icons will load faster as it is one call to the file. As for the individual icons you can either make them yourself in illustrator and export the data, or download and use other peoples svgs. I do a bit of both. the important part is the viewBox, and the paths. Personally I would optimise your svg online before putting it in the file. This removes all the unnessary groups which you don't need on the web. I also remove colours. Then you can colour your svg using css.
Lovely video, man. Thanks a lot.
This kind of video is what I needed. I am very much a beginner, but I wondered why I have to link huge external libraries, when I needed only 1-2 icons. Lots of unused codes in the libraries, and damn, now I am using svg, it makes codes appear larger, but i just embed it inside span tag and collapse it.
im using boxicons and is open source, besides that with that library they easily allow you to copy the SVG file, give them a try.,
Awesome. Thanks!
Thanks Eric this is great video. I had been using FA in many of my projects and this is a great way to optimize the size. But i am just wondering how would you approach the problem if we have to use FA in the pseudo elements in css. Would there be a better way to do it ?
Thanks! Yes, copy the SVG code and convert it to a data URL using a site like this: yoksel.github.io/url-encoder/ Now you can use it like a background-image in CSS. You have to manually style the pseudo-element it to make it look right so not be as convenient as FA, but still works well.
@@EricMurphyxyz Thanks for the reply. I will try this approach. 👍🏽
Thank you very much buddy !🙌
Just wow. Thank you so much!!!
I thought the browser downloads the files once, or is downloaded on every request?
thank-you, this was very helpful
That really looks cool! Any suggestions to avoid too much svg code which could get hard to identify the specific icons when we are working on big projects or massive codebase?
Just like creating our own icon-fonts using any svg code we choose for?
Keep going!
Thanks! You can move all the SVG code to a separate file and replace it with inside the SVG tag.
@@EricMurphyxyz how can I do that?
@@muhammadhaiqal531 I explained it pretty clearly? Copy the SVG code to a separate file, name it something like your-icon.svg and then reference it with the tag I showed above
@@EricMurphyxyz yes I did exactly that, but somehow it doesn't work, but I figured a workaround so yeah
@@muhammadhaiqal531 i tried too, but it didn't work
it was really help full ....thank you
thank you very much!
🙏🙏🙏🙏
Thanks a lot, that was helpful!
Thank you!
remove the xlmns and let's see if it loads the icon.
Very helpful. Thank you.
Thank you for the intel.
You are a fucking genius broo☠Even after 3years you solved my problem
The real question is, how do you display this icon as pseudo element
Could you perhaps save the SVG to your images folder and put it's URL in the content " " property? I haven't tried it, but that's what I would try first
turn it into a data url
Thanks man.u saved my time .
Iconmonstr has many cool icons as well
Nice, great resource! Never heard about this before
Thanks bro I was not able to use font awesome
Thanks for this vedio
Really useful. Thanks
this looks nice, but I think a link would be needed?
You mean an attribution link?
Thats great! Thanks!
wow nice tip!
Thank you for sharing this video :-)
Thank you so much!!! ❤️
Genius!
Thank you
Thanks 👍
you helped me! thanks
Awesome :)
thanks for the idea!
subscribe done 👍
Thanks bro
Very nice!
thanks a lot 🤍🤍
Thank you bro it's working 💓💓💓😊😊😊😊😊😊
thanks
Thank you, you have shown easy path otherwise I was getting box instead of icon i desired.Thanks again to solve it without going through all that process.By do by, u decoded font-awesome secret so its coming for u.
Would this work with the code from Illustrator SVG,
I would assume so, should work with any SVG code.
ty
really helpfull, thanks a lot
which OS are you using??
Arch Linux!
Nice tip
たすかったよ ありがとう
Wonderful content though. never knew that existed.
niceeeeeee thanks and i like it
Awesome
thx
genio te quiero mucho
Thanks Dear
Give me to great skills
I'm probably just being silly, but is this definitely allowed?
Font Awesome is under an open source license, so it's all good.
@@EricMurphyxyz Thanks, this is fucking awesome then 🤣
But as programmer you allways want a way simplify things and let machine do all stuff for you instead of copying every single icon code. I think javascript itself is a bloated language but we use it anyways because it does the job.
There are more efficient ways to use icons without bringing in the bloated Font Awesome library. I know react-icons for React is good, but I'm not sure of an easier way to do it in just HTML. That said, I only really need around 5 icons for a given website and copy & pasting a small amount of icons is not a big deal for me. The performance savings are worth it for me, but it's up to you.
I use boxicon
Wow, there's a lot of great icon resources I never knew about
جزاک اللہ خیرا
that is a good suggestion until they close the sight or change their policies, using programs like GIMP and Inkscape to create your own icons would be a useful skill to learn.
There are still tons of ways to get the svg code without that specific website, it's not just something they can change their policies and remove. Making your own icons may be a useful skill but nobody is going to hand render a Facebook icon for their website
@@EricMurphyxyz yeah, i know, i think knowing how to insert svg files into their website is a god skill, that's all, your advice is sound.
Dude, just get a font awesome pro license and then can include just the icons you want.
Even the official Font Awesome library brings in a bunch of unnecessary JavaScript. React Icons is a lot more light weight.
Thanks bro