Fail to replace SVG + JS with SVG files directly, why?

Question

My website uses Font Awesome SVG icons via SVG + JS method. Now to improve the performance, I want to use the icons via loading the individual SVG files directly.

I study the code where the icon is inserted:

<i class="fab fa-facebook-f"></i>

To my understanding, the JS is just searching the whole DOM and replace the above code with the actual SVG data with style, so I run Chrome DevTools and then inspect the icon, and get the following codes for it:

<svg class="svg-inline--fa fa-facebook-f fa-w-10" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>

Now I'll do that manually instead of letting JS to do the task, so I find the styles for classes svg-inline--fa and fa-w-10(it seems that there are no styles for class fa-facebook-f), then add the following CSS code to style.css:

.my-svg-inline--fa.my-fa-w-10 {
    width: .625em;
}

.my-svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

path { fill: currentColor; }

.facebook-icon {
  background: url(/images/icons/facebook-f.svg);
}

.facebook-icon1 {
  background-image: url(/images/icons/facebook-f.svg);
}

.facebook-icon2 {
  background-image: url(/images/icons/facebook-f1.svg);
}

After that, I embed the icons to my web page, as below:

<div class="float-social">
  <ul>
    <li><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a target="_blank" href="#"><i class="my-svg-inline--fa my-fa-w-10 facebook-icon"></i></a></li>   
    <li><a target="_blank" href="#"><span class="my-svg-inline--fa my-fa-w-10 facebook-icon1"></span></a></li>   
    <li><a target="_blank" href="#">
        <img class="my-svg-inline--fa my-fa-w-10" src="/images/icons/facebook-f1.svg"/>
        </a>
    </li>
    <li><a target="_blank" href="#"><span class="my-svg-inline--fa my-fa-w-10 facebook-icon2"></span></a></li>  
      <li><a target="_blank" href="#"><object type="image/svg+xml" data="/images/icons/facebook-f1.svg" class="my-svg-inline--fa my-fa-w-10"></object></a></li>
      <li><a target="_blank" href="#"><svg class="my-svg-inline--fa my-fa-w-10" viewBox="0 0 320 512">
    <use xlink:href="/images/icons/facebook-f2.svg#example"></use>
          </svg></a></li>     
  </ul>
</div>

I try different methods, the first one is the original icon that loaded via SVG + JS, the remaining are my tests, but none of 5 icons looks same as the original one:

Why?

Update

The actual code is on http://www.sybase-recovery.com/, in the left side bar you can see 7 facebook icons.

I try to create a JSFiddle: https://jsfiddle.net/alanccw/y95swck6/9/, but it seems only the first icon will show. Don't know why?

Update 2

After studying the difference between the embedded SVG generated by JS and the individual SVG file, I find there is a fill="currentColor" attribute which should be used to control the color of the SVG icon.

So I make another two tests:

1. Create a new SVG icon with the attribute fill="currentColor" preset. The new SVG icon is at http://www.sybase-recovery.com/images/icons/facebook-f1.svg. But that not working. See my implementations 4, 5 and 6.

2. I try to follow the instructions in How to change the color of an svg element? to add the following in CSS, but still not working:

path { fill: currentColor; }

Update 3

I added the 7th implementation: Change the svg file to add and get the new one which is actually a SVG sprite http://www.sybase-recovery.com/images/icons/facebook-f2.svg

Then use the following codes:

      <li><a target="_blank" href="#"><svg class="my-svg-inline--fa my-fa-w-10" viewBox="0 0 320 512">
    <use xlink:href="/images/icons/facebook-f2.svg#example"></use>
          </svg></a></li>

And now this implementation works.

However, I have more questions:

1. Why the following implementation does not work even I add fill="currentColor" to the SVG icon?

<span class="my-svg-inline--fa my-fa-w-10 facebook-icon2"></span>

2. Though the 7th implemenation works, it has many disadvantages:

1. I need to modify each SVG icon and convert it to SVG sprite.
2. The code snippet used in the HTML is rather large and I need to copy some of the properties, including the viewbox, otherwise, it will not working.

Answer 1

The problem is that the colour that currentColor becomes is based on the value of the color property inherited from the parent element.

However you are using an <img> element. An <img> element is a replaced element, and replaced elements do not inherit the styles from their parent document. If it helps, you can think of replaced elements as if they are a thumbnail image of another document that is placed inside the parent document. For more information, check out this article on replaced elements.