React项目中添加SVG图标至iconsData.js并在iconList.jsx渲染的问题

下面提供三种可行的解决方法，根据你的实际场景选择：

方法一：将SVG作为React组件导入渲染 #

这种方法适合图标数量不多的场景，每个SVG会被转换成独立的React组件，使用起来直观。

1. 更新iconsData.jsx
   先把SVG文件转换成React组件（可以用SVGR工具一键转换，或者手动改写），然后在数据数组中存储组件实例：

// 导入转换后的SVG组件
import TumblrIcon from '../icons/TumblrIcon';
import TwitchIcon from '../icons/TwitchIcon';
import TwitterIcon from '../icons/TwitterIcon';

export const Data = [
  { key: "01", icon: <TumblrIcon /> },
  { key: "02", icon: <TwitchIcon /> },
  { key: "03", icon: <TwitterIcon /> },
];

2. 修改iconList.jsx
   直接在Link标签内渲染对应的组件即可：

import React from "react";
import "./IconsList.scss";
import { Data } from "../../Data/iconsData";
import { Link } from "react-router-dom";

function iconsList() {
  return (
    <div id="x__iconsFeild">
      <ul id="x__iconsList" className="d-flex align-items-start flex-wrap p-0">
        {Data.map(({ key, icon }) => (
          <li key={key} className="list-unstyled">
            <Link
              to={`/icons/${key}`}
              className="iconWrapper p-2 small align-items-center justify-content-center border rounded shadow"
            >
              {icon}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default iconsList;

方法二：使用SVG Sprite（适合大量图标场景） #

通过SVG Sprite可以减少HTTP请求，统一管理所有图标，适合项目中有大量图标的情况。

1. 创建SVG Sprite文件
   新建icons-sprite.svg，把所有图标包裹在<symbol>标签中，每个图标对应唯一的id：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="tumblr" viewBox="0 0 24 24">
    <path d="M19.098 7.353c.312-.01.627-.012.945-.012C20.63 7.341 21 7.71 21 8.12v1.036c0 .41-.372.779-.802.768-.312-.01-.627-.012-.945-.012-.428 0-.8.37-.8.779v1.036c0 .41.372.779.8.768.312-.01.627-.012.945-.012.428 0 .8.37.8.779v4.55c0 1.458-1.182 2.64-2.64 2.64h-2.744c-.41 0-.779-.372-.768-.8.01-.312.012-.627.012-.945 0-.428-.37-.8-.779-.8h-2.072c-.41 0-.779-.372-.768-.8.01-.312.012-.627.012-.945 0-.428-.37-.8-.779-.8H7.24c-1.458 0-2.64-1.182-2.64-2.64V8.12c0-.41.372-.779.8-.768.312.01.627.012.945.012.428 0 .8-.37.8-.779V5.276c0-.41-.372-.779-.8-.768-.312.01-.627.012-.945.012C4.37 4.5 4 4.13 4 3.719V2.683c0-.41.372-.779.8-.768.312.01.627.012.945.012.428 0 .8-.37.8-.779V.001h2.072c.41 0 .779.372.768.8-.01.312-.012.627-.012.945 0 .428.37.8.779.8h2.744c.41 0 .779.372.768.8-.01.312-.012.627-.012.945 0 .428.37.8.779.8h2.072c.41 0 .779.372.768.8-.01.312-.012.627-.012.945v1.036c0 .41.372.779.8.768Z"/>
  </symbol>
  <symbol id="twitch" viewBox="0 0 24 24">
    <path d="M16.997 3H3.003C1.898 3 1 3.898 1 5.002v13.996C1 20.102 1.898 21 3.003 21h13.994c1.105 0 2.003-.898 2.003-2.002V5.002C19 3.898 18.102 3 16.997 3Zm-5.54 13.342c-1.07.42-2.042.658-2.918.658-.876 0-1.848-.238-2.918-.658V6.658c1.07-.42 2.042-.658 2.918-.658.876 0 1.848.238 2.918.658v9.684Zm5.54-2.684h-2.29V9.342h2.29v4.316Z"/>
  </symbol>
  <symbol id="twitter" viewBox="0 0 24 24">
    <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23Z"/>
  </symbol>
</svg>

2. 更新iconsData.jsx
   存储每个图标的id：

export const Data = [
  { key: "01", iconId: "tumblr" },
  { key: "02", iconId: "twitch" },
  { key: "03", iconId: "twitter" },
];

3. 修改iconList.jsx
   引入SVG sprite文件，通过<use>标签引用对应图标：

import React from "react";
import "./IconsList.scss";
import { Data } from "../../Data/iconsData";
import { Link } from "react-router-dom";
// 引入SVG sprite文件
import '../icons/icons-sprite.svg';

function iconsList() {
  return (
    <div id="x__iconsFeild">
      <ul id="x__iconsList" className="d-flex align-items-start flex-wrap p-0">
        {Data.map(({ key, iconId }) => (
          <li key={key} className="list-unstyled">
            <Link
              to={`/icons/${key}`}
              className="iconWrapper p-2 small align-items-center justify-content-center border rounded shadow"
            >
              <svg className="icon">
                <use xlinkHref={`#${iconId}`} />
              </svg>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default iconsList;

方法三：直接渲染SVG路径字符串 #

如果你的数据里已经存了完整的SVG路径，可以创建一个通用组件来渲染路径。

1. 更新iconsData.jsx
   存储SVG路径字符串：

export const Data = [
  { key: "01", iconPath: "M19.098 7.353c.312-.01.627-.012.945-.012C20.63 7.341 21 7.71 21 8.12v1.036c0 .41-.372.779-.802.768-.312-.01-.627-.012-.945-.012-.428 0-.8.37-.8.779v1.036c0 .41.372.779.8.768.312-.01.627-.012.945-.012.428 0 .8.37.8.779v4.55c0 1.458-1.182 2.64-2.64 2.64h-2.744c-.41 0-.779-.372-.768-.8.01-.312.012-.627.012-.945 0-.428-.37-.8-.779-.8h-2.072c-.41 0-.779-.372-.768-.8.01-.312.012-.627.012-.945 0-.428-.37-.8-.779-.8H7.24c-1.458 0-2.64-1.182-2.64-2.64V8.12c0-.41.372-.779.8-.768.312.01.627.012.945.012.428 0 .8-.37.8-.779V5.276c0-.41-.372-.779-.8-.768-.312.01-.627.012-.945.012C4.37 4.5 4 4.13 4 3.719V2.683c0-.41.372-.779.8-.768.312.01.627.012.945.012.428 0 .8-.37.8-.779V.001h2.072c.41 0 .779.372.768.8-.01.312-.012.627-.012.945 0 .428.37.8.779.8h2.744c.41 0 .779.372.768.8-.01.312-.012.627-.012.945 0 .428.37.8.779.8h2.072c.41 0 .779.372.768.8-.01.312-.012.627-.012.945v1.036c0 .41.372.779.8.768Z" },
  { key: "02", iconPath: "M16.997 3H3.003C1.898 3 1 3.898 1 5.002v13.996C1 20.102 1.898 21 3.003 21h13.994c1.105 0 2.003-.898 2.003-2.002V5.002C19 3.898 18.102 3 16.997 3Zm-5.54 13.342c-1.07.42-2.042.658-2.918.658-.876 0-1.848-.238-2.918-.658V6.658c1.07-.42 2.042-.658 2.918-.658.876 0 1.848.238 2.918.658v9.684Zm5.54-2.684h-2.29V9.342h2.29v4.316Z" },
  { key: "03", iconPath: "M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0