Реагируйте: Импортируйте динамический SVG

Question

Я хочу импортировать другой набор иконок SVG на основе моей переменной Branding.Я пытаюсь что-то вроде этого:

import { BRANDING } from 'BrandingBuilder';
import {`${BRANDING}-icons.svg`};

Но я знаю, что React не поддерживает импорт {переменной}.Есть ли обходной путь?

Answer 1

Согласно документам React :

Вы также можете импортировать SVG непосредственно в качестве компонентов React.Вы можете использовать любой из двух подходов.В вашем коде это будет выглядеть так:

import { BRANDING } from 'BrandingBuilder';
import { ReactComponent as Logo } from `${BRANDING}-icons.svg`;
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);