Code
Storybook
Usage
Icon
Icons are graphical metaphors or symbols that can be used to complement existing experiences.
Getting Started
To use this component in your project you need to run the following command using npm:
npm install -S @alma-oss/spirit-iconsIf you prefer Yarn, use the following command instead:
yarn add @alma-oss/spirit-iconsDependencies
@alma-oss/spirit-icons is required as a peer dependency to keep package size as low as possible. So it will not be automatically installed with @alma-oss/spirit-web-react.
- @alma-oss/spirit-icons - Spirit Icons package
- html-react-parser - HTML to React parser (avoid usage of dangerouslySetInnerHTML on the server side)
Usage
To ensure the Icon component functions as expected, wrap your application or the component tree where Icon is used with the IconsProvider. You need to pass the icon set to the provider as its value.
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';
<IconsProvider value={icons}>{/* Your Icon, app or component where Icon is used */}</IconsProvider>;Example
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';
<IconsProvider value={icons}>
<Icon name="warning" />
Hey! Pay attention!
</IconsProvider>;Color
You can change the color of the icon by using the color attribute. Available colors are emotion colors, text colors, and the accent colors defined in your design tokens.
Example
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';
<IconsProvider value={icons}>
<Icon name="warning" color="warning" />
</IconsProvider>;Full Example
import { Icon, IconsProvider } from '@alma-oss/spirit-web-react';
import icons from '@alma-oss/spirit-icons/icons';
<IconsProvider value={icons}>
<Icon name="warning" color="warning" boxSize={{ mobile: 20, tablet: 30, desktop: 40 }} title="Icon Title" />
Hey! Pay attention!
</IconsProvider>;API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| boxSize | [number | Responsive<number>] | 24 | ✕ | Size of the icon, use object to set responsive values, e.g. { mobile: 20, tablet: 30, desktop: 40 } |
| color | [AccentColorNamesType | EmotionColorNamesType | TextColorNamesType] | primary * | ✕ | Color of the dualtone icon |
| name | string | — | ✓ | Name of the icon |
| title | string | — | ✕ | Title of the icon |
(*) The default color "Primary" is used only for dualtone icons. For single-tone icons, the default color is inherited from the parent element.
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
For more details about Icons see Spirit Icons package.