search

surface-ui / surface

A server-side rendering component library for Phoenix
https://surface-ui.org
MIT License
2.08k stars 150 forks source link

Question: How would you make the sample tab component to use svg icons instead of font icons #715

Open deviprsd opened 12 months ago

deviprsd commented 12 months ago

I'm running into a conceptual problem and trying to figure out how to structure my code. I tried using the slack but seemed to get no response.

So I'll try to simplify my question here, how would one modify the sample tab component to use SVG icons instead?

VictorGaiva commented 12 months ago

I believe that 'icon' should've been a slot, instead of just :string.

deviprsd commented 12 months ago

@VictorGaiva The slot doesn't propagate to Tab because the TabItem is considered a slot itself. TabItem would have access to icon slot but not Tab. This doesn't work very well when you have to conditional rendering as Tab is doing, seems like one way is passing attributes back to TabItem to generate a button and then one to generate its contents. The whole logic then shifts to TabItem

dougw-bc commented 12 months ago

I would consider the approach taken with new phx generated CoreComponents.icon/1, which embeds the svg into css, and makes it trivial to use as if it was a font based icon.

deviprsd commented 11 months ago

@dougw-bc I ended up that route, now I just want to see if something like this should be possible 😄