Please, help me organize the using of svg icons

[Дмитрий Харин]

Briefly:

The situation is I would like use svg icons, but google's components iron-icons with iron-iconset-svg don't should me control svg in css. Is there better solution?

More:

I have many svgs, like: 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 19.8 19.8" style="enable-background:new 0 0 19.8 19.8;" xml:space="preserve">

<style type="text/css">

.st0{fill:#201600;}

.st1{fill:none;stroke:#201600;stroke-width:1.1;stroke-miterlimit:10;}

</style>

<g>

<rect x="3.4" y="7.5" class="st0" width="4.4" height="4.1"/>

<rect x="3.4" y="3" class="st0" width="13.1" height="2.6"/>

<line class="st1" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/>

<line class="st1" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/>

<line class="st1" x1="9.2" y1="11" x2="12.4" y2="11"/>

<line class="st1" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/>

<line class="st1" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/>

</g>

</svg>

How you can see, svg colored stroke and fill with classes (.st0, .st1 ...there is another).

This svg  locates in icon-svgset, for example: 

<link rel="import" href="/components/iron-icon/iron-icon.html">

<link rel="import" href="/components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="lms-comment" size="28.4">

  <svg>

    <defs>

      <g id="check">

        <path fill="none" stroke="#A9D3B0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M20.4 10l-6 7.4-3.4-3.3"/>

        <path d="M20.4 13.5v.6c0 3.5-2.8 6.3-6.3 6.3s-6.3-2.8-6.3-6.3 2.8-6.3 6.3-6.3c1.5 0 2.8.5 3.9 1.3" fill="none" stroke="#A9D3B0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/>

      </g>

      <g id="comment">

        <g fill="none" stroke="#000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">

          <path d="M11.8 19.5c-.4-.6-.7-.9-1-1.9-.4-1.6-1.3-2.2-1.4-4-.2-2.4 1.4-4.6 3.8-5.1 3-.5 5.6 1.7 5.6 4.6 0 2-.9 2.7-1.4 4.4-.3 1.1-.6 1.4-1 2h-4.6zm.2-6c-.1-1.1.6-2.1 1.7-2.3"/>

          <path d="M11.8 19.4s.3 2.1.5 2.6c.1.2.3.4.6.4h2.6c.3 0 .5-.2.6-.4.2-.5.5-2.6.5-2.6"/>

          <path d="M14.2 24h.6c.3 0 .5-.1.6-.4.1-.3.5-1.4.5-1.4M14.1 24h-.6c-.3 0-.5-.1-.6-.4-.1-.3-.5-1.4-.5-1.4m1.8-15.9V4.4m3.6 2.7l.8-1.5m1.7 4.1l1.6-.9m-.6 4.5H23M10.6 7.1l-.9-1.5M8 9.7l-1.5-.9m.6 4.5H5.3"/>

        </g>

      </g>

    </defs>

  </svg>

</iron-iconset-svg>

And added on page 

<div class="know-article_comm">

<iron-icon class="know-article_bottom_icon" icon="lms-comment:comment"></iron-icon>

<span class="know-article_comm_text">15</span>

</div>

That did not work css style if I want change color when div.know-article_comm hovered, like

.know-article_comm:hover svg{
  fill: #newColor;
  stroke: #newColor;
}

Ok, maybe refactor svg, and delete integrated styles, and add classes for elements that should be colored (filled ar stroked), example:

<link rel="import" href="/components/iron-icon/iron-icon.html">

<link rel="import" href="/components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="lms-knowledge-base" size="20">

<svg>

<defs>

<g id="addmaterial">

<style type="text/css">

.st0{fill:none;stroke-width:1.1;stroke-linejoin:round;stroke-miterlimit:10;}

</style>

<g>

<g>

<line class="st0 stroke-colored" x1="13.2" y1="9.9" x2="6.6" y2="9.9"/>

<line class="st0 stroke-colored" x1="9.9" y1="13.2" x2="9.9" y2="6.6"/>

</g>

<circle class="st0 stroke-colored" cx="9.9" cy="9.9" r="6.4"/>

</g>

</g>

<g id="all">

<style type="text/css">

.st0{}

.st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

</style>

<g>

<circle class="st0 fill-colored" cx="4.4" cy="5.6" r="1"/>

<circle class="st0 fill-colored" cx="4.4" cy="9.9" r="1"/>

<circle class="st0 fill-colored" cx="4.4" cy="14.2" r="1"/>

<line class="st1 stroke-colored" x1="16.5" y1="5.6" x2="7.2" y2="5.6"/>

<line class="st1 stroke-colored" x1="16.5" y1="9.9" x2="7.2" y2="9.9"/>

<line class="st1 stroke-colored" x1="16.5" y1="14.3" x2="7.2" y2="14.3"/>

</g>

</g>

<g id="article">

<style type="text/css">

.st0{}

.st1{fill:none;stroke-width:1.1;stroke-miterlimit:10;}

</style>

<g>

<rect x="3.4" y="7.5" class="st0 fill-colored" width="4.4" height="4.1"/>

<rect x="3.4" y="3" class="st0 fill-colored" width="13.1" height="2.6"/>

<line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/>

<line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/>

<line class="st1 stroke-colored" x1="9.2" y1="11" x2="12.4" y2="11"/>

<line class="st1 stroke-colored" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/>

<line class="st1 stroke-colored" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/>

</g>

</g>

<g id="booksummary">

<style type="text/css">

.st0{fill:none;stroke-miterlimit:10;}

</style>

<g>

<polyline class="st0 stroke-colored" points="10.2,17.3 16.7,14.8 16.7,2.1 13.4,3.3 10.2,4.6 "/>

<polyline class="st0 stroke-colored" points="9.7,17.3 3.2,14.8 3.2,2.1 6.4,3.3 9.7,4.6 "/>

<line class="st0 stroke-colored" x1="10" y1="4.1" x2="10" y2="17.7"/>

<polyline class="st0 stroke-colored" points="15,5.6 13.4,6.2 11.8,6.8 "/>

<polyline class="st0 stroke-colored" points="15,8.1 13.4,8.7 11.8,9.3 "/>

<polyline class="st0 stroke-colored" points="4.8,5.6 6.4,6.2 8,6.8 "/>

<polyline class="st0 stroke-colored" points="4.8,8.1 6.4,8.7 8,9.3 "/>

</g>

</g>

<g id="conference">

<style type="text/css">

.st0{}

.st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;}

</style>

<g>

<rect x="2.9" y="1.8" class="st0 fill-colored" width="14.1" height="1.2"/>

<line class="st1 stroke-colored" x1="9.9" y1="13.6" x2="9.9" y2="18"/>

<g>

<line class="st1 stroke-colored" x1="7.8" y1="13.6" x2="4.3" y2="17.3"/>

<line class="st1 stroke-colored" x1="12" y1="13.6" x2="15.6" y2="17.3"/>

</g>

<g>

<path class="st0 fill-colored" d="M15.4,5.4v5.8h-11V5.4H15.4 M16.4,4.4h-13v7.8h13V4.4L16.4,4.4z"/>

</g>

</g>

</g>

</defs>

</svg>

</iron-iconset-svg>

Ok, now I can type like this:

.know-article_comm svg .fill-colored{
  fill: #oldColor;
}
.know-article_comm svg .stroke-colored{
  fill: #oldColor;
}
.know-article_comm:hover svg .fill-colored{
  fill: #newColor;
}
.know-article_comm:hover svg .stroke-colored{
  fill: #newColor;
}

And this work! 

But! It work only shady dom! 

I can't styled svg in shadow dom. Please, help. 

It's first thinks I thought about: 

1) Use no-component method

2) Create my own component (with blackjack, and ...), but I will collide with how to transmit :hover to attribute new component without complication outer js logik (ex. main.js);

Maybe anybody met with this situation, help!)

P.S. If you don't understand somethink, sorry. I have some problems with language.

[Дмитрий Харин]

I create my solution: https://dihar.github.io/components/style-updater/

четверг, 30 июня 2016 г., 13:44:52 UTC+3 пользователь Дмитрий Харин написал: