React Native组件中如何通过名称批量导入多个SVG图标

当然可以实现！这种批量加载图标的方式能帮你省去大量重复的import语句，我根据不同的运行环境给你两种实用的实现方案：

方案一：React Native 环境下实现 #

因为你用到了<View>组件，推测是在React Native项目中，这里可以利用require的动态特性来实现：

1. 首先创建一个CustomIcon.js组件：

import React from 'react';
import { View } from 'react-native';
import SvgUri from 'react-native-svg';

const CustomIcon = ({ name, size = 24, color = '#000' }) => {
  try {
    // 动态拼接图标路径，要和你的assets/Icons目录结构对应
    const iconPath = require(`../assets/Icons/${name}`);
    return <SvgUri width={size} height={size} uri={iconPath} fill={color} />;
  } catch (error) {
    console.error(`图标 ${name} 不存在或路径错误:`, error);
    // 加载失败时显示占位容器
    return <View style={{ width: size, height: size, backgroundColor: '#eee', borderRadius: 4 }} />;
  }
};

export default CustomIcon;

2. 之后就能像你想要的那样使用了：

import CustomIcon from './CustomIcon';

// 在组件中调用
<View>
  <CustomIcon name='icon-account.svg' size={30} color='#2196F3' />
</View>

注意：需要先安装react-native-svg依赖（执行npm install react-native-svg），另外React Native中require的路径要保证文件名、大小写完全匹配，否则会加载失败。

方案二：Web React 环境下实现 #

如果是在Web端React项目中（比如Vite、Create React App），可以用批量导入的方式预加载所有图标：

基于Vite的实现 #

import React from 'react';

// 批量导入assets/Icons下的所有SVG文件，eager设为true表示立即加载
const iconMap = import.meta.glob('../assets/Icons/*.svg', { eager: true });

const CustomIcon = ({ name, size = 24, color = '#000' }) => {
  const IconComponent = iconMap[`../assets/Icons/${name}`]?.default;
  if (!IconComponent) {
    console.error(`图标 ${name} 不存在`);
    return <div style={{ width: size, height: size, backgroundColor: '#eee', borderRadius: 4 }} />;
  }
  return <IconComponent width={size} height={size} fill={color} />;
};

export default CustomIcon;

基于Webpack（Create React App）的实现 #

import React from 'react';

// 创建上下文，批量读取assets/Icons下的SVG文件
const iconContext = require.context('../assets/Icons', false, /\.svg$/);
const iconMap = {};

// 遍历所有图标，构建文件名到组件的映射
iconContext.keys().forEach(key => {
  const iconName = key.replace('./', '');
  iconMap[iconName] = iconContext(key).default;
});

const CustomIcon = ({ name, size = 24, color = '#000' }) => {
  const IconComponent = iconMap[name];
  if (!IconComponent) {
    console.error(`图标 ${name} 不存在`);
    return <div style={{ width: size, height: size, backgroundColor: '#eee', borderRadius: 4 }} />;
  }
  return <IconComponent width={size} height={size} fill={color} />;
};

export default CustomIcon;

通用注意事项 #

• 文件名要严格匹配，尤其是在Linux/macOS环境下，大小写敏感
• 可以给CustomIcon添加更多props（比如style），让样式定制更灵活
• 错误处理能避免因图标缺失导致页面崩溃，建议保留

内容的提问来源于stack exchange，提问作者Rizwan Ahmed Shivalli