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 a default size to SVGs #1

Open
ComedyTomedy opened this issue Jan 13, 2024 · 1 comment
Open

Add a default size to SVGs #1

ComedyTomedy opened this issue Jan 13, 2024 · 1 comment

Comments

@ComedyTomedy
Copy link

One problem with SVG icons is that if the page loads before CSS you get a flash of a gigantic unstyled icon. To quote the new-ish design system of the W3C website:

Always include width and height attributes as part of the SVG markup. This prevents the SVG from expanding to fill the whole page if the CSS doesn't load. - https://design-system.w3.org/styles/svg-icons.html

The fix is to add the following attribs to the inline svg element:

width="1em" height="1em"

Values assigned with CSS will always override these defaults, so it won't be a breaking change (unless someone wants page-sized icons)

@ComedyTomedy
Copy link
Author

Just looked at the code and discovered this might not be so easy!

Perhaps better done upstream, or presumably it would be easy to patch them into the hiccup version in svg->electric, but feels a little unclean.

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

1 participant