Проблемы с SVG при развертывании Gatsby Cloud и Netlify

Question

У меня проблема с svgs, используемым в качестве импортированного сайта gatsby. Кажется, что все работает нормально при разработке, создании и обслуживании. Когда я развертываю сайт в облаке gatsby, интегрированном с netflify, все svgs, которые импортируются не как встроенный код html, не работают должным образом. Странно то, что во время сборки / развертывания я не получил никаких ошибок. Кто-нибудь может помочь? Ниже мои зависимости и пример использования svg на сайте.

"dependencies": {
"@mdx-js/mdx": "^1.6.6",
"@mdx-js/react": "^1.6.6",
"babel-plugin-styled-components": "^1.10.7",
"dotenv": "^8.2.0",
"gatsby": "^2.24.2",
"gatsby-image": "^2.4.13",
"gatsby-plugin-layout": "^1.3.10",
"gatsby-plugin-manifest": "^2.4.18",
"gatsby-plugin-mdx": "^1.2.25",
"gatsby-plugin-offline": "^3.2.17",
"gatsby-plugin-react-helmet": "^3.3.10",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sharp": "^2.6.19",
"gatsby-plugin-styled-components": "^3.3.10",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-datocms": "^2.3.0",
"gatsby-source-filesystem": "^2.3.19",
"gatsby-transformer-sharp": "^2.5.11",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"slugify": "^1.4.4",
"styled-components": "^5.1.1"

},

Пример использования svg на сайте:

import heroBgSvg from "../../assets/images/bg/bgHeroDark.svg"

const HeroSectionWrapper = styled.div`
  background-image: url(${heroBgSvg});
  background-repeat: no-repeat;`

Все работает правильно при сборке / разработке, но не когда страница находится в сети после сборки / развертывания в облаке gatsby.

Answer 1

При использовании gatsby-plugin-react-svg ваша папка SVG не должна содержать никаких других ресурсов, кроме SVG. Убедитесь, что ваше правило включения - это папка только для SVG, в идеале, создав специальную папку c, например:

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