Gatsby新手求助：如何从Markdown生成带SVG的首页组件及解决SVG查询失效问题

Hey there! Let’s break down how to fix this SVG issue in Gatsby and get your homepage components up and running smoothly.

First off, the core reason your GraphQL query isn’t returning results for SVGs is that Gatsby treats vector graphics differently than raster images (like PNG/JPG). The childImageSharp field only exists for images that ImageSharp can process (bitmaps), so it won’t show up for SVGs—that’s why your query works for PNGs but not SVGs.

Here are two solid solutions to get your SVG-powered components working:

Solution 1: Use publicURL to render SVGs via <img> #

You mentioned you already figured out publicURL is the right direction—great call! Adjust your GraphQL query to fetch the public URL of each SVG directly, no childImageSharp needed:

query HomepageComponentsQuery {
  marketingSvg: file(relativePath: { eq: "svg/marketing.svg" }) {
    publicURL
  }
  designSvg: file(relativePath: { eq: "svg/design.svg" }) {
    publicURL
  }
  developmentSvg: file(relativePath: { eq: "svg/development.svg" }) {
    publicURL
  }
  analyticsSvg: file(relativePath: { eq: "svg/analytics.svg" }) {
    publicURL
  }
}

Then, in your component, map over your component data and render each SVG with an <img> tag:

import { useStaticQuery, graphql } from "gatsby"

const Homepage = () => {
  const data = useStaticQuery(graphql`
    # Paste the query above here
  `)

  // Define your component data (or pull this from Markdown frontmatter!)
  const components = [
    {
      title: "Marketing",
      text: "Drive engagement with targeted campaigns",
      svgUrl: data.marketingSvg.publicURL
    },
    {
      title: "Design",
      text: "Build beautiful, user-centric interfaces",
      svgUrl: data.designSvg.publicURL
    },
    {
      title: "Development",
      text: "Ship robust, scalable web solutions",
      svgUrl: data.developmentSvg.publicURL
    },
    {
      title: "Analytics",
      text: "Measure and optimize performance",
      svgUrl: data.analyticsSvg.publicURL
    }
  ]

  return (
    <div className="homepage-components">
      {components.map((component, index) => (
        <div key={index} className="component-card">
          <img src={component.svgUrl} alt={component.title} className="component-icon" />
          <h3>{component.title}</h3>
          <p>{component.text}</p>
        </div>
      ))}
    </div>
  )
}

export default Homepage

If you’re storing component data in Markdown frontmatter (e.g., a components array in your homepage MD file), you can adjust the query to fetch both the frontmatter data and all SVG files, then match the svgPath from frontmatter to the SVG’s relativePath to get the correct publicURL.

Solution 2: Import SVGs as React Components (for more flexibility) #

If you need to customize your SVGs—like changing colors, sizes, or adding interactions—use the gatsby-plugin-react-svg plugin to import SVGs as React components:

1. Install the plugin:

npm install gatsby-plugin-react-svg

2. Add it to your gatsby-config.js (specify your SVG directory):

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets\/svg/ // Match your SVG file path
        }
      }
    }
  ]
}

3. Import and use SVGs directly as components:

import MarketingSvg from "../assets/svg/marketing.svg"
import DesignSvg from "../assets/svg/design.svg"

// In your component render:
<MarketingSvg style={{ width: "60px", height: "60px", fill: "#2563eb" }} />

This method lets you control SVG styles dynamically, which is perfect if you want hover effects or theme-based color changes.

Final Thoughts #

Absolutely—building 4 homepage components with SVGs, titles, and text is totally feasible in Gatsby! Choose the method that fits your needs:

• Use publicURL + <img> for simple, static SVG displays
• Use React component imports for flexible, customizable SVGs

内容的提问来源于stack exchange，提问作者oskar333