Hello! I have a problem that I can't solve. I have a logo created in Figma, and now I want to export it as an SVG and turn it into a React component. For this, I plan to use SVGR. My question is: what is the correct way to do this?

What I'm doing right now is exporting the logo, converting it into a component, but I can't see it in the viewport. I understand why this happens—it's because the logo isn't within the proportions of the viewport. To fix this, I used the viewBox attribute to define the part of the canvas where the logo is and bring it into the viewport. However, this is where I get stuck.

I'm not sure if I'm doing it correctly. I've set arbitrary values for the viewBox just to make sure it captures the logo. Could someone explain the proper way to calculate the viewBox values so I can correctly place the logo in the viewport?

React code:

import * as React from 'react';
import type { SVGProps } from 'react';
import { Ref, forwardRef } from 'react';
const SvgLogo1Svg = (
  props: SVGProps<SVGSVGElement>,
  ref: Ref<SVGSVGElement>
) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="100%"
    height="100%"
    viewBox="0 0 980 428"
    fill="none"
    ref={ref}
    {...props}
  >
    <path
      fill="#1A2435"
      d="M359.392 ..."
    />
    <path
      fill="#5437F4"
      d="M57.02..."
    />
  </svg>
);
const ForwardRef = forwardRef(SvgLogo1Svg);
export default ForwardRef;