loading...

re: SVG icons are not "settled science" VIEW POST

FULL DISCUSSION
 

I was skeptical — I think in general SVG is the way to go — but you bring up one important use case:

Abstracting them into JavaScript components, usually with React, is the status quo. This approach adds a dependency and increased payload, about 40kb in the case of React, which definitely impacts page speed

That’s true! If you are building a bare-bones site without much interactivity, React would definitely be too much.

You could probably get away with similar markup with a native web component (just a few lines of JavaScript).

Nice work thinking through it from all angles!

 

As much as I love WC it’s sub-optimal because the icons won’t work with static pages or server rendered pages or email templates. WC (really just Custom Elements) also introduce the need for another build step or more config, requires test coverage, and probably needs a polyfill when using.

Skip all of it with a simple custom tag+attribute!

 

I don’t think you need a build step to do what I was suggesting for static sites but I get where you’re coming from — email templates would certainly be a great place to use icon fonts!

code of conduct - report abuse