在Next.js 13中导入透明动画SVG并保持其功能性

// components/AnimatedSvgIcon.tsx
import React from 'react';

type AnimatedSvgIconProps = {
  className?: string;
  // 可以根据需要添加更多SVG属性，如width, height, viewBox等
  width?: number | string;
  height?: number | string;
  [key: string]: any; // 允许传递其他任意SVG属性
};

export function AnimatedSvgIcon({ className, width = 24, height = 24, ...props }: AnimatedSvgIconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 24 24" // 确保 viewBox 与你的SVG内容匹配
      className={`w-full h-auto ${className || ''}`} // 默认全宽高自适应，并合并外部className
      {...props}
    >
      {/* 这是一个示例SVG路径，请替换为你的动画SVG内容 */}
      <path fill="none" d="M0 0h24v24H0z" />
      <path
        fill="none"
        stroke="currentColor" // 使用 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包含动画，例如SMIL动画或CSS动画，它们会在这里被保留 */}
      {/* <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="10s" repeatCount="indefinite" /> */}
    </svg>
  );
}

// app/page.tsx (或任何其他客户端/服务器组件)
import { AnimatedSvgIcon } from '../components/AnimatedSvgIcon';

export default function HomePage() {
  return (
    <main className="flex h-screen flex-col items-center justify-center">
      <div className="bg-blue-600 text-white p-4 rounded-lg">
        <h1 className="text-2xl font-bold mb-4">我的动画SVG图标</h1>
        {/* 使用Tailwind CSS控制SVG的颜色和大小 */}
        <AnimatedSvgIcon className="w-12 h-12 text-yellow-300" />
      </div>

      <div className="mt-8 bg-gray-800 text-gray-200 p-6 rounded-lg">
        <h2 className="text-xl font-semibold mb-3">另一个图标，继承父元素颜色</h2>
        {/* 这里的SVG会继承父div的text-gray-200颜色 */}
        <AnimatedSvgIcon className="w-8 h-8" />
      </div>
    </main>
  );
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 允许导入 .svg 文件作为 React 组件
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = nextConfig;

// app/page.tsx
import AnimatedHeroSvg from '../public/images/blaze-hero-animation.svg'; // 假设你的SVG在这里

export default function HomePage() {
  return (
    <main>
      {/* AnimatedHeroSvg 现在是一个React组件 */}
      <AnimatedHeroSvg className="w-64 h-auto text-blue-500" />
    </main>
  );
}