Bagaimana untuk mengimport fail SVG animasi dalam Next.js 13 sambil mengekalkan ketelusan dan animasi?

Question

Import fail SVG animasi dalam 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>
  );
}

Teg objek memberi saya svg animasi, tetapi dengan warna latar belakang putih (svg asal mempunyai latar belakang lutsinar. Imej itu memberi saya svg telus, tetapi tanpa sebarang animasi. Adakah saya perlu menggunakan SVGR atau sesuatu yang lain? Ini dalam Next.js 13.

Saya hanya mahu mengimport fail svg animasi lutsinar saya. id tidak mahu mengacaukan SVGR kerana saya rasa saya tidak sepatutnya menggunakannya.

Answer 1

Anda boleh mencipta komponen React untuk membalut SVG anda seperti ini:

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

Di sini saya menggunakan CSS Tailwind digabungkan dengan tema untuk menentukan sama ada SVG harus menggunakan warna terang atau gelap (-light 和 -dark hanyalah warna tersuai).
Lihat juga Tapak web React SVGR yang menukar komponen SVG kepada React secara automatik.

Perhatian
Saya menggunakan Typescript untuk menjalankan teg seperti next build 时遇到了问题，这些 SVG 的主体内有 pada beberapa SVG.
Saya mencuba penyelesaian yang berbeza tetapi nampaknya tiada yang berjaya jadi saya hanya menukar sambungan fail daripada .tsx 替换为 .jsx dan binaan berjalan lancar.