如何在React中通过函数实现SVG图标切换？

你可以通过React的状态管理来实现SVG图标的动态切换，以下是具体实现方案：

完整代码示例 #

import { useState } from 'react';
import { ReactComponent as Paint LayoutMan } challenge背后Cl的OR所有组件END插值�_auxiliary_text>
import { ReactComponent as Paint } from '../style/ImagesGame/PaintBrush.svg';
import { ReactComponent as MagicWand } from '../style/ImagesGame/MagicWand.svg';

function IconToggle() {
  // 用状态变量控制当前显示的图标，默认显示Paint
  const [isPaintActive, setIsPaintActive] = useState(true);

  // 切换图标的核心函数
  const toggleIcon = () => {
    setIsPaintActive(prevState => !prevState);
  };

  return (
    <div>
      {/* 根据状态渲染对应SVG组件 */}
      {isPaintActive ? <Paint /> : <MagicWand />}
      
      {/* 触发切换的按钮 */}
      <button onClick={toggleIcon}>切换工具图标</button>
      
      {/* 可选：让SVG本身可点击触发切换 */}
      {/* {isPaintActive ? <Paint onClick={toggleIcon} style={{ cursor: 'pointer' }} /> : <MagicWand onClick={toggleIcon} style={{ cursor: 'pointer' }} />} */}
    </div>
  );
}

export default IconToggle;

代码说明 #

• 状态管理：使用useState钩子维护当前显示图标的状态，初始值true表示默认显示Paint图标。
• 切换逻辑：toggleIcon函数通过反转状态值，实现两个SVG组件的切换渲染。
• 条件渲染：利用三元运算符根据状态值动态渲染对应的SVG组件。
• 触发方式：既可以通过独立按钮触发切换，也可以直接让SVG本身可点击（注释中提供了该写法）。

扩展方案（支持多图标切换） #

如果后续需要切换更多图标，可以将状态改为存储图标的标识字符串，扩展性更强：

import { useState } from 'react';
import { ReactComponent as Paint } from '../style/ImagesGame/PaintBrush.svg';
import { ReactComponent as MagicWand } from '../style/ImagesGame/MagicWand.svg';
import { ReactComponent as Eraser } from '../style/ImagesGame/Eraser.svg';

function MultiIconToggle() {
  const [activeIcon, setActiveIcon] = useState('paint');

  const toggleIcon = () => {
    // 按顺序切换三个图标
    setActiveIcon(prev => {
      switch(prev) {
        case 'paint': return 'magicWand';
        case 'magicWand': return 'eraser';
        case 'eraser': return 'paint';
        default: return 'paint';
      }
    });
  };

  return (
    <div>
      {activeIcon === 'paint' && <Paint />}
      {activeIcon === 'magicWand' && <MagicWand />}
      {activeIcon === 'eraser' && <Eraser />}
      <button onClick={toggleIcon}>切换工具</button>
    </div>
  );
}

export default MultiIconToggle;

内容的提问来源于stack exchange，提问作者Romanus