Origami Frontend Components & Services

Readme: o-icons

Helper Sass for the fticons image set.
Complete list of available icons

Though you can use these icons at any size, they render best at 40px.

Usage

Markup

<!-- Loads the CSS for o-icons  -->
<link rel="stylesheet" href="//origami-build.ft.com/v2/bundles/css?modules=o-icons@^5.0.0" />

<!-- In your markup, use the helper classes, such as: -->
<i class="o-icons-icon o-icons-icon--arrow-down"></i>

Sass

There are a few ways to use o-icons to get fticons:

  1. Using the CSS helper classes
  2. Using the Sass mixins with your own CSS

You can also request the icon directly from the Image Service (without using o-icons at all). See the fticons for how to do this.

Using the CSS helper classes

// public/bundle.scss

$o-icons-is-silent: false;
@import "o-icons/main";
<!-- In your markup, use the helper classes, such as: -->
<i class="o-icons-icon o-icons-icon--plus"></i>

When using CSS classes, it isn't possible to set a colour for the icon or to specify a size for the PNG fallback. The defaults are 'black' for the icon colour and '128px' for the width and height.

Using the Sass mixins with your own CSS

This option has the added flexibility of supporting coloured icons and PNG fallbacks of any size.

// public/bundle.scss

@import "o-icons/main";
@import "o-colors/main"; // So you can use colors from the Origami palette, the mixin only accepts hex values

.icon-plus {
    @include oIconsGetIcon('plus', oColorsGetPaletteColor('cold-1'), 32);
}
<i class="icon-plus"></i>

The Responsive Image Service helps serving resolution-independent SVG icons.

The 'base' of the service url can be set with the $o-icons-service-base-url variable. e.g. setting

$o-icons-service-base-url: "https://my.image.service/foo";

will output an image service url in the format https://my.image.service/foo/v2/images/raw/....

The 'version' of the service url can be set with the $o-icons-service-version variable. e.g. setting

$o-icons-service-version: "v1";

will output an image service url in the format https://my.image.service/foo/v1/images/raw/....

There's also a separate mixin to output just the base styles for an icon:

.icon {
    @include oIconsBaseStyles;
}

Which outputs:

.icon {
    display: inline-block;
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    background-color: transparent;
    vertical-align: middle;
}

Contributing

o-icons is some Sass mixins and helpers for using the fticons image set. To add a new icon you need to add it to the fticons set. There are instructions in the fticons README.

Migration guide

How to upgrade from v4.x.x to v5.x.x?

The jump from 4 to 5 introduces an entirely new set of icons. Using these icons should be a lot easier as they have a uniform amount of white-space around them, so you don't need to individually size icons to work in your application harmoniously.

That said, because the icons have all changed, you will need to adjust the sizing and alignment of them in your application as things that aligned before may be out of whack now.

Deprecated icons

The new icon set has deprecated some icons, added some, and renamed some others. For a full list of these icons please see the fticon README.

Logos and Mastheads

The logos and masthead that were deprecated in version 4 have now moved completely. Please use the Logo Images set via the image service for these.

How to upgrade from v3.x.x to v4.x.x?

Important changes

Markup changes

CSS now doesn't add any pseudoclasses, so all the styling is applied directly on the element

CSS Changes

Sass Changes

Silent mode off Changes

When using the Build Service, you're using this module with silent mode turned off. Due to the removal of the icon font, there are a couple things to keep in mind in the new implementation:


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-icons

If using the Build Service, add o-icons@^5.7.1 to your link tag.

If running a Manual Build, run bower install --save "o-icons@^5.7.1".

Help & Support

o-icons is maintained directly by the Origami team. If you have any questions about o-icons or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com