Allow the jazzicon size to be controlled by the parent

[desfero]

Right now it's not possible to make the jazzicon size responsive due to the fact it requires a stable dimentions to calculate properly blocks position.

Would be cool to add viewBox to the svg element so it can be later scaled accordingly based on the parent width/height.

As a simple workaround we are right now adding viewBox on demand

export function WalletIcon({ address }) {
  const SVG_DIAMETER = 100;

  const callbackRef = useCallback((el: HTMLDivElement | null) => {
    if (el) {
      const svg = el.querySelector('svg');

      invariant(svg, 'SVG element should exist inside jazzicon');

      // add `viewBox` so svg can be scaled based on a parent width/height
      svg.setAttribute('viewBox', `0 0 ${SVG_DIAMETER} ${SVG_DIAMETER}`);
    }
  }, []);
  
  const iconSize = "3rem";

  return (
    <div style={{ width: iconSize, height: iconSize }} ref={callbackRef}>
      <Jazzicon
        diameter={SVG_DIAMETER}
        seed={jsNumberForAddress(address)}
        paperStyles={{ width: '100%', height: '100%' }}
        svgStyles={{ width: '100%', height: '100%' }}
      />
    </Box>
  );
});  

[John-Oldman-Wang]

you can use this package to solve your question. https://www.npmjs.com/package/@cfx-kit/wallet-avatar