Europa Component Library

Social icons

Documentation • Demo

Social icons

This is the ECL package you need when you want to implement a social media icon in any way.

Few possibilities to do so:

  • As a link:
<a href="#" class="ecl-link ecl-icon-social ecl-icon-social--facebook">Facebook</a>

Note that the ecl-link class is an optional extension you can have for links formatting.

  • As a span:
<span class="ecl-icon-social ecl-icon-social--facebook">Facebook</span>
  • Making an icon smaller:
  <span class="ecl-icon-social ecl-icon-social--smaller ecl-icon-social--facebook">Facebook</span>
 
{#
  How to use this component:

  1) Variables building a link:
    - "link" (object): {
      - "href" (string): target of the social link (default: empty).
      - "variant" (string): variant of the social link. Correspond to the social network (default: empty)
      - "label" (string): label of the social link (default: empty)
    }
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])

  2) Variables building a span - this is a default output if the preceding fail.
    - "variant" (string): variant of the social link. Correspond to the social network (default: empty)
    - "label" (string): label of the social link (default: empty)
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ecl-icon-social' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if link is defined and link.variant is defined and link.variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-icon-social--' ~ link.variant %}
{% endif %}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-icon-social--' ~ variant %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}

{% if link is defined %}
{% include '@ec-europa/ecl-links' with {
  href: link.href,
  label: link.label,
  extra_classes: _css_class,
  extra_attributes: _extra_attributes,
} %}
{% else %}
<span class="{{ _css_class }}" {{ _extra_attributes|raw }}>{{ label }}</span>
{% endif %}
 
/* Arto */
{
  "variant": "arto",
  "label": "Arto"
}


/* Bebo */
{
  "variant": "bebo",
  "label": "Bebo"
}


/* Bitly */
{
  "variant": "bitly",
  "label": "Bitly"
}


/* Blinklist */
{
  "variant": "blinklist",
  "label": "Blinklist"
}


/* Blog */
{
  "variant": "blog",
  "label": "Blog"
}


/* Blogger */
{
  "variant": "blogger",
  "label": "Blogger"
}


/* Delicious */
{
  "variant": "delicious",
  "label": "Delicious"
}


/* Digg */
{
  "variant": "digg",
  "label": "Digg"
}


/* Diigo */
{
  "variant": "diigo",
  "label": "Diigo"
}


/* Dzone */
{
  "variant": "dzone",
  "label": "Dzone"
}


/* Email */
{
  "variant": "email",
  "label": "Email"
}


/* Facebook */
{
  "variant": "facebook",
  "label": "Facebook"
}


/* Flickr */
{
  "variant": "flickr",
  "label": "Flickr"
}


/* Foursquare */
{
  "variant": "foursquare",
  "label": "Foursquare"
}


/* Generic */
{
  "variant": "generic",
  "label": "Generic"
}


/* Google */
{
  "variant": "google",
  "label": "Google"
}


/* Gplus */
{
  "variant": "gplus",
  "label": "Gplus"
}


/* Instagram */
{
  "variant": "instagram",
  "label": "Instagram"
}


/* Linkarena */
{
  "variant": "linkarena",
  "label": "Linkarena"
}


/* Linkedin */
{
  "variant": "linkedin",
  "label": "Linkedin"
}


/* Live */
{
  "variant": "live",
  "label": "Live"
}


/* Meneame */
{
  "variant": "meneame",
  "label": "Meneame"
}


/* Misterwong */
{
  "variant": "misterwong",
  "label": "Misterwong"
}


/* Myspace */
{
  "variant": "myspace",
  "label": "Myspace"
}


/* Netlog */
{
  "variant": "netlog",
  "label": "Netlog"
}


/* Netvibes */
{
  "variant": "netvibes",
  "label": "Netvibes"
}


/* Newsvine */
{
  "variant": "newsvine",
  "label": "Newsvine"
}


/* Nujij */
{
  "variant": "nujij",
  "label": "Nujij"
}


/* Pinterest */
{
  "variant": "pinterest",
  "label": "Pinterest"
}


/* Pocket */
{
  "variant": "pocket",
  "label": "Pocket"
}


/* Reddit */
{
  "variant": "reddit",
  "label": "Reddit"
}


/* RSS */
{
  "variant": "rss",
  "label": "RSS"
}


/* Share */
{
  "variant": "share",
  "label": "Share"
}


/* Skype */
{
  "variant": "skype",
  "label": "Skype"
}


/* Slashdot */
{
  "variant": "slashdot",
  "label": "Slashdot"
}


/* Sonico */
{
  "variant": "sonico",
  "label": "Sonico"
}


/* Spotify */
{
  "variant": "spotify",
  "label": "Spotify"
}


/* Storify */
{
  "variant": "storify",
  "label": "Storify"
}


/* Studivz */
{
  "variant": "studivz",
  "label": "Studivz"
}


/* Stumbleupon */
{
  "variant": "stumbleupon",
  "label": "Stumbleupon"
}


/* Technorati */
{
  "variant": "technorati",
  "label": "Technorati"
}


