Social icons github location npm version

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "heading": "Follow us",
  "social_accounts": [
    {
      "name": "twitter",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--twitter"
    },
    {
      "name": "facebook",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--facebook"
    },
    {
      "name": "instagram",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--instagram"
    },
    {
      "name": "youtube",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--youtube"
    },
    {
      "name": "linkedin",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--linkedin"
    }
  ]
}
 %}
{% include "../path_to/vf-social-links/vf-social-links.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-social-links', {
  "component-type": "block",
  "heading": "Follow us",
  "social_accounts": [
    {
      "name": "twitter",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--twitter"
    },
    {
      "name": "facebook",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--facebook"
    },
    {
      "name": "instagram",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--instagram"
    },
    {
      "name": "youtube",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--youtube"
    },
    {
      "name": "linkedin",
      "url": "JavaScript:Void(0);",
      "useUrl": "#vf-social--linkedin"
    }
  ]
} %}
                
HTML
<svg aria-hidden="true" display="none" class="vf-icon-collection vf-icon-collection--social">
  <defs>
    <g id="vf-social--linkedin">
      <rect xmlns="http://www.w3.org/2000/svg" width="5" height="14" x="2" y="8.5" rx=".5" ry=".5" />
      <ellipse xmlns="http://www.w3.org/2000/svg" cx="4.48" cy="4" rx="2.48" ry="2.5" />
      <path xmlns="http://www.w3.org/2000/svg" d="M18.5,22.5h3A.5.5,0,0,0,22,22V13.6C22,9.83,19.87,8,16.89,8a4.21,4.21,0,0,0-3.17,1.27A.41.41,0,0,1,13,9a.5.5,0,0,0-.5-.5h-3A.5.5,0,0,0,9,9V22a.5.5,0,0,0,.5.5h3A.5.5,0,0,0,13,22V14.5a2.5,2.5,0,0,1,5,0V22A.5.5,0,0,0,18.5,22.5Z" />
    </g>
    <g id="vf-social--facebook">
      <path xmlns="http://www.w3.org/2000/svg" d="m18.14 7.17a.5.5 0 0 0 -.37-.17h-3.77v-1.41c0-.28.06-.6.51-.6h3a.44.44 0 0 0 .35-.15.5.5 0 0 0 .14-.34v-4a.5.5 0 0 0 -.5-.5h-4.33c-4.8 0-5.17 4.1-5.17 5.35v1.65h-2.5a.5.5 0 0 0 -.5.5v4a.5.5 0 0 0 .5.5h2.5v11.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-11.5h3.35a.5.5 0 0 0 .5-.45l.42-4a.5.5 0 0 0 -.13-.38z" />
    </g>
    <g id="vf-social--twitter">
      <path xmlns="http://www.w3.org/2000/svg" d="M23.32,6.44a.5.5,0,0,0-.2-.87l-.79-.2A.5.5,0,0,1,22,4.67l.44-.89a.5.5,0,0,0-.58-.7l-2,.56a.5.5,0,0,1-.44-.08,5,5,0,0,0-3-1,5,5,0,0,0-5,5v.36a.25.25,0,0,1-.22.25c-2.81.33-5.5-1.1-8.4-4.44a.51.51,0,0,0-.51-.15A.5.5,0,0,0,2,4a7.58,7.58,0,0,0,.46,4.92.25.25,0,0,1-.26.36L1.08,9.06a.5.5,0,0,0-.57.59,5.15,5.15,0,0,0,2.37,3.78.25.25,0,0,1,0,.45l-.53.21a.5.5,0,0,0-.26.69,4.36,4.36,0,0,0,3.2,2.48.25.25,0,0,1,0,.47A10.94,10.94,0,0,1,1,18.56a.5.5,0,0,0-.2,1,20.06,20.06,0,0,0,8.14,1.93,12.58,12.58,0,0,0,7-2A12.5,12.5,0,0,0,21.5,9.06V8.19a.5.5,0,0,1,.18-.38Z" />
    </g>
    <g id="vf-social--youtube">
      <path xmlns="http://www.w3.org/2000/svg" d="M20.06,3.5H3.94A3.94,3.94,0,0,0,0,7.44v9.12A3.94,3.94,0,0,0,3.94,20.5H20.06A3.94,3.94,0,0,0,24,16.56V7.44A3.94,3.94,0,0,0,20.06,3.5ZM16.54,12,9.77,16.36A.5.5,0,0,1,9,15.94V7.28a.5.5,0,0,1,.77-.42l6.77,4.33a.5.5,0,0,1,0,.84Z" />
    </g>
    <g id="vf-social--instagram">
      <path xmlns="http://www.w3.org/2000/svg" d="M17.5,0H6.5A6.51,6.51,0,0,0,0,6.5v11A6.51,6.51,0,0,0,6.5,24h11A6.51,6.51,0,0,0,24,17.5V6.5A6.51,6.51,0,0,0,17.5,0ZM12,17.5A5.5,5.5,0,1,1,17.5,12,5.5,5.5,0,0,1,12,17.5Zm6.5-11A1.5,1.5,0,1,1,20,5,1.5,1.5,0,0,1,18.5,6.5Z" />
    </g>
  </defs>
