How to Create SVG Sprite With Iconsby@gmakarov
2,511 reads

How to Create SVG Sprite With Icons

tldt arrow
EN
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

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.

Company Mentioned

Mention Thumbnail
featured image - How to Create SVG Sprite With Icons
German Makarov HackerNoon profile picture

@gmakarov

German Makarov

Senior Software Engineer | Frontend | React | TypeScript


Receive Stories from @gmakarov

react to story with heart

RELATED STORIES

L O A D I N G
. . . comments & more!