Блог

Главная - Вопросы по программированию - Использование SVG-файлов в качестве компонента React в приложении CRA

Использование SVG-файлов в качестве компонента React в приложении CRA

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь импортировать svg-файл, но как компонент react, но я не вижу фактического значка. Я ожидаю увидеть значок дома, но все, что я вижу, это фигура, заполненная черным цветом.

Что я пробовал

 import {ReactComponent as Home} from '../assets/svgs/home.svg'; 
import {List, ListItem, ListItemIcon} from '@material-ui/core'; 

<List>
 {['Home', 'Video', 'Music', 'Sound', 'Painting', 'Images', 'Heritage', 'Fashion'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <Home/> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
      ))}
<List/>

Мой SVG-файл

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512.000000 512.000000"
 preserveAspectRatio="xMidYMid meet" width="25px" height="25px">

<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
-2560z"/>
</g>
</svg>

Что я получаю

введите описание изображения здесь

Что я делаю не так? Я был бы очень признателен за вашу помощь.

Комментарии:

1. Как насчет использования: import Home from '../assets/svgs/home.svg'; ?

2. @TasosBu, когда я делаю, как вы говорите, я получаю эту ошибку: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/home.8cdaa428.svg') is not a valid name.

3. Надеюсь, эта статья поможет вам понять.

4. О да, вы используете CRA. Похоже, что способ, которым вы его импортировали, должен работать. Можете ли вы выполнить проверки, которые Айдын опубликовал в качестве ответа?

Ответ №1:

Я только что проверил ваш SVG на этом сайте: http://svg.enshrined.co.uk /

Сам SVG сломан, я предлагаю вам найти другой.

Ваш SVG

Комментарии:

1. Я проверил путь и использовал инструменты разработчика Chrome, но все выглядит нормально.

2. Возможно, вам не хватает какого-либо другого содержимого, даже если путь указан правильно

3. Спасибо вам всем. SVG был поврежден, и это все испортило. Я попробовал другой конвертер, когда конвертировал PNG в SVG, и он дал мне правильный SVG-файл, и он заработал.