Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
deviprsd opened this issue Nov 6, 2023 · 4 comments

Comments

@deviprsd
Copy link

deviprsd commented Nov 6, 2023

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
Copy link

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

@deviprsd
Copy link
Author

deviprsd commented Nov 7, 2023

@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
Copy link

dougw-bc commented Nov 7, 2023

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants