Comment importer des fichiers SVG animés dans Next.js 13 tout en conservant la transparence et l'animation ?

Question

Importez des fichiers SVG animés dans 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>
  );
}

La balise object me donne un svg animé, mais avec une couleur de fond blanc (le svg original avait un fond transparent. L'image me donne un svg transparent, mais sans aucune animation. Dois-je utiliser SVGR ou autre chose ? C'est dans Next.js 13.

Je veux juste importer mon fichier svg animé transparent. Je ne veux pas jouer avec SVGR parce que je ne pense pas que je devrais l'utiliser.

Answer 1

Vous pouvez créer un composant React pour envelopper votre SVG comme ceci :

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

Ici, j'utilise Tailwind CSS combiné avec un thème pour déterminer si le SVG doit utiliser une couleur claire ou foncée (-light 和 -dark est juste une couleur personnalisée).
Consultez également le Site Web React SVGR qui convertit automatiquement SVG en composants React.

Attention
J'utilise Typescript pour exécuter des balises comme next build 时遇到了问题，这些 SVG 的主体内有 sur certains SVG.
J'ai essayé différentes solutions mais aucune ne semblait fonctionner, j'ai donc simplement changé l'extension de fichier de .tsx 替换为 .jsx et la construction s'est bien déroulée.