Vebego Component Library

Icon 

<!-- Default -->
<span class="atm-icon  far fa-external-link   "></span>


<!-- Solid icon -->
<span class="atm-icon  fas fa-external-link   "></span>


<!-- Light icon -->
<span class="atm-icon  fal fa-external-link   "></span>


<!-- 90° rotated icon -->
<span class="atm-icon  far fa-external-link fa-rotate-90  "></span>


<!-- 180° rotated icon -->
<span class="atm-icon  far fa-external-link fa-rotate-180  "></span>


<!-- 270° rotated icon -->
<span class="atm-icon  far fa-external-link fa-rotate-270  "></span>


<!-- Horizontally flipped icon -->
<span class="atm-icon  far fa-external-link fa-flip-horizontal  "></span>


<!-- Vertically flipped icon -->
<span class="atm-icon  far fa-external-link fa-flip-vertical  "></span>


<!-- Spinning icon -->
<span class="atm-icon  far fa-external-link fa-spin  "></span>


<!-- Pulse icon -->
<span class="atm-icon  far fa-external-link fa-pulse  "></span>


<!-- XS icon -->
<span class="atm-icon  far fa-external-link  fa-xs "></span>


<!-- SM icon -->
<span class="atm-icon  far fa-external-link  fa-sm "></span>


<!-- LG icon -->
<span class="atm-icon  far fa-external-link  fa-lg "></span>


<!-- 2X icon -->
<span class="atm-icon  far fa-external-link  fa-2x "></span>


<!-- 3X icon -->
<span class="atm-icon  far fa-external-link  fa-3x "></span>


<!-- 4X icon -->
<span class="atm-icon  far fa-external-link  fa-4x "></span>


{{#if icon}}{{#if style}}<span class="atm-icon {{modifier}} {{style}} {{icon}} {{rotation}} {{size}} {{#if fixedWidth}}fa-fw{{/if}}"></span>{{/if}}{{/if}}
 
/* Default */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* Solid icon */
{
  "icon": "fa-external-link",
  "style": "fas",
  "size": "",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* Light icon */
{
  "icon": "fa-external-link",
  "style": "fal",
  "size": "",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* 90° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-90",
  "fixedWidth": false,
  "modifier": ""
}


/* 180° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-180",
  "fixedWidth": false,
  "modifier": ""
}


/* 270° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-270",
  "fixedWidth": false,
  "modifier": ""
}


/* Horizontally flipped icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-flip-horizontal",
  "fixedWidth": false,
  "modifier": ""
}


/* Vertically flipped icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-flip-vertical",
  "fixedWidth": false,
  "modifier": ""
}


/* Spinning icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-spin",
  "fixedWidth": false,
  "modifier": ""
}


/* Pulse icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-pulse",
  "fixedWidth": false,
  "modifier": ""
}


/* XS icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-xs",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* SM icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-sm",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* LG icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-lg",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* 2X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-2x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* 3X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-3x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


/* 4X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-4x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}

The icon component uses Font Awesome for displaying icons. The icon component supports different style, rotation and size variants.

Style variants

  • far : regular icons, which is the default value
  • fab : brand icons
  • fas : solid icons
  • fal : light icons
  • fad : duotone icons

Rotation variants

  • fa-rotate-90 : rotates the icon 90 degrees clockwise
  • fa-rotate-180 : rotates the icon 180 degrees clockwise
  • fa-rotate-270 : rotates the icon 270 degrees clockwise
  • fa-flip-horizontal : flips the icon horizontally
  • fa-flip-vertical : flips the icon vertically
  • fa-spin : spins the icon
  • fa-pulse : rotates the icon in 8 steps

Size variants

  • fa-xs : extra small
  • fa-ms : medium small
  • fa-lg : large
  • fa-2x : double size
  • fa-3x : triple size
  • fa-4x : quadruple size