Wie importiere ich animierte SVG-Dateien in Next.js 13 und behalte dabei Transparenz und Animation bei?

Question

Importieren Sie animierte SVG-Dateien in Next.js 13

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex h-screen flex-col items-center">
      <div className="container mt-12 flex flex-col items-center justify-center gap-4 px-4 py-8">
        <object type="image/svg+xml" data="/images/blaze-hero-animation.svg">
          svg hero animation
        </object>
      </div>
      <Image
        src="/images/blaze-hero-animation.svg"
        alt="hero animation"
        width={500}
        height={500}
      />
    </main>
  );
}

Das Objekt-Tag gibt mir ein animiertes SVG, aber mit einer weißen Hintergrundfarbe (das Original-SVG hatte einen transparenten Hintergrund. Das Bild gibt mir ein transparentes SVG, aber ohne Animation. Muss ich SVGR oder etwas anderes verwenden? Dies ist in Next.js 13.

Ich möchte nur meine transparente animierte SVG-Datei importieren. Ich möchte mich nicht mit SVGR herumschlagen, weil ich glaube, dass ich es nicht verwenden sollte.

Answer 1

您可以创建一个 React 组件来封装您的 SVG，如下所示：

//LinkArrowIcon.tsx
type Props = {
  className?: string;
};

export function LinkArrowIcon({ className, ...props }: Props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      className={`w-full h-auto ${className}`}
      {...props}
    >
      <path fill="none" d="M0 0h24v24H0z" />
      <path
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M11 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-5m-7 1L20 4m-5 0h5v5"
      />
    </svg>
  );
}

//Home.tsx
import LinkArrowIcon from "./LinkArrowIcon";

export default function Home() {
  return (
    <main className="flex h-screen flex-col items-center">
      <div className="bg-dark dark:bg-light text-light dark:text-dark">
        <LinkArrowIcon className="w-6 h-auto" />
      </div>
    </main>
  );
}

这里我使用 Tailwind CSS 与主题相结合，以确定 SVG 应该使用浅色还是深色（-light 和 -dark 是只是自定义颜色）。
另请查看 React SVGR 网站，它会自动将 SVG 转换为 React 组件。

注意
我在使用 Typescript 在某些 SVG 上运行 next build 时遇到了问题，这些 SVG 的主体内有 等标签。
我尝试了不同的解决方案，但似乎都无法正常工作，因此我只是将文件扩展名从 .tsx 替换为 .jsx 并且构建顺利.