Блог

Главная - Вопросы по программированию - Как в react отобразить значок svg из файла как встроенный без выполнения http-запроса?

Как в react отобразить значок svg из файла как встроенный без выполнения http-запроса?

#javascript #reactjs #webpack

#javascript #reactjs #webpack

Вопрос:

Существует приложение react с требованием отображать значки в некоторых частях приложения в автономном режиме. Встроенный svg хорошо подходит.

 import React from 'react';

// inline svg used to show icons in offline mode
export default function InlineSvgBack(): React.ReactElement {
    return <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
        <path d='M20 12H4M4 12L9 7M4 12L9 17' stroke='white' strokeWidth='1.2' strokeLinecap='round' strokeLinejoin='round'/>
    </svg>;
}

Проблема в том, что во всех других приложениях для значков использовался следующий подход

 import iconBack from '../images/icon_back.svg'

// it handled by webpack file-loader
export default function IconBack() {
    return <img src={iconBack} alt="icon back"/>
}

итак, есть каталог images с icon_back.svg , в настоящее время я скопировал его содержимое в InlineSvg компонент, однако я беспокоюсь, что если smbd внесет изменения icon_back.svg , он пропустит мой компонент React.

Мое текущее решение — удалить icon_back.svg . Однако мне интересно, возможно ли сделать что-то подобное

 import React from 'react';
import svg from '../images/icon_back.svg'; // import a line of text

// inline svg used to show icons in offline mode
export default function InlineSvgBack(): React.ReactElement {
    return <>{svg}</>; // output svg line of text
}

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

1. Вы можете получить его содержимое, только обратившись к нему innerHTML (без плагинов), но проблема на самом деле в том, что «однако я беспокоюсь, внесет ли smbd изменения в …», вы на самом деле должны задокументировать это в руководстве разработчика или просто поговорить со своими товарищами по команде

Ответ №1:

Вы можете использовать raw-загрузчик, чтобы получить svg в виде текста (как вы уже правильно сделали). После этого вы можете взять текст и установить его как html-содержимое такого узла:

 import iconBack from '../images/icon_back.svg'; // import with raw-loader

function Icon({svgImage}) {
  return (
    <div dangerouslySetInnerHTML={{__html: svgImage}}/>
  );
}

function App() {
  return (<Icon svgImage={iconBack}/>)
}

Это должно отобразить ваш svg внутри тега div. В качестве альтернативы вы также можете сгенерировать URL-адрес данных, который вы передаете в тег img.