reactjs - 在 create-react-app 中高效导入多个相似的 svg 源？

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 才能显示其中之一。如果直接从图像目录导入它们，您可以拆分一个页面，并且只加载该页面的 svg。这可能不是一个问题，具体取决于您的应用程序的大小和您正在加载的 svg 的数量。

话虽如此，如果您仍然确实希望所有 svg 都使用此对象表示形式，那么我想说您唯一可能想做的就是从图像目录生成 svgIllustrations。由于您的对象结构基本上是文件结构的副本，因此这样做可能非常容易，并且可能会节省您一点时间。