[Feature request] Support smaller Bento icon size

[simurai]

This came up in this card (internal).

Problem

Currently when adding a leadingVisual to <Bento.Content>

<Bento.Content
  leadingVisual={<PulseIcon />}
>

a 24px icon is used and upscaled to 44px.

But Design would like to use a 16px icon, upscaled to 32px (doubled), which has "thicker" lines.

Possible solution

Allow the size prop to be passed to the icon:

<Bento.Content
  leadingVisual={<PulseIcon size={16} />}
>

which then can be resized with CSS to a 32px rendered size.

Or maybe a leadingVisualSize prop would be nice too.

<Bento.Content
  leadingVisual={<PulseIcon />}
  leadingVisualSize="small"
>

that would render the icon like:

<svg viewBox="0 0 16 16" width="32" height="32">

Urgency

Not too urgent, found a somewhat simple workaround by adding an extra stroke. Still not ideal though.

Also not sure if this is a "one-off" for that project, or if it's something we'll want to use more often.

/cc @nsolerieu

[nsolerieu]

@simurai I brought this up during Primer Brand Office Hours - it's on our radar.

We've been doing this a log as the thicker 16px icons have more visual weight and carries our brand accent better so we're examinig what the best way to do this at the system level. CC @rezrah