javascript - React:尝试为 SVG 创建单独的文件夹并将它们导入到我的组件中,但不确定如何导入
问题描述
我在我的应用程序的 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 Component 中的 Import 语句尝试导入 SVG
import {icon} from '../../assets/caretDown'
解决方案
您必须导入这样的文件,包括 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/'
推荐阅读
- c++ - 将 ifstream 文件和每一行读入一个数组
- r - R: rbind 字符串到因子列
- salesforce - 从visualforce页面将静态/硬编码值传递给控制器
- amazon-web-services - 多种文件类型的 aws cloudfront 路径模式
- javascript - 反应 this.setState 问题
- html - 如何从后面的.vb代码中动态创建的HTML控件获取值
- javascript - 真的很简单的颜色选择器怎么导入呢?
- visual-studio-code - 打开硬盘驱动器时我的 vscode 覆盖 nautilus
- javascript - Vue JS:如何在简单的 Vue 示例中将复选框与相关选择绑定?
- r - 编辑 data.frame 中的每一行