如何在 Next.js 13 中导入动画 SVG 文件，同时保持透明度和动画？

Question

在 Next.js 13 中导入动画 SVG 文件

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>
  );
}

对象标签为我提供了动画 svg，但背景颜色为白色（原始 svg 具有透明背景。图像为我提供了透明 svg，但没有任何动画。 我需要使用 SVGR 还是其他东西？这是 Next.js 13 中的内容。

我只想导入我的透明动画 svg 文件。 id 不想搞乱 SVGR，因为我认为我不应该使用它。

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 并且构建顺利.