面试题：Next.js项目中如何实现SVG文件的动态加载与样式定制

整体思路

用户交互捕获：在Next.js应用中，通过事件监听器捕获用户交互，例如点击按钮、选择下拉菜单等。
动态SVG加载：根据用户交互获取对应的SVG文件名，使用next/image或next/legacy/image（对于较旧版本）加载SVG文件。或者利用import()动态导入SVG模块。
样式应用：将动态加载的SVG作为React组件，通过CSS或CSS-in-JS方案（如styled-components、emotion）应用不同的样式，控制颜色、大小等。

关键技术点

Next.js路由与组件动态导入：利用next/router处理页面导航和参数传递，以及import()动态导入组件。
事件绑定：在React组件中使用onClick、onChange等事件绑定用户交互。
CSS样式管理：选择合适的CSS方案（CSS Modules、styled-components等）为SVG应用样式。

代码示例

使用next/image加载SVG
- 安装@svgr/webpack和@svgr/rollup（用于处理SVG）
- 在next.config.js中配置：

const withImages = require('next-images');
module.exports = withImages({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
});

React组件示例：

import React, { useState } from'react';
import Image from 'next/image';

const SvgLoader = () => {
  const [selectedSvg, setSelectedSvg] = useState('icon1.svg');
  const handleClick = (svgName) => {
    setSelectedSvg(svgName);
  };
  return (
    <div>
      <button onClick={() => handleClick('icon1.svg')}>Load Icon 1</button>
      <button onClick={() => handleClick('icon2.svg')}>Load Icon 2</button>
      <Image
        src={`/${selectedSvg}`}
        alt="Dynamic SVG"
        width={100}
        height={100}
        style={{ fill: 'blue' }}
      />
    </div>
  );
};

export default SvgLoader;

动态导入SVG模块
- 创建SVG组件，例如Icon1.js、Icon2.js：

import React from'react';

const Icon1 = () => (
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
);

export default Icon1;

主组件动态导入：

import React, { useState } from'react';

const SvgLoader = () => {
  const [SelectedIcon, setSelectedIcon] = useState(null);
  const handleClick = async (svgName) => {
    if (svgName === 'icon1') {
      const { default: Icon } = await import('./Icon1');
      setSelectedIcon(Icon);
    } else {
      const { default: Icon } = await import('./Icon2');
      setSelectedIcon(Icon);
    }
  };
  return (
    <div>
      <button onClick={() => handleClick('icon1')}>Load Icon 1</button>
      <button onClick={() => handleClick('icon2')}>Load Icon 2</button>
      {SelectedIcon && <SelectedIcon style={{ width: '100px', height: '100px' }} />}
    </div>
  );
};

export default SvgLoader;

使用CSS Modules应用样式
- 创建styles.module.css：

.svgStyle {
  fill: green;
  width: 150px;
  height: 150px;
}

修改组件使用CSS Modules：

import React, { useState } from'react';
import styles from './styles.module.css';

const SvgLoader = () => {
  const [selectedSvg, setSelectedSvg] = useState('icon1.svg');
  const handleClick = (svgName) => {
    setSelectedSvg(svgName);
  };
  return (
    <div>
      <button onClick={() => handleClick('icon1.svg')}>Load Icon 1</button>
      <button onClick={() => handleClick('icon2.svg')}>Load Icon 2</button>
      <Image
        src={`/${selectedSvg}`}
        alt="Dynamic SVG"
        width={100}
        height={100}
        className={styles.svgStyle}
      />
    </div>
  );
};

export default SvgLoader;

面试题：Next.js项目中如何实现SVG文件的动态加载与样式定制

知识考点

面试题答案

整体思路

关键技术点

代码示例