⚠️ NOTE: o-icons has been replaced with o3-foundation. Please see Migration Guide for steps to upgrade.

o-icons

Helper Sass for the fticons image set.

• o-icons
  • Usage
  • Summary
  • Markup
  • Sass
    • Includes icons of different sizes and colors
    • Using the default CSS helper classes
  • Contributing
  • Migration
  • Contact
  • Licence

Usage

Check out how to include Origami components in your project to get started with o-icons.

Summary

There are a few ways to get icons from fticons:

1. Use o-icons CSS classes
2. Use o-icons Sass mixins with your own CSS.
3. Request the icon directly from the Image Service (without using o-icons at all).

Markup

To add an icon apply the o-icons-icon class to a span, along with the modifier class for your specific icon e.g. o-icons-icon--arrow-down. See the storybook demos for a full list of icons.

<span class="o-icons-icon o-icons-icon--arrow-down"></span>
<span class="o-icons-icon o-icons-icon--audio"></span>
<span class="o-icons-icon o-icons-icon--book"></span>

This will include icons with a 128px width/height by default.

If you would like to use an icon at a different dimension or colour, use o-icon Sass mixins or request the icon from the Image Service directly (without using o-icons at all).

Sass

Includes icons of different sizes and colors

Use oIconsContent to output the styles for an icon of a given size and colour.

The $color argument should be set using an o-colors Sass function such as oColorsByName, but may be set to any hex value.

// Use o-colors so you can use colors from the Origami palette.
@import "@financial-times/o-icons/main";
@import "@financial-times/o-colors/main";

// Output a 32px, claret coloured plus icon.
.my-icon-plus {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $size: 32
    );
}

<span class="my-icon-plus"></span>

The oIconsContent mixins outputs styles used by each icon. This is inefficient if your project outputs multiple icons. In this case we recommend outputting the base styles separately with oIconsContentBaseStyles.

// Output a 32px, claret coloured plus icon.
.my-icon {
    @include oIconsContentBaseStyles();
}

.my-icon--plus {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $size: 32,
        $include-base-styles: false // do not duplicate the base styles
    );
}

<span class="my-icon my-icon--plus"></span>

o-icons includes a media query to restore either a black or white icon in Microsoft's high-contrast mode. If no icon is acceptable for users of Microsoft's high-contrast mode this may be disabled to reduce bundle size:

.no-high-contrast-window {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $high-contrast-fallback: false
    );
}

Using the default CSS helper classes

To output all icon helper classes include the oIcons mixin.

@import "@financial-times/o-icons/main";
@include oIcons(); // include helper classes for all icons

To avoid including all icon helper classes, oIcons mixin also accepts a list of icons to include:

@include oIcons($opts: (
    'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons
));

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 origami-image-service README. When the icon is in fticons, run node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON to update o-icons Sass with the new icon automatically.

If you need to remove an icon from o-icons you run node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON remove.

Migration

Contact

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

Licence

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