</svg>


<div class="vf-social-links">
  <h3 class="vf-social-links__heading">
    Follow us
  </h3>
  <ul class="vf-social-links__list">
    <li class="vf-social-links__item">

      <a class="vf-social-links__link" href="JavaScript:Void(0);">
        <span class="vf-u-sr-only">twitter</span>

        <svg aria-hidden="true" class="vf-icon vf-icon--social vf-icon--twitter" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
          <use xlink:href="#vf-social--twitter"></use>
        </svg>

      </a>

    </li>
    <li class="vf-social-links__item">

      <a class="vf-social-links__link" href="JavaScript:Void(0);">
        <span class="vf-u-sr-only">facebook</span>

        <svg aria-hidden="true" class="vf-icon vf-icon--social vf-icon--facebook" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
          <use xlink:href="#vf-social--facebook"></use>
        </svg>

      </a>

    </li>
    <li class="vf-social-links__item">

      <a class="vf-social-links__link" href="JavaScript:Void(0);">
        <span class="vf-u-sr-only">instagram</span>

        <svg aria-hidden="true" class="vf-icon vf-icon--social vf-icon--instagram" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
          <use xlink:href="#vf-social--instagram"></use>
        </svg>

      </a>

    </li>
    <li class="vf-social-links__item">

      <a class="vf-social-links__link" href="JavaScript:Void(0);">
        <span class="vf-u-sr-only">youtube</span>

        <svg aria-hidden="true" class="vf-icon vf-icon--social vf-icon--youtube" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
          <use xlink:href="#vf-social--youtube"></use>
        </svg>

      </a>

    </li>
    <li class="vf-social-links__item">

      <a class="vf-social-links__link" href="JavaScript:Void(0);">
        <span class="vf-u-sr-only">linkedin</span>

        <svg aria-hidden="true" class="vf-icon vf-icon--social vf-icon--linkedin" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
          <use xlink:href="#vf-social--linkedin"></use>
        </svg>

      </a>

    </li>
  </ul>

</div>
              

Usage

Variants Available

SVG

You will need to make sure the SVG code below is added somewhere in your HTML (preferably at the top).

