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
Basic usage
tsxCopied1import { PaperAirplaneIcon } from "@airplane/views/icons";23const Icon = () => {4return <PaperAirplaneIcon />;5};67export default Icon;
Styling
Styling
Variants
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.- Solid (default): Icon has a filled appearance.
- Outline: Icon has an outlined appearance.
- Mini: For smaller elements like inside of buttons.
tsxCopied1import { Text } from "@airplane/views";2import {3PaperAirplaneIcon,4PaperAirplaneIconSolid,5PaperAirplaneIconOutline,6PaperAirplaneIconMini,7} from "@airplane/views/icons";89const Icon = () => {10return (11<>12<PaperAirplaneIcon />13<Text>Default (Solid)</Text>1415<PaperAirplaneIconSolid />16<Text>Solid</Text>1718<PaperAirplaneIconOutline />19<Text>Outline</Text>2021<PaperAirplaneIconMini />22<Text>Mini</Text>23</>24);25};2627export default Icon;
Color and Size
Color and Size
Icons can also be styled with a
color
and/or a size
.tsxCopied1<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
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.
tsxCopied1import { Button } from "@airplane/views";2import { PaperAirplaneIconMini } from "@airplane/views/icons";34const Icon = () => {5return <Button rightIcon={<PaperAirplaneIconMini />}>I have an icon</Button>;6};78export default Icon;
Available icons
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
Component API
color
optional
The color of the icon
size
optional
The size of the icon