Embedding SVG code into React
This is my first ever blog post, and I would appreciate feedback on the technical content as well as my general writing style :)
Why would you want to use SVGs (Scalable Vector Graphics)? The major reasons would be Resolution, Flexibility, and Great Browser Support.
Resolution: SVGs are commonly made with vector-based graphic design software, such as Illustrator, Sketch, and Inkscape. This means they can be enlarged or shrunk to whatever size without them losing resolution or increasing in file size. This is great news :)
Flexibility: Let your creativity run wild with SVGs, they are fully customizable using CSS. Accessibility options can be implemented, and you can add interactivity with JavaScript. You can also provide fallback images or background color if for some weird reason (ancient browsers etc.) SVGs aren’t supported on a particular machine.
Well… great browser support just means exactly that.
There are many ways to embed SVGs into your website regardless of the framework you use. Sara Soueidan in her article details 7 ways of doing this. For this post, however, I’ll be using the inline method with a basic create-react-app. The final file would look like this:
Find the Demo in the CodeSandbox below, scroll further down for explanations.
View the complete code on Github: completeFile
So let’s start
Create your SVG file using your favorite vector tool, save the file, and open with any text editor. You can use the generated code directly, but I recommend optimization using online tools. Here is a great site for that.
The benefits of optimization include: making your SVG code more readable and smaller by taking away all unnecessary header texts your software usually adds.
Next, create a new file and paste the optimized SVG code.
Notice in the code above, the React className rule still applies, so you have to change ‘class’ in your original SVG code to ‘className’. I have exported the styles to an external CSS file, but if I wanted to leave it inline, I would have to add curly braces, the ‘React way’ [see lines 14–16 below]:
Awesome! all we have to do now is to import this file into our App. As any React component, you can pass props to it for conditional rendering to give desired animation-like effects.
Summary:
Embedding SVGs inline in React opens a whole new world of creative possibilities and when combined with JavaScript animation libraries such as GSAP you can make your projects more impressive.
View the complete code on Github: completeFile
