Импорт svg в react

Question

я делаю так

import Ptm_report_Logo from '../../../assets/icons/ptmreport.svg';

        <IconStyled>
            <img src={Ptm_report_Logo} height={25} width={25} />
        </IconStyled>

Путь подчеркивается красным и получаю ошибку "Cannot find module '../../../assets/icons/ptmreport.svg' or its corresponding type declarations." кто знает как это можно победить?

Answer 1

SVG в React можно импортировать прямо из svg файла, и вставлять в вёрстку как React компонент. Для этого его надо импортировать следующим образом:

import { ReactComponent as PtmReportLogo } from '/путь/к/ptmreport.svg';

Дальше используем в return компонента:

<PtmReportLogo />

Можно пробросить в него класс чтобы в стилях управлять размерами. Вставка svg таким способом в том числе позволяет перекрасить его при помощи css (например при hover-е или других условиях)

БЛОГ НА HUSL

Импорт svg в react

Ответы (1 шт):