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

Add Icon Support for Stencil Components (any icons) #62

Open
tmushayahama opened this issue Dec 12, 2024 · 2 comments
Open

Add Icon Support for Stencil Components (any icons) #62

tmushayahama opened this issue Dec 12, 2024 · 2 comments

Comments

@tmushayahama
Copy link
Contributor

For later prettification process
Currently, Font Awesome icons don't render properly inside Stencil components despite loading the CSS via CDN. The icons work in the parent application but fail to display within the web components.

Current Implementation

Loading Font Awesome via CDN in the main HTML:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

Attempted usage in component:

<a class='far fa-newspaper' 
   href={evidence.url} 
   target='_blank' 
   title={"Source: " + evidence.source + "\nEvidence: " + evidence.evidences.map(ev => ev.label).join(",")}>
</a>

I think this is due to shadow DOM encapsulation in web components that prevents the Font Awesome styles from penetrating into the component, causing icons to fail to render.

cc @pkalita-lbl

@pkalita-lbl
Copy link
Collaborator

I think this is due to shadow DOM encapsulation in web components that prevents the Font Awesome styles from penetrating into the component, causing icons to fail to render.

That's exactly right. Beyond that, even if we weren't using the shadow DOM it has never really sat quite right with me that we assume people will also be loading Font Awesome into their page/project -- sort of an unofficial peer dependency of widget.

I think there are a few different options to explore here. If we stick with a font-based approach we could look into using Stencil's global style functionality to make the font available to all components. Or we could look into SVG-based alternatives like Feather, Ionicons, Bootstrap Icons, etc, which usually can be integrated in a number of ways (including straight up copy-and-pasting SVG!)

@tmushayahama
Copy link
Contributor Author

Tried, ionicons, many problems out of the box like svg reading errors (more context if needed).
Feather Icons was awesome, worked out of the box, but no newspaper icons, not enough icons. Haven't checked bootstrap icons. At this point since we will need one or 2 icons, should we just handmade them and put them in assert folder

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

2 participants