Импортировать SVG как компонент в Гэтсби

Question

Я видел следующее решение:

import { ReactComponent as Img } from 'path/to/file.svg'

Но в Гэтсби это не работает. Я знаю, что существуют плагины для этого, но, возможно, это можно сделать проще.

Answer 1

Для импорта изображения SVG в качестве компонента React используйте https://react-svgr.com/docs/webpack У них есть модуль веб-пакета, очень простая конфигурация, и он работал для меня с первой попытки. Большим преимуществом является то, что вы можете изменить изображение svg, например, цвет заливки. Дайте мне знать, если я смогу помочь вам с этим.

Answer 2

Как вы сказали, для этого есть плагины, которые означают более чистый код (а не полный SVG, встроенный в компонент) с тем же конечным результатом. Используя этот плагин , вам просто нужно импортировать SVG следующим образом:

import Icon from "./path/assets/icon.svg";

Чтобы установить, вам нужно только добавить зависимость, используя npm или yarn и, в вашем gatsby - node.js используйте этот фрагмент:

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /assets/
    }
  }
}

Обратите внимание, что /assets/ должна быть вашей папкой svg (то есть: /svg/)

Answer 3

Просто сделай так ...

import YourDesiredName from 'path/to/file.svg'