Using SVGs With React

Articles & Tutorials

Make any SVG responsive with this React component (blog.logrocket.com)
Jan 20, 2021
I initially ran into problems on mobile devices with some graphs I was working on creating. After a lot of fumbling, I made some reusable components that can shield me from this pain.
  • Paul Cowan
How to Use SVG Icons in React with React Icons and Font Awesome (freecodecamp.org)
Sep 24, 2020
How can we add icons using SVG to our React apps to improve our visual communication?
  • Colby Fayock
Transform an SVG into a React Component with SVGR (blog.bitsrc.io)
May 26, 2020
How to transform SVGs into a collection of reusable React components.
  • Chidume Nnamdi
How to use SVGs in React (blog.logrocket.com)
Jan 29, 2020
SVG is a vector graphics image format based on XML. SVG stands for Scalable Vector Graphics.
  • Nedy Udombat
Intro to SVG for React Developers (able.bio)
Oct 06, 2019
From simple glyphs to complex visualizations, you can use SVG to create reusable React components that render precise vector graphics, all without any additional libraries or tools.
  • Daniel Matarazzo
How to create a Countdown Component with React (florin-pop.com)
May 15, 2019
Recently I had to create a Countdown for one of my other projects and I thought that it could also make a good tutorial, so in this post we're going to create this component using React and a little bit of SVG.
  • Florin Pop
How to use SVG Icons as React Components? (robinwieruch.de)
Apr 23, 2019
Today I want to give you a straightforward approach on how to use SVG icons as React components for your next React application.
How to use SVGs in React (react.christmas)
Dec 18, 2018
SVGs are here to stay, and React seems to be sticking around for a while as well. So how do you go about combining them?
  • Mira Thoen Feiring
Dynamic Bézier Curves (joshwcomeau.com)
May 23, 2018
We'll go through the basics of working with Bézier curves and SVG in React.js. We'll learn how to build dynamic curves that respond to user input:
How to Create a Component Library From SVG Illustrations (css-tricks.com)
Apr 12, 2018
I discovered that converting SVGs into React components made them much more manageable and even more customizable as illustrations.
  • Graeme Fulton
Developing Games with React, Redux, and SVG (auth0.com)
Feb 06, 2018
Learn how to make React and Redux control a bunch of SVG elements to create a game.
  • Bruno Krebs
SVG illustrations as React Components (blog.prototypr.io)
Oct 14, 2017
This article explains how I built, React Kawaii, an open source library of SVG illustrations that can be easily customisable.
  • Miuki Miu
SVG Patterns in React - Build a Twitter Wall (robinwieruch.de)
Aug 30, 2017
Wondering how you can use SVG in React? This article gives you a walkthrough of different SVG in React options. It showcases it with an implementation of using SVG as backgrounds in React with stylish patterns from svg-patterns or Hero Patterns.
Creating an SVG Icon System with React (css-tricks.com)
Mar 15, 2016
There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet.
  • Sarah Drasner

Video Guides & Talks

React Native Animated Donut Chart with React Native SVG and Animated API (youtube.com)
Sep 02, 2020
In this video tutorial you'll learn how to create an animated donut chart component in React Native using React Native Animated API and React Native SVG.
  • Catalin Miron
Custom React Native Drawer animation with SVG and Masked View (youtube.com)
Jul 29, 2020
In this tutorial we will build a custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native. We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.
  • Catalin Miron
The 5 minutes React Native SVG Path Morphing (youtube.com)
Jun 25, 2019
In this video, we are building an SVG Path morphing in 5 minutes using React Native.
The 5 minutes React Native D3 & SVG Animation (youtube.com)
Jun 11, 2019
In this video, we are building a D3/SVG graph animation in 5 minutes using React Native.
An SVG’s Tale (youtube.com)
May 25, 2019
  • Elizabet Oliveira
An SVG’s Tale (youtube.com)
May 03, 2019
This way, to drive your inspiration, I am going to tell you the story of an SVG image that one day made a very special friend - ReactJS. Alone and despised by its family, SVG yelled Enough! Now you’ll see what I’m all about!
  • Elizabet Oliveira
React Native Morph SVG & Gradient animation (youtube.com)
Feb 22, 2019
In this video we'll use Popmotion Pure to morph SVGs with Flubber and also animate the LinearGradients in React Native.
  • Catalin Miron
Using SVG in React Native (youtube.com)
Jan 07, 2019
In this talk, I'll show you how I integrated the use of SVG with the opinionated component and state system of React, but in the same time keeping things highly performant when interacting with the UI thread - a topic a lot of developers are struggling with.
  • Ori Harel

Courses & Video Series

React for Designers (designcode.io)
Jul 24, 2018
With this course, you'll learn how to build and animate your site from scratch. Create highly customizable components for your design system. A 6-hour course for designers, by designers.
  • Meng To

Libraries

react-kawaii (react-kawaii.now.sh)1776
v0.14.4
Jun 12, 2019
A library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.
  • Elizabet Oliveira
react-icons (react-icons.netlify.com)2637
v3.7.0
May 10, 2019
Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
  • Goran Gajic
  • Kamijin Fanta
pixo (github.com)347
v1.1.2
Oct 02, 2018
Convert SVG icons into React components.
  • Brent Jackson