blockies-react-svg/dist/cjs/BlockiesSvg.cjs

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

'use strict';

var _tslib = require('./_tslib-f6c1ff74.cjs');
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var blockies = require('./blockies-ce1f6c6e.cjs');

const store = Object.create(null);
function BlockiesSvg(props) {
    let { address, size = 8, scale = 10, caseSensitive = false, defaultBackgroundColor = 'black' } = props, rest = _tslib.__rest(props, ["address", "size", "scale", "caseSensitive", "defaultBackgroundColor"]);
    const width = size * scale;
    const [opts, setOpts] = react.useState(null);
    const [imageData, setImageData] = react.useState(null);
    if (!caseSensitive && address)
        address = address.toLowerCase();
    react.useEffect(() => {
        if (address) {
            if (store[address] && store[address].opts.size === size) {
                setOpts(store[address].opts);
                setImageData(store[address].imageData);
            }
            else {
                const newOpts = blockies.buildOpts({ seed: address, size, scale });
                const newImageData = blockies.createImageData(newOpts.size);
                setOpts(newOpts);
                setImageData(newImageData);
                store[address] = { opts: newOpts, imageData: newImageData };
            }
        }
    }, [address]);
    if (!address)
        return (jsxRuntime.jsx("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: jsxRuntime.jsx("rect", { width: width, height: width, fill: defaultBackgroundColor }) })));
    if (opts && imageData) {
        return (jsxRuntime.jsxs("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: [jsxRuntime.jsx("rect", { width: width, height: width, fill: opts.bgcolor }), jsxRuntime.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 jsxRuntime.jsx("rect", { width: scale, height: scale, x: row, y: col }, `${address}-${i}`);
                        }
                    }) })), jsxRuntime.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 jsxRuntime.jsx("rect", { width: scale, height: scale, x: row, y: col }, `${address}-${i}`);
                        }
                    }) }))] })));
    }
    else
        return (jsxRuntime.jsx("svg", Object.assign({}, rest, { width: width, height: width, viewBox: `0 0 ${width} ${width}`, xmlns: 'http://www.w3.org/2000/svg' }, { children: jsxRuntime.jsx("rect", { width: width, height: width, fill: 'black' }) })));
}

module.exports = BlockiesSvg;
//# sourceMappingURL=BlockiesSvg.cjs.map