Как передать svg в компонент?

Question

Как передать svg в компонент?

Рейтинг: 1Ответов: 1Опубликовано: 30.03.2023

Как передать 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"/>

css javascript html reactjs svg

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Для передачи 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

Как передать svg в компонент?

Ответы