从 React (Gatsby) 中的 GraphQL 查询导入 SVG答案

【问题标题】：Import SVGs from GraphQL query in React (Gatsby)从 React (Gatsby) 中的 GraphQL 查询导入 SVG
【发布时间】：2021-08-06 20:01:10
【问题描述】：

我有一个案例研究页面，其中显示了带有背景图像和 SVG 徽标的项目网格。这些来自 WordPress CPT，并使用 GraphQL 显示在我的 Gatsby 网站上。

我需要将 SVG 编写为内联，而不是 <img> 标记，因此我假设我需要在文件顶部导入它们，但我找不到可行的解决方案。我的尝试是：

data.allWordpressWpProject.edges.map((svg, i) => {
    import Logo{i} from svg.node.acf.prj_logo.url.localFile.publicURL
})

我认为这是一个相当普遍的问题，但我似乎无法在任何地方找到解决方案。有人可以帮忙吗？

【问题讨论】：

您能说明一下 GraphQL 如何适应这个问题吗？
这只是返回包含我尝试导入的 svg 文件的对象数组的数据源。

标签： javascript reactjs svg graphql

【解决方案1】：

在解决方案的道路上尽可能迈出一步：我继续从 publicURL 获取 SVG 文件：

let SvgObject = await fetch(svg.localFile.publicURL)
  .then(response => response.text())

let stringToHTML = function(str) {
  let parser = new DOMParser();
  let svgTest = parser.parseFromString(str, 'text/html');
  return svgTest.body;
}

const SvgDOMElement = stringToHTML(SvgObject)

我的困难在于，我未能将 DOM 元素实现到组件中。

【讨论】：