Working with SVGs in React

Importing SVGs with Webpack and animating them via CSS & Styled Components

SVGs are now the standard means of illustration

This article will explore the standard tools used for importing SVGs in React projects today, before delving into some techniques for theming and animating SVGs with CSS and Styled Components.

SVGs are now widely supported within browsers, with their capabilities further enhanced with CSS styling to control state transitions and animation. Modern web apps of today rely on SVGs to aid in responsive app design, smaller file size and less HTTP requests, making a far greater user experience than using pixel-based images.

For the React framework, SVGs are now very well supported via a Webpack loader, where SVGs can be imported as components into any module and optimised at build time. Create React App have been using this loader since version 2, where importing SVGs and embedding them in your JSX is a breeze:

// importing a logo SVG and embedding it in JSX
import { ReactComponent as Logo } from './logo.svg';
const MyComponent = () => {
  return (
     ...
     <Logo />
  );
}