Skip to content

Add a default size to SVGs #1

@ComedyTomedy

Description

@ComedyTomedy

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions