Working with SVGs in React

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

Ross Bulat

--

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 JSXimport { ReactComponent as Logo } from './logo.svg';const MyComponent = () => {
return (
...
<Logo />
);
}

The package used here is called SVGR. It is the most widely adopted means of transforming SVGs into React components.

SVGR — SVG (React)

SVGR takes external SVG files and transforms them into React components. The package hosts a range of utilities, each of which offering solutions that depend on the context of your SVG manipulation.

The most widely adopted utility at this time is their Webpack loader, currently on 1.4 million weekly downloads, indicating this is easily the Javascript community’s favoured approach for importing SVGs into React.

The Webpack loader is one of three main solutions that SVGR offer, depending on whether you wish to manipulate SVGs on the command-line, in an automated script, or when you are importing them into modules:

  • @svgr/cli: The CLI tool, giving us simple commands to either convert single files or entire directories of SVG files into React component .js files

--

--

Ross Bulat

Programmer and Author. @ Parity Technologies, JKRB Investments