React中实现多SVG组合图标组件的问题求助

问题分析 #

现有Icon组件仅支持接收单个图标名字符串作为参数，直接传入图标数组无法被识别渲染，因此需要对组件进行扩展或封装，实现多SVG图标的组合渲染。

解决方案一：扩展原Icon组件，支持数组类型参数 #

直接修改现有Icon组件，使其能够处理单个图标名或图标数组：

const Icon = ({ iconName, className = '', ...props }) => {
  // 处理图标数组的情况
  if (Array.isArray(iconName)) {
    return (
      <span className={`composite-icon ${className}`} style={{ position: 'relative', display: 'inline-block' }}>
        {iconName.map((name, index) => (
          <svg 
            key={index} 
            {...props} 
            className="composite-icon__item"
          >
            {/* 替换为你原Icon组件中根据名称渲染对应SVG的逻辑，比如通过switch/对象映射 */}
            {renderSvgByName(name)}
          </svg>
        ))}
      </span>
    );
  }

  // 保留原有单个图标的渲染逻辑
  return (
    <svg className={className} {...props}>
      {renderSvgByName(iconName)}
    </svg>
  );
};

// 调用方式
<Icon iconName={['ChevronRight', 'ArrowRight']} size={24} />

添加CSS控制图标位置，实现叠加或排列效果：

.composite-icon {
  position: relative;
  display: inline-block;
}

.composite-icon__item {
  position: absolute;
  top: 0;
  left: 0;
  /* 根据需求调整第二个图标的偏移，比如向右偏移4px */
  &:nth-child(2) {
    left: 4px;
  }
}

解决方案二：封装独立的组合Icon容器组件 #

如果不想修改原Icon组件，可以单独封装一个CompositeIcon组件来组合多个图标：

const CompositeIcon = ({ icons, className = '', ...props }) => {
  return (
    <span className={`composite-icon ${className}`} style={{ position: 'relative', display: 'inline-block' }}>
      {icons.map((iconConfig, index) => {
        // 支持传入单个名称或带配置的对象
        const { name, ...iconProps } = typeof iconConfig === 'string' 
          ? { name: iconConfig } 
          : iconConfig;
        
        return (
          <Icon 
            key={index} 
            iconName={name} 
            {...props} 
            {...iconProps} 
            className="composite-icon__item"
          />
        );
      })}
    </span>
  );
};

// 调用方式（支持统一配置或单独配置）
<CompositeIcon 
  icons={['ChevronRight', 'ArrowRight']} 
  size={24} 
  color="#333" 
/>

// 单个图标自定义配置
<CompositeIcon 
  icons={[
    { name: 'ChevronRight', color: '#666' },
    { name: 'ArrowRight', color: '#999', size: 20 }
  ]} 
/>

对应的CSS样式和方案一一致，用于控制图标的定位与布局。

关键注意事项 #

• 确保所有组合的SVG图标viewBox属性一致，避免出现缩放比例不一致的问题
• 通过CSS调整图标位置时，可根据目标效果图的需求修改偏移量、层级（z-index）等属性
• 若需要动态调整组合图标的间距或叠加方式，可以通过props传递额外的样式参数

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