Icon

Views uses heroicons—a collection of almost 300 svg icons. We have re-exported these icons under the sub-package @airplane/views/icons to make it easy to add icons to a view.

Basic usage

tsx
Copied
1
import { PaperAirplaneIcon } from "@airplane/views/icons";
2
3
const Icon = () => {
4
return <PaperAirplaneIcon />;
5
};
6
7
export default Icon;

Styling

Variants

Each icon can be used in three variants. It's up to you which icon to use for your usecase, but we recommend Solid as a good default and Mini if your icon is in a small format like in a button.
  1. Solid (default): Icon has a filled appearance.
  2. Outline: Icon has an outlined appearance.
  3. Mini: For smaller elements like inside of buttons.
tsx
Copied
1
import { Text } from "@airplane/views";
2
import {
3
PaperAirplaneIcon,
4
PaperAirplaneIconSolid,
5
PaperAirplaneIconOutline,
6
PaperAirplaneIconMini,
7
} from "@airplane/views/icons";
8
9
const Icon = () => {
10
return (
11
<>
12
<PaperAirplaneIcon />
13
<Text>Default (Solid)</Text>
14
15
<PaperAirplaneIconSolid />
16
<Text>Solid</Text>
17
18
<PaperAirplaneIconOutline />
19
<Text>Outline</Text>
20
21
<PaperAirplaneIconMini />
22
<Text>Mini</Text>
23
</>
24
);
25
};
26
27
export default Icon;

Color and Size

Icons can also be styled with a color and/or a size.
tsx
Copied
1
<PaperAirplaneIcon color="primary" size="xs" />
2
<PaperAirplaneIcon color="secondary" size="sm" />
3
<PaperAirplaneIcon color="dark" size="md" />
4
<PaperAirplaneIcon color="error" size="lg" />
5
<PaperAirplaneIcon color="blue.3" size="xl" />

Using icons in other components

Some views components take an icon as a prop.
In the following example, we include an icon on the right side of a button.
tsx
Copied
1
import { Button } from "@airplane/views";
2
import { PaperAirplaneIconMini } from "@airplane/views/icons";
3
4
const Icon = () => {
5
return <Button rightIcon={<PaperAirplaneIconMini />}>I have an icon</Button>;
6
};
7
8
export default Icon;

Available icons

Refer to the heroicons documentation for a searchable library of all available icons. Each heroicon is available—its name is changed from kebab-case to TitleCase and the word Icon is appended.
For example, the heroicon with name academic-cap can be imported as import { AcademicCapIcon } from "@airplane/views/icons";.

Component API

color
optional
Color

The color of the icon

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

The size of the icon