/* Tuenti */
{
  "variant": "tuenti",
  "label": "Tuenti"
}


/* Tumblr */
{
  "variant": "tumblr",
  "label": "Tumblr"
}


/* Tumblr */
{
  "variant": "tumblr",
  "label": "Tumblr"
}


/* Twitter */
{
  "variant": "twitter",
  "label": "Twitter"
}


/* Viadeo */
{
  "variant": "viadeo",
  "label": "Viadeo"
}


/* Vine */
{
  "variant": "vine",
  "label": "Vine"
}


/* Wordpress */
{
  "variant": "wordpress",
  "label": "Wordpress"
}


/* Wykop */
{
  "variant": "wykop",
  "label": "Wykop"
}


/* Xerpi */
{
  "variant": "xerpi",
  "label": "Xerpi"
}


/* Yammer */
{
  "variant": "yammer",
  "label": "Yammer"
}


/* Youtube */
{
  "variant": "youtube",
  "label": "Youtube"
}


/* Print */
{
  "variant": "print",
  "label": "Print"
}


<!-- Arto -->
<span class="ecl-icon-social ecl-icon-social--arto">Arto</span>


<!-- Bebo -->
<span class="ecl-icon-social ecl-icon-social--bebo">Bebo</span>


<!-- Bitly -->
<span class="ecl-icon-social ecl-icon-social--bitly">Bitly</span>


<!-- Blinklist -->
<span class="ecl-icon-social ecl-icon-social--blinklist">Blinklist</span>


<!-- Blog -->
<span class="ecl-icon-social ecl-icon-social--blog">Blog</span>


<!-- Blogger -->
<span class="ecl-icon-social ecl-icon-social--blogger">Blogger</span>


<!-- Delicious -->
<span class="ecl-icon-social ecl-icon-social--delicious">Delicious</span>


<!-- Digg -->
<span class="ecl-icon-social ecl-icon-social--digg">Digg</span>


<!-- Diigo -->
<span class="ecl-icon-social ecl-icon-social--diigo">Diigo</span>


<!-- Dzone -->
<span class="ecl-icon-social ecl-icon-social--dzone">Dzone</span>


<!-- Email -->
<span class="ecl-icon-social ecl-icon-social--email">Email</span>


<!-- Facebook -->
<span class="ecl-icon-social ecl-icon-social--facebook">Facebook</span>


<!-- Flickr -->
<span class="ecl-icon-social ecl-icon-social--flickr">Flickr</span>


<!-- Foursquare -->
<span class="ecl-icon-social ecl-icon-social--foursquare">Foursquare</span>


<!-- Generic -->
<span class="ecl-icon-social ecl-icon-social--generic">Generic</span>


<!-- Google -->
<span class="ecl-icon-social ecl-icon-social--google">Google</span>


<!-- Gplus -->
<span class="ecl-icon-social ecl-icon-social--gplus">Gplus</span>


<!-- Instagram -->
<span class="ecl-icon-social ecl-icon-social--instagram">Instagram</span>


<!-- Linkarena -->
<span class="ecl-icon-social ecl-icon-social--linkarena">Linkarena</span>


<!-- Linkedin -->
<span class="ecl-icon-social ecl-icon-social--linkedin">Linkedin</span>


<!-- Live -->
<span class="ecl-icon-social ecl-icon-social--live">Live</span>


<!-- Meneame -->
<span class="ecl-icon-social ecl-icon-social--meneame">Meneame</span>


<!-- Misterwong -->
<span class="ecl-icon-social ecl-icon-social--misterwong">Misterwong</span>


<!-- Myspace -->
<span class="ecl-icon-social ecl-icon-social--myspace">Myspace</span>


<!-- Netlog -->
<span class="ecl-icon-social ecl-icon-social--netlog">Netlog</span>


<!-- Netvibes -->
<span class="ecl-icon-social ecl-icon-social--netvibes">Netvibes</span>


<!-- Newsvine -->
<span class="ecl-icon-social ecl-icon-social--newsvine">Newsvine</span>


<!-- Nujij -->
<span class="ecl-icon-social ecl-icon-social--nujij">Nujij</span>


<!-- Pinterest -->
<span class="ecl-icon-social ecl-icon-social--pinterest">Pinterest</span>


<!-- Pocket -->
<span class="ecl-icon-social ecl-icon-social--pocket">Pocket</span>


<!-- Reddit -->
<span class="ecl-icon-social ecl-icon-social--reddit">Reddit</span>


<!-- RSS -->
<span class="ecl-icon-social ecl-icon-social--rss">RSS</span>


<!-- Share -->
<span class="ecl-icon-social ecl-icon-social--share">Share</span>


<!-- Skype -->
<span class="ecl-icon-social ecl-icon-social--skype">Skype</span>


<!-- Slashdot -->
<span class="ecl-icon-social ecl-icon-social--slashdot">Slashdot</span>


<!-- Sonico -->
<span class="ecl-icon-social ecl-icon-social--sonico">Sonico</span>


