Skip to content

overwrite svg styles #8

Description

@nuxodin

Here you overwrite svg styles that can be relevant.

bedrocss/src/media.css

Lines 10 to 12 in e4ee7c6

fill: currentColor;
stroke: currentColor;
stroke-width: 0;

Note that css is stronger than the svg attributes.
Even :where(svg) is stronger.

<svg fill="red">...</svg>

Possible, but maybe a little too much overhead:

svg:not([fill]) { fill:currentColor; }
svg:not([stroke]) { stroke:currentColor; }
svg:not([stroke-width]) { stroke-width: 0 }

Close this issue if it still fits your use-cases.

Activity

  1. AustinGil commented on Jul 8, 2021

    @AustinGil
    Owner

    Yeah, this is a really good point. Any time I've used an SVG, the fill/stroke colors have always been on the paths themselves, never on the SVG tag. Most of the icon libraries I've used that rely on SVG use the same styles. But that's not to say that you are wrong, you're absolutely right.

    So this is a tough one because on one hand, I think these styles are super helpful for most cases. But in the event someone does want to use attributes on the SVG element, this would be annoying...

    I may just close this for now and see if anyone reports this issue from using the library. Yeah?

  2. nuxodin commented on Jul 8, 2021

    @nuxodin
    ContributorAuthor

    👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions