Icons

The design system supports SVG based icon libraries. All icons are used an inline SVG embeds.

Library - browse

Library - browse

Library - @TODO - Add link to AirDesigns Design System in figma

How to use

You need to include the custom PHP functions for working with the SVG icons - "_functions.php"

Including this file will provide a new function for rendering an icon - get_icon().

The function can be called with following parameters:

get_icon($icon, $library, $width = null, $height = null, $class = null, $style = null)

$icon - MANDATORY - the name of the icon - Example "concept" from the carbon library. This name matches the icon name from Figma. It also matches the svg filename in the library.
$library - MANDATORY - the name of the library - Supported libraries are: carbon, bootstrap, custom
$width - if left empty will fallback for a default value defined in "_functions.php"
$height - if left empty will fallback for a default value defined in "_functions.php"
$class - can be used to pass a css class to the icon. Example "text-primary" in order to make the icon use the primary color
$style - can be used to pass a inline css as style attribue to the icon. Example "margin:10px 16px". NOTE: use this only if the desired efect can not be achived via a class.

In figma create a custom 32x32 icon

Donload it and process it via svgomg

Place the optimized svg file in \assets\icons\custom

Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1).

There should be no fill="" attributes in the svg file

carbon - default size - default color

carbon - custom size (48) - default color

carbon - custom size (64) - custom color (primary)

carbon - custom size (16) - custom color (gray) - custom style (margins)

bootstrap (bricks) - default size - custom color (primary-light)

custom (food) - default size - custom color (primary-light)