在 gatsby 中动态渲染 svg

Question

大家好，我有 sime markdown (mdx) 文件，我想使用 svg。我知道在 gatsby 中渲染动态任何东西都可能很棘手.. 使用 gatsby 图像，您经常必须过滤掉正确的结果。但是对于 svgs，我特别想知道如何根据我的 markdown 中的 frontmatter 动态渲染它们。我试着做一个<img src={svgpath} /> 无济于事。现在我的 svgs 在我的配置中使用它作为组件导入：

    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/ 
        }
      }
    },

我不知道动态导入文件或动态呈现与降价中名称匹配的适当 svg 的方法。以下是我的 markdown 中的 frontmatter 示例：

---
title: Pediatric Dentistry
slug: pediatric-dentistry
svgPath: '../images/assets/dental.svg'
---

我怎样才能在我的模板文件中为每个特定的降价文件动态显示正确的 svg？我可以动态渲染 png、jpg 等，但因为 svgs 具体需要在 gatsby 中使用 transofmrer-sharp 作为组件导入，我正在苦苦挣扎。提前致谢！

Answer 1

我想到的一件事是创建一种映射，即导入所需组件的key-value 对。比如：

import Dental from '../images/assets/dental.svg';
import OtherSvg from '../images/assets/otherSvg.svg';
import OtherLogo from '../images/assets/otherLogo.svg';

const SVGMapper = {
  'dental': Dental,
  'otherSvg': OtherSvg,
  'otherLogo': OtherLogo,
};

export default SVGMapper;

等等……

然后，要从您的降价中呈现它，您只需要：

  let SVGComponent = SVGMapper['dental'];

  return <SVGComponent />;

您可以使用循环或任何您想要的方式使其动态化。

如果需要，您甚至可以更改路径的 key（dental、otherSvg 和 otherLogo）。方法完全相同，您需要更改 SVG 路径的 key 并渲染 SVGMapper[svgPath]