在创建-反应-应用程序中有效地导入多个类似的 svg 源?

Question

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

这是我的svg导入.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，直接从我想使用它们的图像目录中导入 svg。您的对象基本上复制了文件结构，所以我没有看到将所有 svg 拉到一个地方真正买到您的东西。在代码拆分方面，直接导入它们也可能有所帮助;在您建议的当前设置中，您必须加载所有 SVG 才能显示其中一个。如果您直接从图像目录导入它们，则可以拆分出一个页面，并且只会加载该页面的svg。这可能不是问题，具体取决于应用程序的大小和加载的 svg 数量。

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