Icon offset override should only apply to icons, not all SVGs

[garrett]

We need to class this override:

cockpit/pkg/lib/patternfly/patternfly-4-overrides.scss

Lines 28 to 33 in 8ea9d25

	/* All SVGs used in PF4 have some inline style to align them
	* https://github.com/patternfly/patternfly-react/issues/4767
	*/
	svg {
	vertical-align: -0.125em;
	}

...As we're now using SVGs that are not icons, such as in the performance page, the SVG graphs, etc.

[garrett]

Ah, PF4 icons are unclassed SVGs, but have the following attributes:

                          height="1em"
                          role="img"
                          width="1em" 

Perhaps we should use svg[height=1em][width=1em][role=img] { vertical-align: -0.125em; } until we get the proper fix from upstream?

[KKoukiou]

There is already a PR upstream for your interest. patternfly/patternfly-react#5275

[garrett]

@KKoukiou: Thanks for linking it here!

It isn't ready in a release we can use yet, so I think we still need a fixed workaround until then. Hopefully it won't have to last so long in our codebase.

[garrett]

As is, vertical-align does get set on all SVGs, but only actually gets applied to inline SVGs or ones in a table cell.

So, basically: it would only affect icons with the incorrect offset anyway. Block SVGs and those inside of a flex or grid (with other specific alignment) actually ignore the vertical-align and are aligned in the flow or as specified (for flex/grid).