How to use SVGR?

Mihriban Alp — Tue, 18 May 2021 20:09:29 +0000

Hey Everyone, this is my first post and i'll mention about SVGR. If you've never heard of it before, SVGR is an amazing tool that converts your SVGs into React components.
There are a few ways for using SVGR:

1. Playground

You can use their online playground. Enter your svg code in the left box (SVG INPUT) then you will see the converted React component on right box (JSX OUTPUT).

You can also create components for React-Native, TypeScript etc. You just need to mark from the left of the screen.

2. Command Line

First you need to install the CLI tool:

npm install @svgr/cli --save-dev
//or use yarn
yarn add @svgr/cli --dev

Now let's think we have an svg named "my_icon.svg" in the project directory. If we write this command line to terminal we will get the code of the our component.

npx @svgr/cli my_icon.svg

import * as React from "react";

function SvgMyIcon(props) {
  return (
    <svg
      height={512}
      viewBox="0 0 499.859 499.859"
      width={512}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path d="M469.223 270.371c9.237-9.218 14.329-21.48 14.335-34.53.007-13.05-5.071-25.318-14.298-34.546a48.44 48.44 0 00-15.946-10.611l20.045-19.969c9.258-9.214 14.365-21.481 14.38-34.543s-5.062-25.342-14.298-34.578l-.519-.519a48.52 48.52 0 00-25.169-13.37c.56-2.968.857-6.007.86-9.094.015-13.06-5.063-25.339-14.298-34.573l-.637-.637c-9.221-9.221-21.48-14.299-34.52-14.299-8.804 0-17.248 2.323-24.645 6.665a48.603 48.603 0 00-11.268-17.559l-.42-.422c-19.033-19.03-50.004-19.033-69.039.001L163.331 148.244l16.204-66.917c6.402-26.44-8.045-53.401-33.605-62.715-14.384-5.242-30.346-4.048-43.792 3.271S79.026 41.96 75.618 56.886l-2.222 9.736C62.768 113.177 45.2 159.96 21.18 205.668 3.181 239.918-3.674 279.973 1.878 318.455c5.744 39.816 23.855 75.938 52.376 104.458 35.01 35.011 81.542 54.286 131.049 54.284h.126c49.552-.032 96.113-19.373 131.105-54.458l37.349-37.448zm-173.93 131.182c-29.328 29.406-68.353 45.616-109.883 45.644h-.106c-41.491 0-80.495-16.155-109.837-45.497-23.906-23.905-39.085-54.173-43.897-87.528-4.656-32.273 1.086-65.852 16.167-94.549 25.228-48.006 43.702-97.237 54.907-146.325l2.222-9.735c1.514-6.633 5.639-12.077 11.615-15.33s12.789-3.761 19.18-1.433c11.194 4.079 17.522 15.887 14.718 27.467l-28.77 118.803c-3.413 12.246 12.364 25.887 25.185 14.137L315 39.001c7.337-7.339 19.276-7.337 26.601-.014l.42.421c3.554 3.555 5.511 8.279 5.511 13.306s-1.958 9.752-5.511 13.307L238.659 169.382c-5.858 5.857-5.858 15.355 0 21.213s15.356 5.858 21.213 0l125.982-125.98c3.554-3.555 8.279-5.512 13.306-5.512s9.752 1.957 13.307 5.512l.637.637a18.695 18.695 0 015.512 13.327 18.697 18.697 0 01-5.544 13.317c-37.611 37.461-89.049 88.677-126.281 125.783-5.87 5.847-5.888 15.344-.042 21.214a14.953 14.953 0 0010.627 4.414c3.829 0 7.659-1.457 10.585-4.372 25.028-24.931 93.218-92.857 117.168-116.678 7.337-7.301 19.261-7.287 26.581.031l.518.519c3.561 3.561 5.518 8.294 5.512 13.329s-1.975 9.764-5.548 13.32c-36.483 36.339-94.262 93.883-130.424 129.934-5.869 5.848-5.887 15.345-.04 21.214a14.955 14.955 0 0010.626 4.413c3.829 0 7.66-1.458 10.586-4.373l68.783-68.524 9.78-9.68c7.337-7.262 19.245-7.229 26.544.068a18.691 18.691 0 015.511 13.316 18.685 18.685 0 01-5.518 13.303L332.675 364.072zM451.123 374.497c3.26-7.615-.271-16.433-7.886-19.692-7.616-3.262-16.433.27-19.693 7.886-5.032 11.754-12.214 22.345-21.346 31.477-11.157 11.156-24.34 19.323-39.184 24.274-7.859 2.621-12.105 11.116-9.484 18.976 2.096 6.284 7.948 10.258 14.228 10.258 1.573 0 3.173-.249 4.748-.774 19.3-6.438 36.428-17.042 50.906-31.521 11.845-11.847 21.169-25.602 27.711-40.884zM490.765 382.77c-7.615-3.264-16.433.261-19.697 7.876-7.009 16.349-17.003 31.079-29.704 43.78-14.772 14.772-32.148 25.807-51.644 32.796-7.798 2.796-11.854 11.384-9.058 19.183 2.196 6.126 7.967 9.941 14.121 9.941 1.68 0 3.389-.284 5.062-.884 23.698-8.496 44.804-21.895 62.732-39.823 15.412-15.411 27.545-33.301 36.064-53.173 3.264-7.614-.262-16.432-7.876-19.696z" />
    </svg>
  );
}
export default SvgMyIcon;

Well, but if we have more than one icon, converting them one by one can be a bit boring and exhausting. One of the best ways to using SVGR is add a script to your package.json to automate the SVG transformation.

// package.json
{
  "scripts": {
    "svgr": "svgr icons -d components/icons --icon"
  }
}

When we run the script below transforms each SVG in the "icons" folder by composing React in "components/icons".

npm run svgr

3. Webpack

For install:

npm install @svgr/webpack --save-dev
//or use yarn
yarn add @svgr/webpack --dev

Now update your webpack.config.js:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

Now we can import our SVGs as a React component and use it:

import React from 'react';
import MyIcon from './my_icon.svg';

const App = () => {
  return (
    <div className="App">
      <MyIcon />
    </div>
  );
}
export default App;

You can check the documentation for more 👉 https://react-svgr.com/docs/getting-started/

Forem: Mihriban Alp

How to use SVGR?

1. Playground

2. Command Line

3. Webpack

Thanks for reading 😊