Gatsby中如何根据MDX文档frontmatter动态渲染对应SVG组件

解决方案 #

方案1：通过publicURL直接渲染SVG文件（推荐） #

该方案适配Gatsby原生查询逻辑，无需修改现有插件配置：

1. 调整MDX模板的GraphQL查询，给svgPath字段关联文件的publicURL属性：

query PostQuery($slug: String!) {
  mdx(frontmatter: {slug: {eq: $slug}}) {
    frontmatter {
      title
      slug
      svgPath {
        publicURL
      }
    }
  }
}

Gatsby会自动解析frontmatter中的相对路径为对应文件节点，直接通过img标签渲染即可：

<img 
  src={data.mdx.frontmatter.svgPath.publicURL} 
  alt={`${data.mdx.frontmatter.title} 图标`}
/>

方案2：动态引入SVG为React组件 #

如果需要操作SVG内部属性（比如修改填充色、添加动画），采用该方案：

1. 调整MDX的frontmatter配置，仅保留SVG文件名（不带路径和后缀）：

---
title: Pediatric Dentistry
slug: pediatric-dentistry
svgName: 'dental'
---

2. 在MDX模板文件顶部批量引入所有assets目录下的SVG组件：

import * as SVGComponents from '../images/assets/*.svg'

3. 渲染时根据frontmatter的svgName匹配对应组件：

const TargetSVG = SVGComponents[frontmatter.svgName]
return <TargetSVG />

注意事项 #

• 方案1查询不到publicURL时，检查gatsby-source-filesystem是否正确配置了SVG存放目录
• 方案2仅适合SVG数量较少的场景，SVG文件名避免使用特殊字符和空格
• 现有gatsby-plugin-react-svg配置无需修改，两个方案可共存

内容的提问来源于stack exchange，提问作者Robert O'Toole