search

chutichhuy / glyph-iconset

A minimal SVG icon set for modern web
Other
376 stars 43 forks source link

CSS fill or SVG fill attribute is not applied #4

Open mrosalesdiaz opened 5 years ago

mrosalesdiaz commented 5 years ago

Color is not being set when try to apply neither css or attribute.

<svg xmlns="http://www.w3.org/2000/svg">
    <use style="fill: red !important;" fill="red" xlink:href="sprite.svg#si-glyph-bubble-message-hi" />
</svg>

I think it is caused because it has been set in the SVG file, in attribute fill in tag g and path. Children attributes are not overriden by fill in parent svg and also it cannot be modified cause en use tag use it is loaded as shadow dom closed that cant be modified with javascript.


<symbol id="si-glyph-bubble-message-hi" viewBox="0 0 17 16">
    <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
    <title>1036</title>

    <defs/>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="{..}" fill="#434343" class="si-glyph-fill"/>
    </g>

</symbol>

Is there another way to solve this? rather than modify the sprite.svg