Реагируйте: Попытка создать отдельную папку для SVG и импортировать их в мои компоненты, но не знаете, как импортировать - PullRequest
Новая
       14

Реагируйте: Попытка создать отдельную папку для SVG и импортировать их в мои компоненты, но не знаете, как импортировать

0 голосов
/ 16 мая 2019

У меня есть папка с именем Assets в каталоге src моего приложения, в которой я пытаюсь разместить 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 при попытке импортировать SVG 

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

1 Ответ

1 голос
/ 16 мая 2019

Вы должны импортировать такой файл, включая расширение 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/'

Пример: https://codesandbox.io/s/svg-in-react-s6u32

...