<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="Instagram icon" class="social-icon">
  <title>Instagram icon</title>
  <use xlink:href="../../images/social-media.svg#icon-instagram" />
</svg>
<!-- Render the icons with svg "use". Note the role, aria label and title for accessibility -->
<svg role="img" aria-label="{{ icon.name }} icon" class="social-icon">
  <title>{{ icon.name }} icon</title>
  <use xlink:href="../../images/{{ filename }}#{{ icon.id }}" />
</svg>
{
  "filename": "social-media.svg",
  "icon": {
    "name": "Instagram",
    "id": "icon-instagram"
  }
}
  • Content:
    /*
      Social Media Icons
    */
    .social-icon {
      height: 2rem;
      width: 2rem;
      margin: 0 .5rem;
      fill: rgba(0,0,0,.3);
      transition: all 200ms ease-in-out;
    }
    .social-icon:hover {
      fill: rgba(0,0,0,.6);
    }
    
  • URL: /components/raw/social-icons/_sass.scss
  • Filesystem Path: components/02-modules/icons/social-icons/_sass.scss
  • Size: 202 Bytes

Social Media Icons

SVG icons for common social media sites. Sprite must be inlined in HTML doc head to support IE8-11. To use an external sprite with older IE versions you’ll need SVG for Everybody or svgxuse.

Use role, aria-label, and title for accessibility. See source code and this Stack Overflow discussion. http://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml

social-media.svg generated by icomoon