Next.js(turbopack)项目集成svgr

import type { NextConfig } from "next";
import { codeInspectorPlugin } from "code-inspector-plugin";
import path from "path";

const codeInspectorRules =
  codeInspectorPlugin({
    bundler: "turbopack",
  }) || {};

const nextConfig: NextConfig = {
  // ... 其他配置
  turbopack: {
    // 确保 root 指向项目根目录（如果是 monorepo）
    root: path.join(process.cwd(), "../../"),
    rules: {
      ...codeInspectorRules,
      // 配置 SVG 规则
      "*.svg": {
        loaders: [
          {
            loader: "@svgr/webpack",
            options: {
              icon: true,
              svgo: true, // 开启 SVG 优化
              dimensions: false, // 移除默认宽高，方便 CSS 控制
            },
          },
        ],
        as: "*.js", // 告诉 Turbopack 将结果视为 JS 模块
      },
    },
  },
};

export default nextConfig;

declare module "*.svg" {
  import type { ComponentType, SVGProps } from "react";
  const Component: ComponentType<SVGProps<SVGSVGElement>>;
  export default Component;
}

interface RequireContext {
  keys(): string[];
  (id: string): any;
  <T>(id: string): T;
  resolve(id: string): string;
  id: string;
}

interface NodeRequire {
  context(
    directory: string,
    useSubdirectories?: boolean,
    regExp?: RegExp,
    mode?: "sync" | "eager" | "weak" | "lazy" | "lazy-once",
  ): RequireContext;
}

declare var require: NodeRequire;

import type { ComponentType, SVGProps } from "react";

// 使用 require.context 自动扫描目录
// 参数说明: 目录路径, 是否递归子目录, 匹配文件的正则
const svgContext = require.context("../../assets/images/svgs", true, /\.svg$/);

export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>;
export type SvgRegistry = Record<string, SvgComponent>;

// 将路径片段转换为 kebab-case (例如: MyIcon -> my-icon)
const normalizeSegment = (segment: string) =>
  segment
    .replace(/([a-z\d])([A-Z])/g, "$1-$2")
    .replace(/[\s_]+/g, "-")
    .toLowerCase();

// 根据文件路径生成唯一的图标名称
const buildRegistryName = (filePath: string) => {
  const normalizedPath = filePath
    .replace(/^.*assets\/images\/svgs\//, "") // 移除基础路径
    .replace(/^\.\//, "")
    .replace(/\.svg$/, "")
    .replace(/\\/g, "/");

  const kebabCasePath = normalizedPath.split("/").filter(Boolean).map(normalizeSegment).join("-");

  return `icon-${kebabCasePath}`;
};

// 构建注册表对象
export const svgRegistry: SvgRegistry = svgContext
  .keys()
  .reduce((registry: SvgRegistry, path: string) => {
    const mod = svgContext(path);
    const registryName = buildRegistryName(path);
    // 兼容 ES Module 和 CommonJS 导出
    registry[registryName] = mod.default || mod;
    return registry;
  }, {} as SvgRegistry);

// 获取组件的工具函数
export const getSvgComponent = (svgName: string): SvgComponent | undefined => {
  const normalizedName = svgName.startsWith("icon-") ? svgName : `icon-${svgName}`;
  return svgRegistry[normalizedName];
};

// 获取所有可用图标名称
export const getAvailableSvgNames = () => Object.keys(svgRegistry);

// 开发环境打印加载的图标，方便调试
if (process.env.NODE_ENV === "development") {
  console.log("[SVG Registry] 已加载的图标:", getAvailableSvgNames().sort());
}