Origami Frontend Components & Services

SassDoc: o-icons

o-icons-is-silent

Silent mode

Links

oIcons(opts)

parameter type default description
opts (optional) ('icons': ('arrow-down', 'audio', 'book')) A map of o-icons options, including all icons to include (defaults to all icons, see the README for a full list).

Examples

Example #1

all o-icons css.

@include oIcons();

Example #2

only css for the up and down arrows.

@include oIcons($opts: ('icons': ('arrow-down', 'arrow-up')));

Links

oIconsContent(...)

Output styles for an SVG icon. Styles the icon as a background image, setting a width and height on the element as requested. A fallback background for Windows High Contrast mode is also output.

parameter type default description
icon-name This should be a reference to an icon included in o-icons eg arrow-down
color This should be a hex colour value. Used to color the icon. We suggest using an o-colors function.
size (optional) 128 The width and height of the icon (units optional, defaults to px). Set to `null` to set no width or height.
include-base-styles (optional) true If true, will output style rules for the container. If false will only output the background-image property
high-contrast-fallback (optional) true To output Microsoft High Contrast fallback for accessibility reasons or not.
iconset-version (optional) 1 At present only 1 version of the icon set is available.

Links

oIconsContentBaseStyles

Base styles for all icons

Links

oIcons(opts)

parameter type default description
opts (optional) ('icons': ('arrow-down', 'audio', 'book')) A map of o-icons options, including all icons to include (defaults to all icons, see the README for a full list).

Examples

Example #1

all o-icons css.

@include oIcons();

Example #2

only css for the up and down arrows.

@include oIcons($opts: ('icons': ('arrow-down', 'arrow-up')));

Links

Support Status
active
Switch component view

GitHub Repository

Install o-icons

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

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

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: #origami-support
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: #origami-support
Email: origami.support@ft.com