0

I have a little problem, I'm used to use SVG icons by this way:

span{
  width:30px;
  height:30px;
}
span svg{
  width: inherit;
  height: inherit;
  display:block;
  fill: red;
}
<svg style="display: none;">
    <symbol id="arrow" viewBox="0 0 250 250">
        <path d="M70.9 245.5c-1.7 1.7-3.8 2.5-6.2 2.5s-4.5-.8-6.2-2.5c-3.4-3.4-3.4-8.9 0-12.3L166.8 125 58.6 16.8c-3.4-3.4-3.4-8.9 0-12.3 3.4-3.4 8.9-3.4 12.3 0l114.4 114.4c3.4 3.4 3.4 8.9 0 12.3L70.9 245.5z"/>
    </symbol>
</svg>

<span>
    <svg class="icon" viewBox="0 0 250 250">
        <use xlink:href="#arrow"></use>
    </svg>
</span>

Recently xlink:href attribute has been deprecated for SVG2 so I decided to remove all xlink:href from the project leaving href MDN Doc

As you can see on MDN Docs, the recommendation is to use href instead of xlink:href and it works fine on Chrome and Edge but no on Firefox.

This is a link to the project Link, if you open the website with Chrome or Edge you will see a small icons on top navigation, but no on Firefox.

¿Can someone give me a solution?

P.D: Sorry about my english.

Pablo Carballeda
  • 57
  • 7

1 Answers1

0

href support will arrive in Firefox 51.

Firefox 51 will be released on 24 January 2017, but you can try a nightly right now if you want to test it out.

Prior to this you'll just need to stick with xlink:href (or both) if you want Firefox compatibility.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242