Chevron Up icon v0.1.0 · @behivetech

The chevron up icon: a 24 by 24 stroke glyph that takes its colour from the text around it.

Usage

1import { ChevronUpIcon } from '@behivetech/icons.chevron-up';
2
3<ChevronUpIcon />
4<ChevronUpIcon size="lg" titleAccess="Chevron Up" />

The icon is hidden from assistive technology unless it is named: pass titleAccess (rendered as the svg's <title>) or aria-label. It sizes through size (sm, md, lg, xl) with the stylesheet of @behivetech/icons.base, which the app imports once. The default export is the same component.

Examples

Open all 2 →

Chevron Up Icon Sizes

1const ChevronUpIconSizes = () => (
2  <>
3    <ChevronUpIcon size="sm" />
4    <ChevronUpIcon />
5    <ChevronUpIcon size="lg" />
6    <ChevronUpIcon size="xl" />
7  </>
8);
9
10render(<ChevronUpIconSizes />);

Named Chevron Up Icon

1const NamedChevronUpIcon = () => (
2  <ChevronUpIcon titleAccess="Chevron Up" />
3);
4
5render(<NamedChevronUpIcon />);

Properties

`ChevronUpIcon` props

Prop	Type	Default	Description
`className`	`string`	—	Additional class names to merge with the component root element
`ref`	`Ref<SVGSVGElement>`	—	Ref to the root svg element
`size`	`"sm" \| "md" \| "lg" \| "xl"`	—	Controls width/height; defaults to md
`titleAccess`	`string`	—	Accessible name of the icon, rendered as the svg's `<title>`. When set the icon is exposed as an image with this name; without it (and without `aria-label` or `aria-labelledby`) the icon is decorative and hidden from assistive technology. Pass an already translated string.

Functions

`ChevronUpIcon` function

The chevron up icon: a stroke glyph on a 24 by 24 grid that inherits the text colour.

ChevronUpIcon(props: import("@behivetech/icons.base").IconBaseProps): import("react").ReactNode

Parameter	Type	Default	Description
`props`	`import("@behivetech/icons.base").IconBaseProps`	—	—

Returns import("react").ReactNode