Как настроить Next на {ReactComponent as Logo} в React поекте?

Question

[Дмитрий Путилов]

Как настроить Next что бы можно было импортить svg в ReactComponent?

Потому что сейчас он выдает вот такую вот ошибку

TS2614: Module  "*.svg"  has no exported member  ReactComponent . Did you mean to use  import ReactComponent from "*.svg"  instead?

Как сделать так, что бы я мог делать

import cs from "classnames";
import Link from "next/link";
import { FC, ReactNode } from "react";
import { ReactComponent as AudioLogo } from "../../../test.svg";
import classes from "./CustomLink.module.scss";

interface IProps {
  path: string;
  children: ReactNode;
  className?: string;
}

export const CustomLink: FC<IProps> = ({ children, path, className }) => {
  return (
    <Link className={cs(className, classes.customLink)} href={path}>
      <AudioLogo />
      <p>{children}</p>
    </Link>
  );
};

Я использую Typescript

Answer 1

[Константин]

Можно воспользоваться сервисом и конвертнуть svg в компоненту,
https://react-svgr.com/playground/
там же в документации написано как поставить пакет в свой проект и тогда svg будут конвертиться автоматически
Но у этого подхода будет минус (будут проблемы с тестами, если установить пакет)

Лучший подход - это использовать спрайты, и тогда svg не будут попадать в бандл
https://svgsprit.es/