Add SVGs as React Components with Create React App 2.0
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.