Как импортировать SVG в React


Метод 1

использование в качестве источника для тега img

import icon from './icon.svg';

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <img src={icon} alt=""/>
      </a>
    </Footer>
  )
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Метод 2

использовать его как компонент. В этом случае вы можете стилизовать SVG с помощью CSS. Изменить цвета или анимацию с помощью атрибутов (storke, fill, stroke-dasharray …).

import { ReactComponent as Icon } from './icon.svg';

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <Icon />
      </a>
    </Footer>
  )
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Метод 3

Включить SVG непосредственно в JSX. Этот способ похож на предыдущий, но он может быть не масштабируемым для большого количества SVG.

const Icon = () => {
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
}

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <Icon />
      </a>
    </Footer>
  )
}
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий