React应用下载SVG文件时出现命名空间前缀错误的问题求助

我现在在做一个React项目，里面有个IconCard组件，每个卡片里包含一个图标，还加了个按钮，点击可以下载对应的SVG图标。目前下载功能能正常触发，文件名也正确（比如svgFile.svg），文件也能保存到本地下载文件夹，但打开这个SVG文件时，会弹出错误：

Namespace prefix xlink for href on use is not defined

我之前了解到xlink命名空间的href属性已经被废弃，试过把xlink前缀去掉只保留href，但问题还是没有解决。我的图标在项目里的路径是：
project/public/assets/icons/[icon-name]/[icon-name.svg]

下面是我的相关代码和SVG示例，麻烦大家帮我看看问题出在哪：

IconCard组件代码 #

import React, { useCallback, useRef } from 'react';
import PropTypes from 'prop-types';

import { CbdsButton, CbdsIcon } from '@cbds/cbds-components-react';
import ButtonInlineCode from '../ButtonInlineCode';


const IconCard = ({ iconName, size, color, library, a11yRole, a11yLabel }) => {

const svgRef = useRef();

const downloadSVG = useCallback(() => {
    const svg = svgRef.current.innerHTML;
    const blob = new Blob([svg], { type: "image/svg+xml" });
    downloadBlob(blob, `${iconName}.svg`);
}, []);

return (
    <div className="cbdsws-c-iconCard">

    <div className="cbdsws-c-iconCard__media" ref={svgRef}>
    <CbdsIcon iconName={iconName} size={size} color={color} library={library} a11yRole={a11yRole} a11yLabel={a11yLabel ? a11yLabel : iconName} />
  </div>

  <div className="cbdsws-c-iconCard__body">
    <div className="cbdsws-c-iconCard__copyBtn cbdsws-c-iconCard__longName">
      <ButtonInlineCode codeSnippet={iconName} type={library === "ui" ? "icon" : "iconBrand"} />
      <br />
      <CbdsButton size="sm" onClick={downloadSVG} variant="ghost" label="Download" />
    </div>
  </div>

</div>
);

function downloadBlob(blob, filename) {
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    setTimeout(() => URL.revokeObjectURL(objectUrl), 5000);
    }

};

IconCard.propTypes = {
iconName: PropTypes.string.isRequired,
size: PropTypes.oneOf([
    "sm",
    "md",
    "12",
    "16",
    "20",
    "24",
    "28",
    "60",
    "80",
    "120",
    ]),
    color: PropTypes.oneOf(["primary", "light", "dark"]),
    library: PropTypes.oneOf(["ui", "brand"]),
    a11yRole: PropTypes.string,
    a11yLabel: PropTypes.string,
};

IconCard.defaultProps = {
    iconName: "close",
    size: null,
    color: null,
    library: "ui",
    a11yRole: "img",
};

export default IconCard;

示例SVG文件内容 #

<svg width="48" height="48" viewBox="0 0 48 48">
    <path fill-rule="evenodd" d="M24 4c10.985 0 20 9.015 20 20s-9.015 20-20 20S4 34.985 4 24 13.015 4 24 4zm0 10c-1.003 0-2 1-2 2v6h-6c-.999 0-2 1-2 2s1 2 2 2h6v6c0 1 1 2 2 2s2-1 2-2v-6h6c1 0 2-1 2-2s-1-2-2-2h-6v-6c0-1.001-.997-2-2-2z"></path>
</svg>

麻烦各位大佬帮忙分析一下，谢谢大家！

备注：内容来源于stack exchange，提问作者user3472810