Add SVGs as React Components with Create React App 2.0

Elijah Manor
InstructorElijah Manor
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr webpack loader to wrap SVGs in React components as a named export. This let’s you either grab the filename from the default export or grab a wrapped SVG component depending on your needs.

Instructor: [00:01] First, let's create a new React app with npm init react-app in the name of your application. I'll call it CRA2-SVG. Immediately, cd into the app after it's bootstrapped. Once everything is created, then open our VSCode with code period and start the React dev-server with npm start.

[00:20] Open the app JS file which is the code for the app running on the right. Right now, the import of the log SVG on line 2 returns the file name that could be used as the source of an image like on line 10.

[00:33] However, in React app 2.0you could also import a wrapped React component version of the SVG, and rename it to something else. We'll call it React logo. Then, you could use this component as you would any other React component.

[00:48] When you save, you'll see it render on the right. The SVG is quite large, but that's OK. Now, you could come back and add the class name and all props, and it will be applied just like the image above. Now, our image and React logo component look the same.

[01:03] However, if we inspect the elements in our dev tools, you'll notice a distinct difference. The image renders as an image element, but the React logo actually renders as an inline SVG, and you could dive in and see the G in path elements.

[01:18] The cool thing about this difference is that, with an inline SVG, you can actually style it via CSS. If you open the app CSS file, you can add a new rule set for app logo and target the G element.

[01:31] We'll change the fill color to salmon and save, and now our logo is salmon. Let's go a bit further. We'll now target the path element inside the app logo, and change the stroke to pale goldenrod, and change the stroke width to 10 pixels, and a fill of none, and a stroke-array describing a length of 35 pixels with a gap of 15 pixels.

[01:55] Then, add an animation with the name of orbit, a one second duration, and iteration count of infinite and a linear timing function, which means we'll need to define an animation with key frames name of orbit. We'll animate to a stroke-offset of 50 pixels, which is the sum of the dash array.

[02:15] Now, our dashes are animating. The build it inline SVG really opens up the opportunity to be able to customize and theme SVGs across your application.

~ 47 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today