question-mark
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.

4.1.2 breaks alignment of inline SVG icons

See original GitHub issue

A 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:closed
  • Created 5 years ago
  • Reactions:13
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
ysdscommented, Jul 20, 2018

@mdo thanks 😃 I’m going to update my PR.

0reactions
mdocommented, Jul 20, 2018

Definitely don’t expect that usage 😃.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found