时间戳

首页 > 解决方案 > React：导入动态 SVG

reactjs - React：导入动态 SVG

问题描述

我想根据我的 Branding 变量导入一组不同的 SVG 图标。我尝试这样的事情：

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

但我知道 React 不支持导入 {variable}。有解决方法吗？

标签： reactjsecmascript-6

解决方案

根据反应文档：

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

推荐阅读