React:导入动态SVG

Question

我想基于我的Branding变量导入一组不同的SVG图标。我试着这样做：

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

但我知道React不支持导入{variable}。有变通办法吗？

Answer 1

根据React Docs:

您可以也可以直接将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>
);