Ошибка при загрузке файлов SVG из приложения React ⇐ Javascript

[Anonymous]

У меня есть страница компонентов Iconcard, которые потребляют компоненты значков. Я добавил кнопку на каждую карту, чтобы разрешить загружать значок для каждой карты на щелчке кнопки, содержащейся на этой карте, с функцией «Загрузкасвг». Я вижу, как происходит загрузка, и изображения называются соответствующим образом (svgfile.svg) и сохраняются в моей папке загрузки, но когда я открываю свою папку загрузки на своей машине и нажимаю на файл SVG, я получаю эту ошибку:
Namespace prefix xlink for href on use is not defined
< /code>
Я прочитал о устаревшем пространстве имен xlink для атрибутов href, но когда я удаляю «xlink» и просто использую «href», это не решает проблему. Путь к моим значкам заключается в следующем:
project/public/assets/icons/ticon-name=/nmon-name.svgЦ. p>
Вот мой код. < /p>
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 (












);

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;
< /code>
И вот пример одного из файлов SVG. Они все как этот. Я полагаю, что возможно, что мне может потребоваться добавить пространство имен в каждый SVG. Их сотни. Те, кто на карточках вытаскивается из 2 спрайта, но для их загрузки я должен был сохранить каждого отдельного в папке. < /P>



< /code>
может кто -нибудь пролить немного света? Спасибо.


Подробнее здесь: https://stackoverflow.com/questions/794 ... pplication