Next.js(webpack)项目集成svgr

import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";
import AutoImport from "unplugin-auto-import/webpack";
import { codeInspectorPlugin } from "code-inspector-plugin";

const withNextIntl = createNextIntlPlugin();

const nextConfig: NextConfig = {
  reactStrictMode: false,
  output: "standalone",
  compress: true,
  // ... 其他配置

  webpack: (config) => {
    // ... 其他 webpack 插件配置

    // SVGR 配置 - 将 SVG 文件转换为 React 组件
    const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.(".svg"));

    if (fileLoaderRule) {
      // 排除 SVG 文件，不使用默认的 file-loader
      fileLoaderRule.exclude = /\\.svg$/i;
    }

    config.module.rules.push(
      // 为 *.svg?url 保留原有的文件加载规则
      {
        ...fileLoaderRule,
        test: /\\.svg$/i,
        resourceQuery: /url/, // 匹配 *.svg?url
      },
      // 将其他所有 *.svg 转换为 React 组件
      {
        test: /\\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
        use: [
          {
            loader: "@svgr/webpack",
            options: {
              svgo: true, // 开启 SVG 优化
              dimensions: false, // 移除默认宽高，方便通过 props 或 CSS 控制
              svgoConfig: {
                plugins: [
                  {
                    name: "preset-default",
                    params: {
                      overrides: {
                        // 保留 viewBox 属性，确保 SVG 缩放正确
                        removeViewBox: false,
                      },
                    },
                  },
                ],
              },
            },
          },
        ],
      },
    );

    return config;
  },
};

export default withNextIntl(nextConfig);

declare module "*.svg" {
  import React from "react";
  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default SVGComponent;
}

/**
 * SVG 图标注册表
 * 自动导入 src/assets/images/svgs/ 目录下的所有 SVG 文件（包括子目录）
 */

import { ComponentType, SVGProps } from 'react';

// SVG 组件类型
export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>;

// SVG 注册表接口
export interface SvgRegistry {
    [key: string]: SvgComponent;
}

// 使用 require.context 自动导入所有 SVG 文件（包括子目录）
// @ts-ignore - require.context 是 webpack 提供的功能
const svgContext = require.context('@/assets/images/svgs', true, /\\.svg$/);

// 自动生成 SVG 注册表
export const svgRegistry: SvgRegistry = svgContext
    .keys()
    .reduce((registry: SvgRegistry, path: string) => {
        // 从路径中提取文件名并转换为图标名称
        // 例如：'./ai-camera.svg' -> 'ai-camera'
        //      './home/arrow.svg' -> 'home-arrow'
        const name = path
            .replace(/^\\.\\//, '')      // 移除开头的 ./
            .replace(/\\.svg$/, '')      // 移除 .svg 扩展名
            .replace(/\\//g, '-');       // 将 / 替换为 -

        // 导入并注册 SVG 组件
        const component = svgContext(path).default;
        registry[name] = component;

        return registry;
    }, {});

/**
 * 获取 SVG 组件
 * @param name - SVG 名称（不含 icon- 前缀）
 */
export const getSvgComponent = (name: string): SvgComponent | undefined => {
    return svgRegistry[name];
};

/**
 * 获取所有可用的 SVG 图标名称
 */
export const getAvailableSvgNames = (): string[] => {
    return Object.keys(svgRegistry);
};

// 开发环境下打印所有可用图标
if (process.env.NODE_ENV === 'development') {
    console.log('[SVG Registry] 已加载的图标:', getAvailableSvgNames().sort());
}

import React from 'react';
import { getSvgComponent } from './svgRegistry';

export interface SvgIconProps {
    /**
     * 图标名称
     * 格式：icon-{文件名}
     * 例如：icon-play, icon-pause
     */
    name: string;
    /**
     * 图标大小（宽高相同）
     * @default 24
     */
    size?: number;
    /**
     * 自定义类名
     */
    className?: string;
    /**
     * 自定义样式
     */
    style?: React.CSSProperties;
}

/**
 * 通用 SVG 图标组件
 *
 * 使用方式：
 * ```tsx
 * <SvgIcon name="icon-play" size={24} className="text-blue-500" />
 * ```
 */
const SvgIcon: React.FC<SvgIconProps> = ({
    name,
    size = 24,
    className = '',
    style
}) => {
    // 移除 icon- 前缀获取实际的 SVG 名称
    const iconName = name.replace(/^icon-/, '');

    // 从注册表中获取 SVG 组件
    const SvgComponent = getSvgComponent(iconName);

    // 如果找不到对应的 SVG 组件，返回 null 并在开发环境下输出警告
    if (!SvgComponent) {
        if (process.env.NODE_ENV === 'development') {
            console.warn(
                `[SvgIcon] Icon not found: ${iconName}. ` +
                `Make sure it's registered in svgRegistry.ts`
            );
        }
        return null;
    }

    // 渲染 SVG 组件
    return (
        <SvgComponent
            width={size}
            height={size}
            className={className}
            style={style}
        />
    );
};

export default SvgIcon;