我正在尝试使用自定义 SVG 图像自定义 React Router Link“按钮”。我找到了不同来源的自定义图标，或者像 this 这样的解决方案，但自定义图像文件没有成功。路由器链接是动态列表的一部分：

<td><Link to={} data-id={} classname={"btn btn-success"}>Add new image</Link></td>

文本将作为鼠标悬停效果的提示移动。任何建议将不胜感激。

更新 1：

所以我尝试使用 src 和 src。当然它没有渲染并遇到错误。

我已经导入

import { ReactComponent as AddNewImageIcon } from "./WebAppButtons/AddPhoto.svg";

  <td><Link to={``} data-id={} classname={""}>{<AddNewImageIcon />}Add new image</Link></td>

这样渲染出来了，但是在图片下方出现了一个奇怪的图片背景：

Screenshot

之前没有体验过 SVG 文件。有什么办法可以删除它还是SVG文件在反应中的行为？另一个问题是，它应该被包装成用 SCSS 格式化的 DIV 还是这个组件也可以用 SCSS 格式化，例如：宽度/高度/悬停等？