@penaprieto/design-system/dist/components/SpriteLoader/SpriteLoader.js

Multi-brand React design system with design tokens from Figma

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpriteLoader = void 0;
const react_1 = __importDefault(require("react"));
/**
 * Component that loads the SVG sprite into the DOM.
 * Should be included once at the root of your application.
 */
const SpriteLoader = () => {
    const [spriteLoaded, setSpriteLoaded] = react_1.default.useState(false);
    react_1.default.useEffect(() => {
        // Check if sprite is already loaded
        if (document.getElementById('svg-sprite-container')) {
            setSpriteLoaded(true);
            return;
        }
        // Load the sprite
        fetch('/assets/icons/symbol/svg/sprite.symbol.svg')
            .then(res => res.text())
            .then(svgContent => {
            const container = document.createElement('div');
            container.id = 'svg-sprite-container';
            container.style.display = 'none';
            container.innerHTML = svgContent;
            document.body.insertBefore(container, document.body.firstChild);
            setSpriteLoaded(true);
        })
            .catch(err => {
            console.error('Failed to load SVG sprite:', err);
        });
    }, []);
    return null;
};
exports.SpriteLoader = SpriteLoader;