Como importar importar e usar com ReactComponent varias SVGS

Olá, Wendel! Tudo bem?

Para importar vários arquivos SVGs de uma pasta específica e utilizá-los em sua aplicação, você pode utilizar o recurso ReactComponent, que permite importar arquivos SVGs como componentes React.

Para isso, primeiro é necessário criar um arquivo index.js na pasta onde estão localizados os arquivos SVGs. Neste arquivo, você pode importar todos os arquivos SVGs da pasta e exportá-los como um objeto.

Exemplo:

import { ReactComponent as Icon1 } from './icon1.svg';
import { ReactComponent as Icon2 } from './icon2.svg';
import { ReactComponent as Icon3 } from './icon3.svg';

export default {
  Icon1,
  Icon2,
  Icon3,
};

Em seguida, você pode importar este objeto em seu componente React e utilizar os arquivos SVGs como componentes.

Exemplo:

import React from 'react';
import icons from './icons';

function MyComponent() {
  return (
    <div>
      <icons.Icon1 />
      <icons.Icon2 />
      <icons.Icon3 />
    </div>
  );
}

export default MyComponent;

Dessa forma, você pode importar e utilizar vários arquivos SVGs de uma pasta específica em sua aplicação.

Espero ter entendido e ajudado, bons estudos!

Bom dia, Renan!

Se eu tiver 30 itens? Qual a melhor forma de se fazer, não teria uma maneira mais dinâmica de fazer, tipo importando para um array?