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));
}

“路径”属性是一个字符串，其中包含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'

有人有什么想法吗？

Answer 1

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

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

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

Answer 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...

然后根据需要导入它们。

反应动态导入SVG文件

2 个答案: