How to use svg sprite icons in a React app. Create a single svg file that contains all the icons and use a React component to display a specific icon by referencing its id. Use Sly CLI to download icons from the command line.

udaya

Firmware

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The best way to use icons is ansvg spritesheet. This is one of the oldest tactics to optimize image loading. Instead of loading many small images, we load a single image and use code to display only the part we need. We will also build a React component that displays a specific icon by name with full type safe autocomplete.

Use svg sprite icons in React

Create a React component that displays an icon

Create a JSON file with the list of icons