4.1.2 breaks alignment of inline SVG icons
See original GitHub issueA new change in 4.1.2 causes inline SVG icons to become unaligned.
The code in question, /scss/_reboot.scss, line 277:
svg:not(:root) {
overflow: hidden;
vertical-align: middle; <--- (Line 277)
}
The issue can be seen in the following examples: Version 4.1.1 (Icons aligned) Version 4.1.2 (Icons not aligned)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:13
- Comments:12 (12 by maintainers)
Top Results From Across the Web
Align SVG Icons to Text and Say Goodbye to Font Icons
The icons align to your text easily and can be modified by changing the font-size of the element. There is no clearly defined...
Read more >SVG symbol a Good Choice for Icons - CSS-Tricks
Looking for a better way to do SVG icons? Inline SVG might be your best bet, which you can learn about in this...
Read more >Scalable Vector Graphics (SVG) 2 - W3C
SVG is a language based on XML for describing two-dimensional vector and mixed vector/raster graphics. SVG content is stylable, scalable to ...
Read more >Why my SVG icon is not displayed in vertical center after using ...
Vertical-align aligns an element relative to where an inline text character would be rendered given the computed font-size, line-height, padding ...
Read more >CurrentColor SVG in forced colors modes - Melanie Richards
How to fix single-color SVGs that appear broken in Windows High Contrast ... .header__brand-icon { display: inline-block; vertical-align: ...
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

@mdo thanks 😃 I’m going to update my PR.
Definitely don’t expect that usage 😃.