fix(svgicon): set inline-block

[anniehu4]

Summary:

Related to https://github.com/FB-PLP/traject/pull/8898 -- the old EDSCandidates icon set flex-none, while the new EDS icon only set display: inline. In trying to unravel why, I noticed that:

• when @dierat originally copied over the icon, it had styling @apply flex-none inline-block
• when we split off the icon changes into a separate PR, the styling became @apply inline (and then was landed)

I think we always wanted @apply flex-none inline-block and something got lost in the splitting 🤔

• docs for display: inline state that "Any height and width properties will have no effect", which doesn't sound right for svg icon. In contrast, inline-block does respect height/width
• flex: none "sizes the flex item according to the width / height of the content, but doesn't allow it to shrink", which we do want dubious if we want -- consumer can set flex themselves

these also match the Material UI icon styles

Test Plan:

no visual changes per Percy

[jinlee93]

Thanks again for the fix~~

[github-actions]

size-limit report

Path	Size
components	56.05 KB (0%)
styles	3.91 KB (0%)

[ahuth]

Is it odd for the icon to set it's own flex properties?

I wonder if we should leave that up to users of the component. For example, if the LP left nav applies display: flex, should it be the one to also set any flex properties on the items?

[anniehu4]

mm fair point. I thought it might have been standard b/c material was doing it but seems they're in the minority actually

[codecov]

Codecov Report

Merging #673 (88eb429) into main (f1f92e2) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #673   +/-   ##
=======================================
  Coverage   90.62%   90.62%           
=======================================
  Files          23       23           
  Lines         384      384           
  Branches       96       96           
=======================================
  Hits          348      348           
  Misses         36       36           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f1f92e2...88eb429. Read the comment docs.

[dierat]

I don't remember exactly, but what I'm guessing happened is that I didn't see a clear purpose for that CSS and removed it (thinking it might have been a mistake or no longer relevant). Leaving the flex property to the parent makes sense to me; I don't think I would expect that to come on the atomic component (if I were a dev using it in my feature).