blockies-react-svg/dist/es/BlockiesSvg.mjs

Blockies react SVG function component, blocky identicons, address-unique ethereum avatar, SVG base64 generation in browser or nodejs.

import { _ as __rest } from './_tslib-5dd6082a.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { b as buildOpts, c as createImageData } from './blockies-a884f18e.mjs';

const store = Object.create(null);
function BlockiesSvg(props) {
    let { address, size = 8, scale = 10, caseSensitive = false, defaultBackgroundColor = 'black' } = props, rest = __rest(props, ["address", "size", "scale", "caseSensitive", "defaultBackgroundColor"]);
    const width = size * scale;
    const [opts, setOpts] = useState(null);
    const [imageData, setImageData] = useState(null);
    if (!caseSensitive && address)
        address = address.toLowerCase();
    useEffect(() => {
        if (address) {
            if (store[address] && store[address].opts.size === size) {
                setOpts(store[address].opts);
                setImageData(store[address].imageData);
            }
            else {
                const newOpts = buildOpts({ seed: address, size, scale });
                const newImageData = createImageData(newOpts.size);
                setOpts(newOpts);
                setImageData(newImageData);
                store[address] = { opts: newOpts, imageData: newImageData };
            }
        }
    }, [address]);
    if (!address)
        return (jsx("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: jsx("rect", { width: width, height: width, fill: defaultBackgroundColor }) })));
    if (opts && imageData) {
        return (jsxs("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: [jsx("rect", { width: width, height: width, fill: opts.bgcolor }), jsx("g", Object.assign({ fill: opts.color }, { children: imageData === null || imageData === void 0 ? void 0 : imageData.map((value, i) => {
                        if (value === 1) {
                            const row = (i % size) * scale;
                            const col = Math.floor(i / size) * scale;
                            return jsx("rect", { width: scale, height: scale, x: row, y: col }, `${address}-${i}`);
                        }
                    }) })), jsx("g", Object.assign({ fill: opts.spotcolor }, { children: imageData === null || imageData === void 0 ? void 0 : imageData.map((value, i) => {
                        if (value === 2) {
                            const row = (i % size) * scale;
                            const col = Math.floor(i / size) * scale;
                            return jsx("rect", { width: scale, height: scale, x: row, y: col }, `${address}-${i}`);
                        }
                    }) }))] })));
    }
    else
        return (jsx("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: jsx("rect", { width: width, height: width, fill: 'black' }) })));
}

export { BlockiesSvg as default };
//# sourceMappingURL=BlockiesSvg.mjs.map