我在应用程序的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'
答案 0 :(得分:1)
您必须导入包括svg扩展名的文件。 例如:
import icon from '../../assets/caretDown.svg'
您还必须提及扩展名称。 如果要导入多个图像,则可以在资产文件夹中创建一个index.js文件,其中包含所有资产图像。 例如:
import icon from 'caretDown.svg'
import iconUp from 'caretUp.svg'
然后您可以将其导出为
export{icon,iconUp}
然后,无论何时需要这些图像在文件中的某个位置。您可以像这样直接导入:
import {icon} from '../../assets/'