如何在React中动态导入react-icons独立组件（非全量导入）

为什么你的改写代码不工作？ #

你之前的代码里，iconsList存的是字符串（比如'Icon1'），而React需要的是真实的组件引用才能渲染。直接把字符串赋值给Icon然后渲染，React无法识别这是一个组件，自然会报错。

方案1：提前导入指定图标 + 映射表（简单高效） #

如果你的图标数量不多，推荐这种方式：先导入需要的图标，再创建一个字符串到组件的映射表，通过映射表获取组件后渲染。

import React from 'react';
// 只导入你需要的图标
import { Icon1, Icon2, Icon3, Icon4 } from 'react-icons/ri';

// 创建图标映射：字符串名称对应实际组件
const iconMap = {
  Icon1,
  Icon2,
  Icon3,
  Icon4
};

const Buttons = () => {
  const iconsList = ['Icon1', 'Icon2', 'Icon3'];
  
  const renderIcon = (iconName) => {
    // 从映射表中取出组件
    const Icon = iconMap[iconName];
    // 容错处理：如果图标不存在，返回null避免报错
    if (!Icon) return null;
    
    return (
      <div className="y">
        <Icon />
      </div>
    );
  };

  return (
    <div className="d-flex align-items-center justify-content-end">
      {iconsList.map((iconName) => renderIcon(iconName))}
    </div>
  );
};

export default Buttons;

方案2：动态导入（按需加载，优化打包体积） #

如果需要加载大量图标，或者想减少初始打包体积，可以用React的lazy和Suspense实现动态导入，只在渲染时加载对应图标：

import React, { lazy, Suspense } from 'react';

// 封装动态导入图标的函数
const getIcon = (iconName) => {
  return lazy(() => 
    // 动态导入react-icons/ri模块，提取指定图标组件作为默认导出
    import(`react-icons/ri`).then(module => ({ default: module[iconName] }))
  );
};

const Buttons = () => {
  const iconsList = ['Icon1', 'Icon2', 'Icon3'];
  
  const renderIcon = (iconName) => {
    const Icon = getIcon(iconName);
    
    return (
      <div className="y">
        {/* Suspense处理图标加载中的状态 */}
        <Suspense fallback={<div>加载中...</div>}>
          <Icon />
        </Suspense>
      </div>
    );
  };

  return (
    <div className="d-flex align-items-center justify-content-end">
      {iconsList.map((iconName) => renderIcon(iconName))}
    </div>
  );
};

export default Buttons;

注意事项： #

• 动态导入的路径需要是打包工具可静态分析的，所以react-icons/ri必须是固定字符串，只有图标名称可以是变量
• 必须配合Suspense使用，否则会因为组件未加载完成而报错；你也可以自定义加载占位符（比如一个loading图标）

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