Atomic Bulldog - UI/pattern library

6.9 - Icons

Source: vendors/icomoon/_variables.scss, line 66

Open in new window

Icon font are generated using https://icomoon.io/ (See vendors)

Icomoon give sass files but these ones use variables. For better maintainability and theming the vendor have been changed so it uses a map instead of variables.

Variables can be converted to a map using this tool:

See the Pen Convert Sass variables to map by Vincent Humeau (@vinceumo) on CodePen.

Icons can be called in the sass project using the functions:

icon($icon, $true-val:false) which will output by default the CSS variable, You will need to set the font family as font-family: font-family(icon)

Usage of icon():

  • icon(twitter) => var(--icon-twitter) If $use-css-var = true
  • icon(twitter) => "\f099" If $use-css-var = false
  • icon(twitter, true) => `"\f099"