Web Components with Embedded Icons

This tutorial explains how you can build custom web components and include embedded SVG icons as part of the component without requiring the web site developers, who use your component, to have to download more that just the one JavaScript file.
Code from tutorial: [e-mail]:prof3ssorSt3v3/stunning-fortnight.git
URLEncoder website - www.urlencoder...

[@notASimpleGuy]

Nice playlist on custom web component. I think you should continue this, you can also add one on multiple different components "talking" to each other ?

[@SteveGriffith-Prof3ssorSt3v3]

Communication / messaging between tabs, windows, components, and service workers is covered in this playlist - th-cam.com/play/PLyuRouwmQCjk-hvtzQSrCSxBd4S0nOMh9.html.
Smaller scope than that would be messaging through custom events, covered in this - th-cam.com/video/wmGmKSLfVCY/w-d-xo.html

[@colindante5164]

Thanks for the video. Consider I needed to use the skull SVG on multiple locations throughout a site; would I use the template tag to reuse the SVG's therefore avoiding multiple SVG tags in the HTML or is there an alternate more efficient way? Thanks

[@SteveGriffith-Prof3ssorSt3v3]

It depends on whether you are talking about the icon as part of the website or as part of a component.
With components, the icon should be embedded in the component like in this tutorial. This is an efficient way to add the icon as part of a component.
With the website, you have lots of options - svg in HTML, svg in CSS, icons in fonts, etc.

[@colindante5164]

@@SteveGriffith-Prof3ssorSt3v3 Sorry I didn't clarify as it does deviate from your tutorial. The SVG would be part of a website and since multiple instances of a SVG would be used (well over 30), what would be the preferred way to minimize the size(kb) of the page when the user makes the initial request ? Thanks

[@kipfitpal]

The professor is back!

[@nro337]

Great video!

[@barungh]

Hello Professor, can you share something about the book you are writing on 'Flutter' ? ☺

[@SteveGriffith-Prof3ssorSt3v3]

Sure. I'm way too busy and it's taken months more than expected. 😀

[@jagdishg.6273]

Thank you Professor!
I discovered your channel just before 2 months while searching for a video that can explain JS files and blob to a 5 year old. After that I just add your name with any js topic I want to learn in youtube.
I was curious about your way of learning. If you can guide us to how to learn any topic in such depth.
Thanks again for all your efforts, Respect.

[@SteveGriffith-Prof3ssorSt3v3]

Part of the depth comes with experience. 27+ years of web development.
Specifically for new topics though, don't just watch or read one tutorial. For every topic:
- watch multiple tutorial videos from different people;
- read written tutorials or books on the same topic;
- read the official documentation;
- try building things with the technology/technique.
The order doesn't matter. Just use multiple sources and build things.

[@VladimirMiroshnichenko64]

much better to create another reusable icon webcomponent and use this it inside your component. for example looks better than long svg

[@SteveGriffith-Prof3ssorSt3v3]

custom components are just wrappers for the shadow-dom html content inside it. The "long" svg is still in the document and visible in the element source in dev tools. If you are going to reuse the same svg icon in multiple other web components, then that would be a good reason to create a new component with the svg in the template.

[@VladimirMiroshnichenko64]

@@SteveGriffith-Prof3ssorSt3v3 thats exactly what I said

[@goffyfoot82]

I just revisited your Web Component 6-part play list ..... now 7!!, and this comes rolling along!! Thank You for all your time and effort creating these. For many years now also ...Peace ... th-cam.com/video/j0qG-afD244/w-d-xo.html&pp=iAQB