PandaGo Components

Appearance

Return to top
On this page

Iconography

For the iconography, we are using the free version of FontAwesome, which gives us the versatility of hundreds of icons as well as the flexibility of modifying them as we need.

The icons that can be used are listed in the Design System and will probably be updated as the projects grow, so list them is not the best option. Just stick to the ones being already used and if you need a new one, ask for it.

All the attributes passed to the component will be passed to the underlying FontAwesome component, so all the props accepted by the FontAwesome component are also accepted by the PandaIcon component.

TIP

For using icons not defined in the Design System, please refer to the section below.

Usage

Props

string iconSizeAllows to change the size of the icon Default value: IconSize.MEDIUM
xssml
string iconIndicates which icon should be rendered Default value: undefined
string flagIndicates if the icon should render a flag instead of a FontAwesome icon (ISO 3166-1 alpha-2 standard) Default value: undefined
boolean squaredIndicates if the flag provided should be squared or not

WARNING

The icon prop has priority over the flag prop, so if both are provided, the icon prop will be used.

TIP

The squared prop only works if the flag prop is provided and no icon prop is provided.

TIP

The flag prop works with two-letter country codes, so the flags available are the ones listed in the ISO 3166-1 alpha-2 standard.

Options

Show bordersOnly works for icons (icon prop is provided)

Add icons not defined in the Design System

Import the component from the FortAwesome library and add it to the library, as shown in the example below:

typescript
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCar } from '@fortawesome/free-solid-svg-icons';

library.add(faCar);