React 动态导入 Svg 文件答案

【问题标题】：React dynamically import Svg filesReact 动态导入 Svg 文件
【发布时间】：2020-10-18 23:49:29
【问题描述】：

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

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

LazyLoader 是一个功能性的反应组件，我在其中动态导入一个组件，在本例中是一个 svg 文件

import React from 'react';

export default function LazyLoader(path: string) {
  return React.lazy(() => import(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'

有人有什么想法吗？

【问题讨论】：

相对路径不是../../../assets/general-icons/pointer-arrow.svg吗？
你如何使用这个 LazyLoader 功能？

标签： javascript reactjs typescript svg

【解决方案1】：

默认情况下，绝对导入路径不起作用。您的应用程序是否使用 create-react-app 引导？在项目的根目录下创建一个 jsconfig.json 文件：

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

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

【讨论】：

【解决方案2】：

我会将所有的 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...

然后根据需要导入它们。

【讨论】：