Question

我将使用create-react-app @ 2.0.0的新功能将一堆SVG插图作为嵌入式SVG组件导入到我的项目中。

这是我的svg-import.js：

import React from 'react';

import { ReactComponent as StartLogo } from '../images/start/logo.svg';
import { ReactComponent as StartTitle } from '../images/start/title.svg';
...

import { ReactComponent as IntroAvatar } from '../images/intro/avatar.svg';
import { ReactComponent as IntroDialog } from '../images/intro/dialog.svg';
...

const svgIllustrations = {
  "start": {
    "logo": <StartLogo className="svg svg-start-logo"/>,
    "title": <StartTitle className="svg svg-start-title"/>,
    ...
  },
  "intro": {
    "avatar": <IntroAvatar className="svg svg-intro-avatar"/>,
    "dialog": <IntroDialog className="svg svg-intro-dialog"/>,
    ...
  }
}

export default svgIllustrations;

当我想使用它们时：

import svgIllustrations from '../svg-import.js';

...
render() {
  return (
    {svgIllustrations.start["logo"]}
  )
}

代码有效。

但是，由于要导入的SVG文件很多，并且所有文件都是根据特定规则命名和结构化的，所以我想知道是否有更好的方法来进行类似的事情。

Answer 1

如果是我个人，我可能会取消中间的svgIllustrations，而直接从想要使用它们的图像目录中直接导入svgs。您的对象基本上可以复制文件结构，因此我看不到将所有svg放在一个地方真正能给您带来什么。直接导入它们也可能在代码拆分方面有所帮助。在您建议的当前设置中，必须加载所有svg才能显示其中之一。如果直接从images目录中导入它们，则可以拆分出一个页面，而只会加载该页面的svg。取决于您的应用程序大小和您要加载的svg数量，这可能不会成为问题。

话虽如此，如果您仍然真正想要所有svg的对象表示形式，那么我唯一想说的就是从images目录生成svgIllustrations。由于您的对象结构基本上是文件结构的副本，因此这样做很容易，并且可能会节省一些时间。

有效地在create-react-app中导入多个类似的svg源？

1 个答案: