react-mana-symbols/dist/esm/components/ManaSymbol.js

React component library for rendering Magic: The Gathering mana symbols

import React, { Suspense } from 'react';
import { validateManaSymbol } from '../utils.js';

var DEFAULT_SIZE = 24;
var importSvg = function (symbolKey) {
    return React.lazy(function () {
        return import("../assets/mana/".concat(symbolKey, ".svg")).catch(function (error) {
            console.warn("Failed to load mana symbol: ".concat(symbolKey), error);
            return { default: function () { return null; } };
        });
    });
};
var ManaSymbol = function (_a) {
    var symbol = _a.symbol, _b = _a.size, size = _b === void 0 ? DEFAULT_SIZE : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
    if (!validateManaSymbol(symbol)) {
        console.warn("Invalid mana symbol: ".concat(symbol));
        return null;
    }
    var symbolKey = symbol.toLowerCase().replace('/', '');
    var SvgComponent = importSvg(symbolKey);
    return (React.createElement(Suspense, { fallback: null },
        React.createElement(SvgComponent, { width: size, height: size, className: className, style: {
                display: 'inline-block',
                verticalAlign: 'middle',
                margin: '0 1px',
            }, "aria-label": "{".concat(symbol, "}") })));
};

export { ManaSymbol };
//# sourceMappingURL=ManaSymbol.js.map