CODEWITHSUNDEEP
javascripthtmlcsssvgpolymer
samjaf
samjaf

Reputation: 1053

Polymer: using css-classes in iron-iconset-svg

I'm trying to create a colored iron-icon-set. Due to technical restrictions, I'm unable to set the color iron-icon. 

<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="myiconset" size="24">
  <svg>
    <style>
        .green {
            color: green;
        }
    </style>
    <defs>
        <g id="flag-red"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" style="color:red"/></g>
        <g id="flag-green"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" class="green"/></g>
    </defs>
  </svg>
</iron-iconset-svg>

I'd like to use classes for reusing the same color on multiple icons rather than repeating the same style="color:XXX" on dozens of icons.

Of course I'd love to use the already existing styles, but from what I've read so far this won't work, so I didn't try it at all.

Nevertheless: Is there a way to use css-classes inside a iron-iconset-svg?

Upvotes: 1

Views: 330

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

SVG does not use the color CSS property, it uses fill and stroke instead.

<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="myiconset" size="24">
  <svg>
    <style>
        .green {
            fill: green;
        }
    </style>
    <defs>
        <g id="flag-red"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" style="fill:red"/></g>
        <g id="flag-green"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" class="green"/></g>
    </defs>
  </svg>
</iron-iconset-svg>

<svg>
  <use xlink:href="#flag-red"/>
  <use transform="translate(50,0)" xlink:href="#flag-green"/>
</svg>

Upvotes: 1

Related Questions