Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
SVG icons, especially those of different sizes, are not properly aligned
See original GitHub issueIcon alignment for inline SVGs has inline CSS that applies vertical-align: -0.125em.
However, this doesn’t work in the following cases:
- When CSP is enforced, as inline CSS should not be allowed.
- When icons change sizes, as the offset is different for the line of text versus the (larger) icon.
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
SVG icon sizing and alignment - Dimiter Petrov
When it comes to icon size, I first set a fallback using the width and height attributes directly on the SVG. That way...
Read more >Vertical alignment off with svg, layers, icon-sizes inside layer
Alignment is fine for any other size except fa-lg , as long as the size class is applied to the fa-layers element; Alignment...
Read more >Using overflow to align oddly-sized SVGs (like avatars and ...
Using overflow to align oddly-sized SVGs (like avatars and icons) ... This ensures that all avatars will be the correct size in our...
Read more >Why don't SVG images scale using the CSS “width” property?
SVGs are different than bitmap images such as PNG etc. If an SVG has a viewBox - as yours appear to - then...
Read more >Tips for Aligning Icons to Text - CSS-Tricks
The right thing to do here is to match your icon design specs to the format being used. If using SVG, then the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Will be closed by #5275.
Unfortunately it’s a breaking change.
This is an issue with react icons indeed. Can someone move it?