Move icons in footer to CSS background images

* The `ui/organisms/footer/index.tsx` is probably so big because it loads in all the SVGs. But why aren't

@schalkneethling Would it be feasible to move the SVG from the JS code into external images? I know it becomes hard to control styling then but it would be a win since, as images, they’re technically lazy loaded and the footer is way below the fold.

_Originally posted by @peterbe in https://github.com/mdn/yari/issues/2877#issuecomment-777788131_

[sohamsshah]

Thank you! Yes, Will ask if I any questions, Tho Consider it done 😉

[schalkneethling]

@sohamsshah Ok, here we go 😄

The file to make the first couple changes will be: client/src/ui/organisms/footer/index.tsx

I would recommend changing the links from:

<a
  href="https://twitter.com/mozilla"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Twitter"
>
  <TwitterIcon />
</a>

to:

<a
  href="https://twitter.com/mozilla"
  target="_blank"
  rel="noopener noreferrer"
>
  <span className="visuall-hidden">Mozilla on Twitter</span>
</a>

We are adding those span elements for accessibility reasons. The icons you are going to need in SASS will be these:

@mdn/dinocons/brands/github-mark-small.svg
@mdn/dinocons/social/twitter.svg
@mdn/dinocons/social/instagram.svg

Now, because we previously added the appropriate icon directly to the HTML we did not need to identify the anchors, but now we do. That means for the anchor elements you want to add the appropriate class, for example:

<a
  className="social-icon twitter"
  href="https://twitter.com/mozilla"
  target="_blank"
  rel="noopener noreferrer"
>
  <span className="visuall-hidden">Mozilla on Twitter</span>
</a>

Then the SASS will be added here: client/src/ui/organisms/footer/index.scss

Between .social and .footer-license you can add the new SASS:

.social-icon::before {
  background-size: 18px;
  content: "";
  display: inline-block;
  /* because the SVG is not in the HTML we cannot set its fill so we have to use this workaround */
  filter: invert(1);
  height: 18px;
  vertical-align: sub;
  width: 18px;
}

.twitter::before {
  background: transparent url("~@mdn/dinocons/social/twitter.svg") 0 0
    no-repeat;
}

.github::before {
  background: transparent url("~@mdn/dinocons/brands/github-mark-small.svg") 0
    0 no-repeat;
}

You can then also delete the following:

svg {
  height: 18px;
  vertical-align: sub;
  width: 18px;

  path {
    fill: #fff;
  }
}

Hope this helps, please let me know should you have any questions.