This story was originally published on HackerNoon at: https://hackernoon.com/how-to-create-svg-sprite-with-icons.
The best way to use SVG icons is to create an SVG sprite. Here's an easy tutorial for beginners and pros alike.
Check more stories related to programming at: https://hackernoon.com/c/programming.
You can also check exclusive content about #frontend, #svg, #webpack, #vite, #how-to-create-svg-sprite, #what-is-svg-sprite, #how-to-create-icons, #hackernoon-top-story, #hackernoon-es, #hackernoon-hi, #hackernoon-zh, #hackernoon-fr, #hackernoon-bn, #hackernoon-ru, #hackernoon-vi, #hackernoon-pt, #hackernoon-ja, #hackernoon-de, #hackernoon-ko, #hackernoon-tr, and more.


This story was written by: @gmakarov. Learn more about this writer by checking @gmakarov's about page,
and for more stories, please visit hackernoon.com.



Developers often insert SVG directly into JSX. This is convenient to use, but it increases the JS bundle size. In the pursuit of optimization, I decided to find another way of using SVG icons without cluttering the bundle. We will talk about SVG sprites, what they are, how to use them, and what tools are available for working with them.

Starting with theory, we will write a script that generates an SVG sprite step by step and conclude by discussing plugins for vite and webpack.

Ver todos los episodios