React：尝试为 SVG 创建单独的文件夹并将它们导入到我的组件中，但不确定如何导入

Question

我在我的应用程序的 src 目录中有一个名为 Assets 的文件夹，我试图在其中托管 SVG，然后将它们导入到我的组件中，但我不知道如何执行此操作。我已经在下面包含了我的 SVG 文件，并尝试将它导入到它正下方的组件中。非常感谢任何帮助

SVG 文件

<svg fill="black" viewBox="0 0 320 512" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg">
    <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>

React 组件中的 Import 语句尝试导入 SVG

import {icon} from '../../assets/caretDown'

Answer 1

您必须导入这样的文件，包括 svg 扩展名。 例如：

import icon from '../../assets/caretDown.svg'

您还必须提及扩展名。 如果要导入多张图片，则可以在 assets 文件夹中创建一个 index.js 文件，其中包含所有资产图片。 例如：

import icon from 'caretDown.svg'
import iconUp from 'caretUp.svg'

然后你可以将这些导出为

export{icon,iconUp}

然后，每当您在文件中的某个位置需要这些图像时。你可以像这样直接导入：

import {icon} from '../../assets/'

例如：https://codesandbox.io/s/svg-in-react-s6u32