SVGs in React

To create a modern React application, we’ll likely need to use SVGs. Instead of giving every button element text, for instance, we might want to make it lightweight with an icon. In this section, we’ll use a scalable vector graphic (SVG) as an icon in one of our React components.

This section builds on the “CSS in React” we covered earlier, to give the SVG icon a good look and feel right away. It’s acceptable to use a different styling approach, or no styling at all, though the SVG might look off without it.

This icon as SVG is taken from Flaticon’s Freepick. Many of the SVGs on this website are free to use, though they require you to mention the author. You can download the icon from here as SVG and put it in your project as src/check.svg. Downloading the file is the recommended way, however, for the sake of completion, this is the verbose SVG definition: