How to use SVGR?
Tags: javascript, react, webdev
Published: 2021-05-18 20:09:29

Hey Everyone, this is my first post and i'll mention about [SVGR](https://react-svgr.com/). If you've never heard of it before, SVGR is an amazing tool that converts your SVGs into React components.<br/>There are a few ways for using SVGR:

<br/>
#### 1. Playground
You can use their online [playground](https://react-svgr.com/playground/). Enter your svg code in the left box (SVG INPUT) then you will see the converted React component on right box (JSX OUTPUT).<br/>

![Playground - SVGR — Firefox Developer Edition 5_10_2021 2_14_43 AM (3)](https://user-images.githubusercontent.com/58886855/117895443-08c07a00-b2c7-11eb-9d69-13eebdb304b4.png)
You can also create components for React-Native, TypeScript etc. You just need to mark from the left of the screen. 
<br/>
#### 2. Command Line
First you need to install the CLI tool:
```javascript
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.

```javascript
npx @svgr/cli my_icon.svg
```
```javascript
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. 
```javascript
// 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".
```javascript
npm run svgr
```
<br/>

#### 3. Webpack
For install:
```javascript
npm install @svgr/webpack --save-dev
//or use yarn
yarn add @svgr/webpack --dev
```
Now update your webpack.config.js:
```javascript
// 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:

```javascript
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/](https://react-svgr.com/docs/getting-started/)
<br/>
#### Thanks for reading 😊