@metamask/design-system-react
Version:
Design system react ui components
41 lines • 1.67 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { useEffect, useMemo, useState } from "react";
const React = $importDefault($React);
import { getMaskiconSVG } from "./Maskicon.utilities.mjs";
export const Maskicon = ({ address, size = 32, className, ...props }) => {
const [svgString, setSvgString] = useState('');
useEffect(() => {
let cancelled = false;
// eslint-disable-next-line no-void
void (async () => {
const newSvg = await getMaskiconSVG(address, size);
if (!cancelled) {
setSvgString(newSvg);
}
})();
return () => {
cancelled = true;
};
}, [address, size]);
const dataUri = useMemo(() => {
if (!svgString) {
return '';
}
// Normalize whitespace and encode the SVG for safe data URI usage
const cleanedSvg = svgString.replace(/\s+/gu, ' ').trim();
const encoded = encodeURIComponent(cleanedSvg);
return `data:image/svg+xml,${encoded}`;
}, [svgString]);
if (!dataUri) {
// Return an img element with transparent placeholder to maintain consistent typing
return (React.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E", ...props }));
}
return (React.createElement("img", { alt: "maskicon", width: size, height: size, className: className, src: dataUri, ...props }));
};
Maskicon.displayName = 'Maskicon';
//# sourceMappingURL=Maskicon.mjs.map