Helper SCSS tool for using the FT's icons. For a full list of available icons please see the fticons image set
> ⚠️ NOTE: o-icons has been replaced with o3-foundation. Please see Migration Guide for steps to upgrade.
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
Check out how to include Origami components in your project to get started with o-icons.
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).
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.
``html`
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).
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.
`scss
// 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
);
}
`
`html`
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.
`scss
// 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
);
}
`
`html`
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:
`scss`
.no-high-contrast-window {
@include oIconsContent(
$icon-name: 'plus',
$color: oColorsByName('claret'),
$high-contrast-fallback: false
);
}
To output all icon helper classes include the oIcons mixin.`scss`
@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:`scss`
@include oIcons($opts: (
'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons
));
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`.
State | Major Version | Last Minor Release | Migration guide |
:---: |:-------------:| :---: |:----------------------------------------------------------------:
✨ active | o3 | N/A | migrate to o3 |
╳ deprecated | 7 | N/A | migrate to v6 |
╳ deprecated | 6 | 6.3 | migrate to v6 |
╳ deprecated | 5 | 5.9 | migrate to v5 |
╳ deprecated | 4 | 4.5 | migrate to v4 |
╳ deprecated | 3 | 3.3 | - |
╳ deprecated | 2 | 2.4 | - |
╳ deprecated | 1 | 1.2 | - |
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.
*
This software is published by the Financial Times under the MIT licence.