create reusable social link icon component

[thescientist13]

Summary

In both the Footer and LineupCard components we have a case for displaying a social link <img> wrapped in an <a> tag with standard attributes like title, alt, href, etc.

<a
  href="${link}"
  title="${formattedTitle}"
>
  <img
    src="/assets/images/${label}-icon.png"
    alt="${formattedTitle}"
    width="40"
    height="40"
    loading="lazy"
  />
</a>

Details

Thus it would be nice to create something like <bf-social-icon> that handle all of the combined <a> and <img> tag logic, and rendering the correct social link, and "forwarding" things like href and title.

Would also want to pull out some the specs from LineupCard since for testing actual values, those would probably better belong in this new SocialLinkIcon component.

---

Somewhat related, we may also want to consider re-sizing these social link images too, since they are currently sized to 40px by 40px, so if a user magnifies the page, those can get a little blurry. Not a big deal, but a nice to have if "flexible" sizing is needed / desired.