@visual-framework/vf-social-links NPM

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 insdie a component that has dark-mode theeme 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 leiu of an icon system for you to pull things in automatically.

Install

This repository is distributed with npm. After installing 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

fractal component

@everything-registry/sub-chunk-987 @zalastax/nolb-_vis

7 months ago

1 year ago

3 years ago

4 years ago