How to use SVGs in React

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • plugins

    🍣 The one-stop shop for official Rollup plugins (by rollup)

    In Webpack 5, this is (surprisingly) simple to setup. Parcel 2 handles this out of the box with a special import prefix. Rollup has an official plugin.

  • svgr

    Transform SVGs into React components 🦁

    SVGR is the library that powers this ability. Setting it up could be a little hairy, thankfully many popular frameworks (Create React App, Gatsby) support this feature out of the box.

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • node

    Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles:

    All examples will use create-react-app (CRA) and CSS Module. A way to start a CRA project is using codesandbox. Otherwise, make sure Node is installed (any TLS versions will do) and run this:

  • sanity-pizza

    See the getting started guide for further information. If you'd like a reference, see the project on Github.

  • create-react-app

    Set up a modern web app by running one command.

    All examples will use create-react-app (CRA) and CSS Module. A way to start a CRA project is using codesandbox. Otherwise, make sure Node is installed (any TLS versions will do) and run this:

  • codesandbox-client

    An online IDE for rapid web development

    All examples will use create-react-app (CRA) and CSS Module. A way to start a CRA project is using codesandbox. Otherwise, make sure Node is installed (any TLS versions will do) and run this:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts