Allow the jazzicon size to be controlled by the parent #49
Description
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>
);
});