<!-- Spotify -->
<span class="ecl-icon-social ecl-icon-social--spotify">Spotify</span>


<!-- Storify -->
<span class="ecl-icon-social ecl-icon-social--storify">Storify</span>


<!-- Studivz -->
<span class="ecl-icon-social ecl-icon-social--studivz">Studivz</span>


<!-- Stumbleupon -->
<span class="ecl-icon-social ecl-icon-social--stumbleupon">Stumbleupon</span>


<!-- Technorati -->
<span class="ecl-icon-social ecl-icon-social--technorati">Technorati</span>


<!-- Tuenti -->
<span class="ecl-icon-social ecl-icon-social--tuenti">Tuenti</span>


<!-- Tumblr -->
<span class="ecl-icon-social ecl-icon-social--tumblr">Tumblr</span>


<!-- Tumblr -->
<span class="ecl-icon-social ecl-icon-social--tumblr">Tumblr</span>


<!-- Twitter -->
<span class="ecl-icon-social ecl-icon-social--twitter">Twitter</span>


<!-- Viadeo -->
<span class="ecl-icon-social ecl-icon-social--viadeo">Viadeo</span>


<!-- Vine -->
<span class="ecl-icon-social ecl-icon-social--vine">Vine</span>


<!-- Wordpress -->
<span class="ecl-icon-social ecl-icon-social--wordpress">Wordpress</span>


<!-- Wykop -->
<span class="ecl-icon-social ecl-icon-social--wykop">Wykop</span>


<!-- Xerpi -->
<span class="ecl-icon-social ecl-icon-social--xerpi">Xerpi</span>


<!-- Yammer -->
<span class="ecl-icon-social ecl-icon-social--yammer">Yammer</span>


<!-- Youtube -->
<span class="ecl-icon-social ecl-icon-social--youtube">Youtube</span>


<!-- Print -->
<span class="ecl-icon-social ecl-icon-social--print">Print</span>
  • Content: 
    /**
 * Social icons
 * @define icon-social
 */

// Brings in the long list for $ecl-social-icons.
@import './icons-list';

$img-path: $ecl-assets-path + 'images/social/';

// Social icons image.
@mixin generate-icon($selector, $img-path, $image, $img-hover, $extra: null, $extra_hover: null) {
  // Ignoring next 2 selectors since the dynamic selector is problematic for the linter.

  /* postcss-bem-linter: ignore */
  #{$selector}::before {
    background: url($img-path + $image) no-repeat $extra;
  }

  /* postcss-bem-linter: ignore */
  #{$selector}:hover::before {
    background-image: url($img-path + $img-hover) $extra_hover;
  }
}

.ecl-icon-social {
  align-items: center;
  display: flex;
  margin: 0;
}

.ecl-icon-social::before {
  content: '';
  display: block;
  height: 2rem;
  margin-right: 1rem;
  width: 2rem;
}

.ecl-icon-social--smaller {
  min-height: 1.5rem;

  &::before {
    height: 1.5rem;
    width: 1.5rem;
  }
}

@each $icon, $extra in $ecl-social-icons {
  @include generate-icon('.ecl-icon-social--' + $icon, $img-path, $icon + '.svg', $icon + '_hover.svg', #{$extra});
}
  • URL: /components/raw/ecl-social-icons/ecl-social-icons.scss
  • Filesystem Path: framework/components/ecl-social-icons/ecl-social-icons.scss
  • Size: 1.1 KB
  • Content: 
    $ecl-social-icons: ('arto', ''),  ('bebo', ''),  ('bitly', ''),
   ('blinklist', ''),  ('blog', ''),  ('blogger', ''),  ('delicious', ''),
   ('digg', ''),  ('diigo', ''),  ('dzone', ''),  ('email', ''),
   ('facebook', ''),  ('flickr', ''),  ('foursquare', ''),  ('generic', ''),
   ('google', ''),  ('gplus', ''),  ('instagram', ''),  ('linkarena', ''),
   ('linkedin', ''),  ('live', ''),  ('meneame', ''),  ('misterwong', ''),
   ('myspace', ''),  ('netlog', ''),  ('netvibes', ''),  ('newsvine', ''),
   ('nujij', ''),  ('pinterest', ''),  ('pocket', ''),  ('reddit', ''),
   ('rss', ''),  ('share', ''),  ('skype', ''),  ('slashdot', ''),
   ('sonico', ''),  ('spotify', ''),  ('storify', ''),  ('studivz', ''),
   ('stumbleupon', ''),  ('technorati', ''),  ('tuenti', ''),  ('tumblr', ''),
   ('twitter', '#ffffff'),  ('viadeo', ''),  ('vine', ''),  ('wordpress', ''),
   ('wykop', ''),  ('xerpi', ''),  ('yammer', ''),  ('youtube', ''),
   ('print', '');
  • URL: /components/raw/ecl-social-icons/icons-list.scss
  • Filesystem Path: framework/components/ecl-social-icons/icons-list.scss
  • Size: 963 Bytes
  • Handle: @ec-europa/ecl-social-icons
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-social-icons/ecl-social-icons.twig