Notes

SVG Icon System in React

Edit on GitHub


ReactJS
2 minutes

SVG as Image

 1import React from 'react'
 2import logo from './logo.svg' // Tell Webpack this JS file uses this svg
 3
 4console.log(logo) // /logo.84287d09.svg
 5
 6function Header() {
 7  // Import result is the URL of your image
 8  return <img src={logo} alt="Logo" />
 9}
10
11export default Header

SVG as a React component

You can import an SVG as a React Component. This has been supported since Create React App 2.0 (react-scripts@2.0.0 and react@16.3.0)

1import { ReactComponent as MyIcon } from './icon.svg'
2export { MyIcon }
1import { ReactComponent as Logo } from './logo.svg'
2const App = () => (
3  <div>
4    {/* Logo is an actual React component */}
5    <Logo className="App-logo" alt="logo" />
6  </div>
7)

Don’t forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

A ReactComponent SVG will show as inline <svg> when rendered. You can now use all the CSS magic.

 1.App-logo g {
 2  fill: red;
 3}
 4
 5.App-logo path {
 6  stroke: palegoldenrod;
 7  stroke-width: 10px;
 8  fill: none;
 9  stroke-dasharray: 35px 15px;
10  animation: orbit 1s infinite linear;
11}
12
13@keyframes orbit {
14  to {
15    sroke-dashoffset: 50px;
16  }
17}

SVG with Props

To be continued.. Will probably have to leave the .svg files and add the paths in a .jsx file so we could use props

Case for converting SVGs into React components

  • Theming. You can change the color of all icons when you change the theme. But i’d argue you can do that with CSS as well
 1// wrapping SVGs in theme-able components
 2import styled from 'styled-components';
 3import theme from 'styled-theming';
 4
 5export const backgroundColor = theme('mode', {
 6   light: '#fafafa',
 7   dark: '#0e0f11'
 8});
 9const LogoWrapper = styled.div`
10   svg {
11      fill: ${backgroundColor};
12   }
13`;