PF-Icon-Link
ready

Introduction

Themed links using SVG Icons

Usage

On wrapper link, add pf-icon-link class, with other modifiers for extended effects

Read here for more information around using SVG sprites.

Examples

Default

<a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#banking" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-down" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-left" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-right" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-up" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#cloud-download" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#dashboard" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#disbursement" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#doc" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#envelope" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#facebook" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#hamburger" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#home" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#hide" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#help-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#important-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#info-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#linkedin" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#lock" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#magnifying-glass" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#ok-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#play-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#search" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#show" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#signout" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#sort" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#tick" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#times" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#twitter" /></svg>
    </a>
    <a href="#" class="pf-icon-link">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#user" /></svg>
    </a>
    

Primary

<a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#banking" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-down" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-left" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-right" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#chevron-up" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#cloud-download" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#dashboard" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#disbursement" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#doc" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#envelope" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#facebook" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#hamburger" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#home" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#hide" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#help-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#important-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#info-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#linkedin" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#lock" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#magnifying-glass" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#ok-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#play-circle" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#search" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#show" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#signout" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#sort" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#tick" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#times" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#twitter" /></svg>
    </a>
    <a href="#" class="pf-icon-link pf-icon-link--primary">
       <svg class="icon-svg"><use xlink:href="/v2.8/assets/images/icons/sprite.svg#user" /></svg>
    </a>
    

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_pf-icon-link.scss

Usage

Class/JavaScript Hook Description Required?
.pf-icon-link Placed on the a around an svg element. Icons inherit the font size and colour of its parent container. Required.
.pf-icon-link--primary Adds a hover/focus state Optional.