时间戳

首页 > 解决方案 > 从 JSON 文件中读取 SVG 片段

javascript - 从 JSON 文件中读取 SVG 片段

问题描述

我生成了一个 JSON 文件，其中包含一长串“图标”对象，每个对象都包含一个名称和一个路径：

[
...
{
    "name": "add",
    "path": "<svg><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"><\/path><\/svg>,<path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\">"
},
...
]

JSON文件验证但是当我尝试使用以下方法创建图标索引时：

const allIcons = parsedIcons.map((icon) => {
  return (
    <li>
      <svg viewBox="0 0 24 24" height="24" width="24">
        {icon.path}
      </svg>
      <p>{icon.name}</p>
    </li>
  )
})

然后将 allIcons 放入无序列表中，但对于每个图标，{icon.path} 以字符串形式出现 - '<' 转换为&lt;，等等，并且 SVG 不会呈现。我已经尝试过 JSON.stringify 然后 JSON.parse 以及这两个的所有排列但没有任何成功。

似乎我只是缺少一些基本概念，而且我整天都在反对它！任何帮助表示赞赏！

标签： javascriptjsonreactjssvg

解决方案

你可以这样做：

仅将路径描述符存储在 JSON 中。

[
...
{
    "name": "add",
    "path": "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
},
...
]

并将您的组件更改为：

const allIcons = parsedIcons.map((icon) => {
  return (
    <li>
      <svg viewBox="0 0 24 24" height="24" width="24">
        <path d="{icon.path}"/>
      </svg>
      <p>{icon.name}</p>
    </li>
  )
})

推荐阅读