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.

Sign up for GitHub

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

Jump to bottom

Cannot get embedded Font Awesome icons to work at all #306

Closed
egeersoz opened this issue Jun 23, 2023 · 6 comments · Fixed by #316
Closed

Cannot get embedded Font Awesome icons to work at all #306

egeersoz opened this issue Jun 23, 2023 · 6 comments · Fixed by #316
Assignees
@cblavier

Comments

@egeersoz
Copy link

Elixir 1.14.2
Phoenix 1.7.1
LiveView 0.18.17

We have a lot of components in our app that take a fa_icon attribute and render it as part of the component. We would like to have its icons rendered in Storybook's stories as well. We haven't been able to get it to work though.

Example %Variation{} for MyAppWeb.UI.Icon:

%Variation{
  id: :default,
  attributes: %{
    fa_icon: "fa-user",
  }
}

This renders the component without the icon:
image

Now, fa-user is part of the free FA icons. Out of curiosity, I tried changing the font_awesome_plan to :pro and gave it a font_awesome_kit_id (we have confirmed that this kit ID works when the kit is loaded via a <script> tag on the layout). When I did this, the entire storybook page stopped loading. All I see is a white screen with no errors in the browser console or the server terminal.

The browser console only shows these warnings, which are also shown without the FA config changes so I'm not sure if they are related:

app.js:20 No storybook configuration detected.
(anonymous) @ app.js:20

app.js:20 If you need to use custom hooks or uploaders, please define them in JS file and declare this     file in your Elixir backend module options (:js_path key).
(anonymous) @ app.js:20
@egeersoz
Copy link
Author

egeersoz commented Jun 28, 2023 •
edited
Loading

It looks like the issue is with the lsb-wait-for-icons class that gets added to body:

<body class="lsb lsb-max-w-full lsb-overflow-hidden lsb-wait-for-icons" cz-shortcut-listen="true">

It never gets removed automatically, but if I remove it manually, everything works and the FA icons get displayed on the story pages.

What triggers the event that removes that class, and why might it not be firing?

@egeersoz
Copy link
Author

egeersoz commented Jun 28, 2023 •
edited
Loading

Looking at the source code, it looks like lsb-wait-for-icons class gets added to the body if there's a font_awesome_kit_id in the config. There's also a CSS rule for .fontawesome-i2svg-active .lsb-wait-for-icons with display: initial but there isn't any place where the fontawesome-i2svg-active class gets added.

Not sure what the purpose of hiding the entire page to begin with, so I'll submit a PR disabling this entire logic.

edit: I get a 403 when trying to push my branch, so maybe someone else will have to do it.

@egeersoz
Copy link
Author

As a temporary workaround, I was able to get things working by adding this to storybook.css:

.lsb-wait-for-icons {
  display: initial !important;
}

@cblavier cblavier self-assigned this Jul 3, 2023
@cblavier
Copy link
Contributor

cblavier commented Jul 3, 2023

Hey Ege, the idea behind .lsb-wait-for-icons is to only display the body once all SVG icons have been loaded, it prevents an unpleasant layout shift effect where icons are loaded after the initial content.

https://fontawesome.com/docs/web/dig-deeper/svg-async

The issue might be that you are not using SVG icons? Are you?
If so, I might need an option to enable the .lsb-wait-for-icons only if we are using SVG styling

@egeersoz
Copy link
Author

egeersoz commented Jul 3, 2023

@cblavier No, our kit is configured to use web fonts.

@cblavier cblavier linked a pull request Jul 11, 2023 that will close this issue
306 cannot get embedded font awesome icons to work at all #316
Merged
@cblavier
Copy link
Contributor

I just released 0.5.5 with a new font_awesome_rendering: :webfont setting.
Let me know if this is ok for you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cblavier cblavier

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

306 cannot get embedded font awesome icons to work at all phenixdigital/phoenix_storybook
2 participants
@cblavier @egeersoz