Social Links component

About

Links to social services.

Usage

Variants Available

• vf-social-links--outline This removes the background and gives a border around each icon square.
• dark-mode If this is inside a component that has dark-mode theme then the colours swap.

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 d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
    </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 lieu of an icon system for you to pull things in automatically.

Install

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack