@fibery/icons

Plain React icons for Fibery. Each icon is an SVG component painted with currentColor, so Tailwind or any other CSS color works.

Usage

import {AddIcon} from "@fibery/icons/react/add";

<AddIcon />;
<AddIcon size={16} className="text-muted-foreground" />;
<AddIcon color="#123456" aria-label="Add" />;

Import the icon module you render. There is no package barrel. Artwork AST modules are @fibery/icons/ast/add.

Props

| Prop | Default | Description | | --------------- | ---------------- | ---------------------------------------------------------------------------------------------------- | | size | 20 | Sets the SVG width and height. | | color | "currentColor" | CSS color. The default leaves color to className or the parent. A set value wins over the class. | | className | | Passed through to the root SVG. | | ref | | The root SVGSVGElement. | | other SVG props | | Passed through to the root SVG. |

aria-hidden is true by default. A non-empty aria-label removes aria-hidden and sets role="img".

Integration logos keep the fills baked into the artwork. color does not recolor those paths.

createIcon

createIcon builds another icon with the same props:

import {createIcon} from "@fibery/icons/src/create-icon";

export const Mark = createIcon("mark", <path d="M4 10h12" />);

The viewBox argument defaults to 0 0 20 20. Pass it only when the artwork uses another box.