React中如何导出icons.js文件供其他组件导入使用？

有两种实用的方式可以导出这些图标，让其他组件能轻松导入使用：

方式一：命名导出（逐个导出） #

直接在导入后统一导出所需图标，或者在导入时就加上export关键字：

修改后的icons.js： #

// 批量导入同组图标，减少代码行数
import {BiStore} from 'react-icons/bi';
import {RiBarChartBoxLine, RiCalendarTodoLine, RiPaintBrushLine, RiDatabase2Line} from 'react-icons/ri';
// ...其他图标导入

// 统一导出所有需要复用的图标
export { 
  BiStore, 
  RiBarChartBoxLine, 
  RiCalendarTodoLine, 
  RiPaintBrushLine, 
  RiDatabase2Line 
  // ...添加其他要导出的图标
};

在其他组件中使用： #

按需导入单个或多个图标即可：

// 导入单个图标
import { BiStore } from './icons.js';

// 或者一次性导入多个
import { BiStore, RiBarChartBoxLine } from './icons.js';

// 组件内直接使用
function MyComponent() {
  return (
    <div>
      <BiStore size={24} color="#2563eb" />
      <RiBarChartBoxLine size={24} color="#dc2626" />
    </div>
  );
}

方式二：默认导出（集合为对象） #

把所有图标整合到一个对象中，默认导出这个对象，适合需要统一管理或批量使用图标的场景：

修改后的icons.js： #

import {BiStore} from 'react-icons/bi';
import {RiBarChartBoxLine, RiCalendarTodoLine, RiPaintBrushLine, RiDatabase2Line} from 'react-icons/ri';
// ...其他图标导入

// 将图标存入一个对象
const Icons = {
  BiStore,
  RiBarChartBoxLine,
  RiCalendarTodoLine,
  RiPaintBrushLine,
  RiDatabase2Line,
  // ...添加其他图标
};

// 默认导出这个图标对象
export default Icons;

在其他组件中使用： #

可以导入整个对象，也可以解构出需要的图标：

// 导入完整图标对象
import Icons from './icons.js';

// 组件内通过对象属性调用
function MyComponent() {
  return (
    <div>
      <Icons.BiStore size={24} color="#2563eb" />
      <Icons.RiBarChartBoxLine size={24} color="#dc2626" />
    </div>
  );
}

// 也可直接解构导入所需图标（和方式一用法一致）
import { BiStore, RiBarChartBoxLine } from './icons.js';

小提示 #

• 导入时注意icons.js的路径正确性，和组件同目录用./icons.js，子目录则对应调整（比如./assets/icons.js）。
• 图标数量多的话，命名导出能按需引入，减少打包体积；对象导出更方便统一管理，React的Tree Shaking机制也会自动剔除未使用的图标代码。

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