Recently I was confronted with SVG in React. I had to use a logo and wanted to use playful SVG background patterns in React. By using SVG, I avoided to use other image formats which would add performance penalties to my application.
The article will guide you through using SVG in React. It shows you how to use plain SVG for your application and how to add SVG patterns in React for your backgrounds. It will demonstrate two alternatives for using SVG patterns in React: svg-patterns and Hero Patterns. Afterwards, you will have used both ( source code ).
SVG simply works in React. React works with the DOM and the DOM is not only HTML. You can use SVG in React the same way as using HTML.
Only the attributes need to follow the camelCase convention that is used in React.
In my case, I had to come up with a logo for my React platform. Bear with me that I am not talented at designing logos, so I went with the pragmatic approach and just came up with a couple of letters and a lovely semicolon. I created it in Sketch and exported it as SVG. Afterward, I could simply paste the SVG into a functional stateless component, remove a couple of unrecognized attributes and converted a few attributes (fillRule, strokeWidth) to Reactâs camelCase convention.
In addition, it would be possible to wrap the Logo component in a <div /> container with CSS to align it in the application.
An alternative approach is using the SVG in a src attribute in an <img /> tag. The SVG could be in a logo.svg file not as component anymore but as plain SVG. Afterward, the image could have an alt attribute for improved accessibility.
In a CSS file, you would give the logo class a bit of styling.
It would make animating a SVG logo in React with plain CSS simple as well.
Basically thatâs it for using SVG in React. You can simply extract a SVG from an application, such as Sketch and Adobe Illustrator, and paste it into your source code as standalone component or as svg source file for an HTML image tag.
I wanted to add playful SVG patterns as background in my React application, because most often I am not investing too much time when it comes to styling. SVG patterns are a simple approach to fill the monotonous white backgrounds in an application.
Personally, I ended up using svg-patterns because it doesnât add any other dependency and is kept lightweight. Other SVG pattern libraries often add heavyweight libraries such as D3.js, but not svg-patterns.
You can install the library on the command line with npm install --save svg-patterns and get started using it in React. There are plenty of different patterns showcased on the official GitHub repository.
Thatâs only a rectangle with a fixed height and width which is filled with a svg pattern. But how to add these SVG patterns as background?
I had the use case of adding the pattern as background for a wall of Twitter tweets in React. The react-tweet-embed node package was everything that I needed to display a wall of embedded tweets by only passing identifiers of my desired tweets. You install it simply on the command line: npm install --save react-tweet-embed . The following React component shows a wall of tweets.
As you can see, the TweetEmbed component takes a few optional options props too. A bit of CSS is sufficient to align the tweets and wrap them into a wall of tweets.
So what about the SVG pattern as background? You have a SVG pattern and a wall of tweets in plain React. Now you can mix them together in a React component and by using CSS.
And the missing CSS to align the SVG pattern with an absolute position.
Last but not least, you can abstract the SVG pattern as a reusable React background component.
By using Reactâs children attribute, you can pass any input to your new BackgroundPattern component.
Now you can give your application various background patterns and put different content in it.
There is another alternative to the previously used svg-patterns node package. It is called Hero Patterns and doesnât require you to install another library as dependency. Simply select your desired SVG background on the website, copy the content and paste it into an own made up CSS class.
Now you can define an abstract HeroPattern component and pass it the desired className and children. You can copy and paste more Hero Patterns from the website and use it in various CSS classes.
Using Hero Patterns is an easy way to integrate SVG patterns as background without any external dependencies. But you have to keep your pattern definitions in CSS and after copy and pasting it can become messy to change them. After all, thatâs the tradeoff between using the svg-pattern node package and Hero Patterns.