Icons

File: ./icons

Icon classes are made to be used on the SVG icon element itself, not a wrapping element.

Icons can be imported using notation @tradera/blueprint/theme/icons2/[icon-name].

With React, Webpack and react-svg-loader, icons can be imported as a React component with ìmport Icon from @tradera/blueprint/theme/icons2/icon.svg?jsx.

Basic use

import Star from '@tradera/blueprint/theme/icons2/star';

<Star class="icon" />

Icon sizes

import Heart from '@tradera/blueprint/theme/icons2/heart';

<Heart class="icon icon-xs" />
<Heart class="icon icon-sm" />
<Heart class="icon icon-md" />
<Heart class="icon icon-lg" />
<Heart class="icon icon-xl" />
<Heart class="icon icon-xxl" />

Colored icons

Fill color

<Star class="icon icon-primary icon-lg" />
<Star class="icon icon-secondary icon-lg" />
<Star class="icon icon-branded icon-lg" />
<Star class="icon icon-success icon-lg" />
<Star class="icon icon-danger icon-lg" />
<Star class="icon icon-white icon-lg" />
<Star class="icon icon-dark icon-lg" />

icon-primary

icon-secondary

icon-branded

icon-success

icon-danger

icon-white

icon-dark

Stroke color

<Star class="icon icon-stroke-white icon-danger" />

icon-stroke-white

Animated icons

import Load from '@tradera/blueprint/theme/icons2/loading';

<Load class="icon icon-spin" />

Icon set

Filter

Base

Components

Forms

Graphics

Layout

Lists

Typography

Utilities

Tradera Visual Language