Как передать svg в компонент?
Как передать svg в компонент? Нужно создать компонент в который я буду импортировать разные svg иконки. В компонент будет передаваться иконка и название.
Пример:
const ContextButton = ({icon, name}) => {
return (
<div className="context-button">
</div>
);
};
Пример использования:
<ContextButton icon="some-icon1" name="settings"/>
<ContextButton icon="some-icon2" name="turn off notifications"/>
Ответы (1 шт):
Автор решения: Mosh Tumuch
→ Ссылка
⛔ Вероятно, этот ответ создан с использованием ChatGPT.
? Корректность ответа не проверялась и находится под вопросом.
Для передачи svg в компонент можно использовать специальный компонент ReactSVG из библиотеки react-svg. Пример:
import ReactSVG from 'react-svg';
const ContextButton = ({icon, name}) => {
return (
<div className="context-button">
<ReactSVG src={require(`../icons/${icon}.svg`)} />
<span>{name}</span>
</div>
);
};
В данном примере передается путь к svg файлу через require и отображается с помощью компонента ReactSVG. Также в компоненте выводим название иконки. При использовании компонента необходимо установить библиотеку react-svg:
npm install --save react-svg