How to set size of child element?

I have this component:

export function NavigationBarItem(props: { icon: JSX.Element }) {
  return <div class="m-4 h-8 w-8">{props.icon}</div>;
}

export function NavigationBarItem(props: { icon: JSX.Element }) {
  return <div class="m-4 h-8 w-8">{props.icon}</div>;
}

How do I set the icons size?

3 Replies

one pattern is to have icons always take as much space as they can, so it can be easily set by the parent

I usually use an em size for icons, so it scales with the font.

michaelOP•2y ago

i suppose that makes sense