@igloo-ui/icons
v1.12.3
Published
A set of icons handcrafted by Officevibe
Downloads
135
Readme
@igloo-ui/icons
A set of icons handcrafted by Officevibe
Getting started
To install @igloo-ui/icons in your project, you will need to run the following command using npm:
npm install @igloo-ui/icons
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/icons
Usage
Icons in this package support the following sizes: 16
, 24
, and 32
pixels. You can import an icon component into your project by referring to its name:
import Alert from '@igloo-ui/icons/dist/Alert';
function MyComponent() {
return (
<>
<Alert /> Uh oh, something went wrong
</>
);
}
Changing the size
You can change the size of an icon by passing a prop size
which takes small
, medium
and large
. For example:
import Clock from '@igloo-ui/icons/dist/Calendar';
function MyComponent() {
return (
<>
<Calendar size="large" /> Monday, Feb 2022
</>
);
}
| Prop | Rendered Size |
| -------- | ---------------------------- |
| small
| 16px |
| medium
| 24px is the default size |
| Large
| 32px |
Changing the color
You can change the color of an icon by passing in a custom class name that sets this property.
First install tokens
yarn add @igloo-ui/tokens
For example:
@import '@igloo-ui/tokens/dist/variables.css';
.my-custom-class {
color: var(--dandelion-600);
}
import Alert from '@igloo-ui/icons/dist/Alert';
function MyComponent() {
return (
<>
<Alert className="my-custom-class" /> Uh oh, something went wrong
</>
);
}
Accessibility
If the icon used without text, then use the ariaLabel
prop to give the icon a text alternative. The label should describe the icon.
import Alert from '@igloo-ui/icons/dist/Alert';
function MyComponent() {
return <Alert ariaLabel=" Uh oh, something went wrong" />;
}
SVG files
For projects that don’t use React, icons are also available as *.svg files in the dist/svg
folder.
License
Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.