How do I use the Symbol tag instead of the g tag in Iron-iconset-svg?

Asked

Viewed 85 times

3

I am trying to define an Iron-iconset-svg using the icons with the Symbol tag instead of using the g tag and the icon is not rendered. In all documentation and references on the internet the SVG is used with the tag g. Exists

Follows excerpt from the code:

<iron-iconset-svg name="br-icons">
  <svg style="display: none">
    <defs>    
      <symbol id="icon-menu" viewBox="0 0 1024 1024">
        <title>menu</title>
        <path class="path1" d="M64 192h896v192h-896zM64 448h896v192h-896zM64 704h896v192h-896z"></path>
      </symbol>
    </defs>
  </svg>
 </iron-iconset-svg>

Follow the call to the component:

<iron-icon icon="br-icons:icon-menu"></iron-icon>

Does anyone have any idea how I can do that?

svg polymer

2 answers

0


The use of the tag <symbol> requires reuse of the icon using the tag <use>. Thus, in the current version of iron-iconset-svg works only with the use of the tag <g>.

0

Guy I think would be a little simpler:

    <!-- Seu componente aqui -->
    <svg style="display:none" id="my-icons">

    <!-- Elementos de seu componente --> 
      <symbol id="icon-1"><path d="coord..."> </symbol>
      <symbol id="icon-2"><path d="coord..."> </symbol>
      <symbol id="icon-3"><path d="coord..."> </symbol>

    </svg>

<!-- chamando seu componente -->
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="x y w h">

<!-- passando o ID -->
     <use xlink:href="#icon-1"></use> 
    </svg>

  • When I do this inside the component it only works if I pass the icon id directly. In case I am passing it via component attribute. <use xlink:href$="{{icon}}"></use> It renders the id in html but does not display the icon

  • @cbfranca If it injects id into html less badly, checks whether in the <use></use> tag you are placing the coordinates X and Y. Ex: <use xlink:href="#icon-1" x="10" y ="40"></use>, I believe it needs this reference to show the element.

  • I’m not passing no, but if I understood correctly, it would be 0.0 in this case: <Symbol id="icon-menu" viewBox="0 0 1024 1024">

  • The strange thing is that if I pass the id of the icon directly it works. But if I pass via Polymer attribute n works. <svg> <use xlink:href$="{{icon}}" x="0" y="0"></use> </svg> <svg> <use xlink:href="#icon-user" x="0" y="0"></use> </svg>

  • Take the viewBox attribute from the <Symbol> tag and leave it only for the svg container of the elements, as in the code above. If you did the test by placing the id directly and it worked there is no reason not to render once you recover that same value and play to the id attribute of your id element== "id value" -> {{injected value}}

  • Nothing. It seems to me to be something related to the same Polymer. I am searching here but I did not find anything related.

Show 1 more comment

Browser other questions tagged svg polymer

You are not signed in. Login or sign up in order to post.