React 动态导入 Svg 文件

Question

我的项目文件夹中有以下结构：

src
  |
   -> assets
     |
      -> general-icons
        |
         pointer-arrow.svg
  |
   -> components
     |
      -> lazy-loader
        |
         LazyLoader.tsx

LazyLoader是一个功能性的React组件，它可以动态地导入一个组件，例如一个svg文件。

import React from 'react';

export default function LazyLoader(path: string) {
  return React.lazy(() => import(path));
}

'path'属性是一个字符串，包含指向SVG文件的相对路径：

src/assets/general-icons/pointer-arrow.svg

而 pointer.svg 是一个普通的 svg：

<svg version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>

当我调用LazyLoader组件并将路径作为参数传递时，它会出现错误，因为找不到svg模块：

Error: Cannot find module 'src/assets/general-icons/pointer-arrow.svg'

大家有什么想法，发生了什么事情吗？

- Matheus Carvalho

---

相对路径不应该是 ../../../assets/general-icons/pointer-arrow.svg 吗？ - Chunky Chunk

你如何使用这个LazyLoader函数？ - Randall

Answer 1

默认情况下，绝对导入路径无法正常工作。你的应用程序是否使用create-react-app进行引导？在项目根目录创建一个jsconfig.json文件：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

现在，您可以从应用程序中的任何位置导入assets/general-icons/pointer-arrow.svg。

- hotpink

Answer 2

您可以使用本地js动态导入（''）来动态导入图像，无需使用React Lazy。在此处查看一个很好的示例：https://dev59.com/71QJ5IYBdhLWcg3welxn#70024111

但是，您必须注意将路径/内容传递给import（path），因为根据您计划包含要导入的图像以生成最终捆绑包的方式，可能会有限制。有两种主要方法：

注意：这是针对Rollup的，在Webpack中我没有尝试过，但应该类似

a）-使用官方插件https://www.npmjs.com/package/@rollup/plugin-dynamic-import-vars使rollup在创建捆绑包时自动包含可能要导入的文件，请阅读文档并注意“路径”字符串中的重要限制，基本上您只需在变量中设置文件名，其余路径必须在import（''）中固定，以便为rollup提供受限范围以进行导入。例如：

OK

import(../assets/img/${fileName}.svg)

错误

import(filePath)

b) - 在程序包中编程包含可以动态导入的文件示例

//rollup.config.js 
import copy from 'rollup-plugin-copy';

plugins: [
    copy({
        targets: [ { src: 'src/assets/icons/*', dest: 'lib/assets/icons' },],
    }),
           …        
],

使用选项 b）时，您对变量内容没有限制，但必须小心包含在捆绑包中的内容。

结论：您可以使用动态导入（...），但如果您没有正确处理捆绑包中的文件包含，则可能会被排除，然后动态导入将在使用者处失败。

- Juanma Menendez

Answer 3

我会把所有的SVG放在一个函数中。

import React from "react";

export const Logo = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 27" {...props}>
    <path
      d="M112.2,9.6h-0.6v7....z"
    />
  </svg>
);

export const menu...

然后根据需要导入它们。

- cjohndesign