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. |