search

TrySound / postcss-inline-svg

PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
MIT License
481 stars 38 forks source link

The stroke and fill does not work at all #61

Closed mafftor closed 4 years ago

mafftor commented 5 years ago

I try to change the color of icon

@svg-load grid-view url('../svg/grid-view.svg') {
  fill: #000;
  stroke: #000;
  path {
    fill: #000;
    stroke: #000;
  }
}

.grid {
  border: none;
  width: 17px;
  height: 12px;
  background: svg-inline(grid-view) no-repeat center;
}

But it doesn't work :(

The svg icon


<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11H1M2 6H1M2 1H1" stroke="#29852F" stroke-width="2" stroke-linecap="round"/>
<path d="M9 11H8M9 6H8M9 1H8" stroke="#29852F" stroke-width="2" stroke-linecap="round"/>
<path d="M16 11H15M16 6H15M16 1H15" stroke="#29852F" stroke-width="2" stroke-linecap="round"/>
</svg>
mafftor commented 4 years ago

Solved, you have to remove all fill attributes firstly, or setup some plugin and let it to do it instead of you