<svg aria-hidden="true" display="none" class="vf-icon-collection vf-icon-collection--social">
<defs>
<g id="vf-social--linkedin">
<rect xmlns="http://www.w3.org/2000/svg" width="5" height="14" x="2" y="8.5" rx=".5" ry=".5"/><ellipse xmlns="http://www.w3.org/2000/svg" cx="4.48" cy="4" rx="2.48" ry="2.5"/><path xmlns="http://www.w3.org/2000/svg" d="M18.5,22.5h3A.5.5,0,0,0,22,22V13.6C22,9.83,19.87,8,16.89,8a4.21,4.21,0,0,0-3.17,1.27A.41.41,0,0,1,13,9a.5.5,0,0,0-.5-.5h-3A.5.5,0,0,0,9,9V22a.5.5,0,0,0,.5.5h3A.5.5,0,0,0,13,22V14.5a2.5,2.5,0,0,1,5,0V22A.5.5,0,0,0,18.5,22.5Z"/>
</g>
<g id="vf-social--facebook">
<path xmlns="http://www.w3.org/2000/svg" d="m18.14 7.17a.5.5 0 0 0 -.37-.17h-3.77v-1.41c0-.28.06-.6.51-.6h3a.44.44 0 0 0 .35-.15.5.5 0 0 0 .14-.34v-4a.5.5 0 0 0 -.5-.5h-4.33c-4.8 0-5.17 4.1-5.17 5.35v1.65h-2.5a.5.5 0 0 0 -.5.5v4a.5.5 0 0 0 .5.5h2.5v11.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-11.5h3.35a.5.5 0 0 0 .5-.45l.42-4a.5.5 0 0 0 -.13-.38z"/>
</g>
<g id="vf-social--twitter">
<path xmlns="http://www.w3.org/2000/svg" d="M23.32,6.44a.5.5,0,0,0-.2-.87l-.79-.2A.5.5,0,0,1,22,4.67l.44-.89a.5.5,0,0,0-.58-.7l-2,.56a.5.5,0,0,1-.44-.08,5,5,0,0,0-3-1,5,5,0,0,0-5,5v.36a.25.25,0,0,1-.22.25c-2.81.33-5.5-1.1-8.4-4.44a.51.51,0,0,0-.51-.15A.5.5,0,0,0,2,4a7.58,7.58,0,0,0,.46,4.92.25.25,0,0,1-.26.36L1.08,9.06a.5.5,0,0,0-.57.59,5.15,5.15,0,0,0,2.37,3.78.25.25,0,0,1,0,.45l-.53.21a.5.5,0,0,0-.26.69,4.36,4.36,0,0,0,3.2,2.48.25.25,0,0,1,0,.47A10.94,10.94,0,0,1,1,18.56a.5.5,0,0,0-.2,1,20.06,20.06,0,0,0,8.14,1.93,12.58,12.58,0,0,0,7-2A12.5,12.5,0,0,0,21.5,9.06V8.19a.5.5,0,0,1,.18-.38Z"/>
</g>
<g id="vf-social--youtube">
<path xmlns="http://www.w3.org/2000/svg" d="M20.06,3.5H3.94A3.94,3.94,0,0,0,0,7.44v9.12A3.94,3.94,0,0,0,3.94,20.5H20.06A3.94,3.94,0,0,0,24,16.56V7.44A3.94,3.94,0,0,0,20.06,3.5ZM16.54,12,9.77,16.36A.5.5,0,0,1,9,15.94V7.28a.5.5,0,0,1,.77-.42l6.77,4.33a.5.5,0,0,1,0,.84Z"/>
</g>
<g id="vf-social--instagram">
<path xmlns="http://www.w3.org/2000/svg" d="M17.5,0H6.5A6.51,6.51,0,0,0,0,6.5v11A6.51,6.51,0,0,0,6.5,24h11A6.51,6.51,0,0,0,24,17.5V6.5A6.51,6.51,0,0,0,17.5,0ZM12,17.5A5.5,5.5,0,1,1,17.5,12,5.5,5.5,0,0,1,12,17.5Zm6.5-11A1.5,1.5,0,1,1,20,5,1.5,1.5,0,0,1,18.5,6.5Z"/>
</g>
</defs>
</svg>

This is in leiu of an icon system for you to pull things in automatically.

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-social-links with this command.

$ yarn add --dev @visual-framework/vf-social-links

JS

If your component uses JS:

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfcomponentName } from 'vf-social-links/vf-social-links';
// Or import directly
// import { vfcomponentName } from '../components/raw/vf-social-links/vf-social-links.js';
vfcomponentName(); // if needed, invoke it

Sass/CSS

If your component uses Sass:

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-social-links/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-social-links

Find an issue on this page? Propose a change or discuss it.