Styling issue in chrome

[jmacaluso711]

Hi, love this thing. thanks for all the great work. I am having trouble styling the svg in chrome. It's basically just ignoring the styles i declare. Works in firefox, but not chrome. Any ideas?

Here's what I'm using to render

<svg class="site-header__icon">
   <use class="icon-search" xlink:href="#icon-search" />
</svg>

Here's my scss

.site-header__icon { //This is the svg tag
   height: 18px;
   width: 18px;
   g, path {
      stroke: #fff;
   }
}

[w0rm]

Hi, can you please also include svg source of the icon?

[jmacaluso711]

Here's the sprite

<svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="icon-portal" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><path d="M12.5 14.5v-2.875M7.5 11.688V14.5l-5.01 1.79C1.297 16.714.5 17.845.5 19.113V21.5h12"/><ellipse cx="9.988" cy="6.5" rx="5" ry="6"/><path d="M14.98 5.963c-.17.02-.32.004-.49.037-1.704.328-2.798-.29-3.735-1.93C10.19 5.148 8.435 6 6.988 6c-.71 0-1.323-.146-1.935-.467"/></g><path stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M15.5 17h8v6.5h-8zM19.5 21.5v-1"/><path fill="#231F20" d="M19.5 18.5c-.553 0-1 .447-1 1 0 .552.447 1 1 1 .552 0 1-.448 1-1 0-.553-.448-1-1-1z"/><path stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16.5 17v-1c0-1.657 1.343-3 3-3 1.656 0 3 1.343 3 3v1" fill="none"/></symbol><symbol id="icon-search" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><circle cx="8.5" cy="8.5" r="8"/><path stroke-linecap="round" d="M14.156 14.156L23.5 23.5"/></g></symbol><symbol id="icon-social" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><path d="M8.075 10.213C7.418 8.903 6.065 8 4.5 8c-2.21 0-4 1.79-4 4s1.79 4 4 4c1.566 0 2.918-.902 3.575-2.213M19.5 8.5c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .644.156 1.25.425 1.787M15.925 17.713c-1.327 2.648.598 5.787 3.575 5.787 2.21 0 4-1.79 4-4s-1.79-4-4-4M19.5 8.5c-1.566 0-2.918-.902-3.575-2.213l-7.85 3.926c.27.538.425 1.144.425 1.787 0 .644-.156 1.25-.425 1.787l7.85 3.926c.657-1.31 2.01-2.213 3.575-2.213"/></g></symbol></svg>

[w0rm]

@jmacaluso711 you cannot override attributes values with css, you have to remove them from svg.

This may be done manually or automatically in transformSvg callback (there is an example for removing fill attribute in readme)

[jmacaluso711]

I removed the fill and stroke attributes now there are no icons showing up

[w0rm]

@jmacaluso711 then you have to set them for svg in css, and all paths will inherit them. Check how this is done in test https://github.com/w0rm/gulp-svgstore/blob/master/test/src/inline-svg.html

[jmacaluso711]

Thanks for the quick response. So now it works in chrome if i use the following in my stylesheet

svg {
   path,
   line,
   ellipse,
   rect,
   circle {
      stroke: #fff;
   }
}

However if I try to target the class of the svg:

.icon-portal {
   path,
   line,
   ellipse,
   rect,
   circle {
      stroke: #fff;
   }
}

This is ignored in Chrome. Firefox works perfectly. Wondering if you've heard this before?

[w0rm]

It should be just .icon-portal { stroke: #fff } all nested elements will inherit this value.

[jmacaluso711]

Thanks very much.. I think that did it