@tabula/ui-node-icon
v7.1.0
Published
Icons for nodes
Downloads
373
Maintainers
Readme
@tabula/ui-node-icon
Icons for nodes.
Installation
Use the package manager pnpm to install @tabula/ui-node-icon
.
pnpm add @tabula/ui-node-icon
Usage
We provide three size of icons:
- small: monochrome instead of branded icons, 16x16px;
- medium: coloured, 24x24px;
- large coloured, 32x32px.
Small icons
You can import a small icon in the following way:
import { UiInnerJoinSIcon } from '@tabula/ui-node-icon';
Or you can import all small icons:
import { UiNodeSIcons } from '@tabula/ui-node-icon';
const ComponentWithIcon = () => <UiNodeSIcons.UiInnerJoinSIcon />;
Medium icons
You can import a small icon in the following way:
import { UiInnerJoinMIcon } from '@tabula/ui-node-icon';
Or you can import all small icons:
import { UiNodeMIcons } from '@tabula/ui-node-icon';
const ComponentWithIcon = () => <UiNodeMIcons.UiInnerJoinMIcon />;
Large icons
You can import a small icon in the following way:
import { UiInnerJoinLIcon } from '@tabula/ui-node-icon';
Or you can import all small icons:
import { UiNodeLIcons } from '@tabula/ui-node-icon';
const ComponentWithIcon = () => <UiNodeMIcons.UiInnerJoinLIcon />;
Disabled State
Medium and large icons have disabled state. They have grayscale colors in disabled state.
Disabled state can be activated in two ways: explicit providing of the isDisabled
property,
or when a parent which contains an icon is disabled (for example, disabled button).
The first way is explicit providing of the isDisabled
property:
import { UiInnerJoinMIcon } from '@tabula/ui-node-icon';
const DisabledIcon = () => <UiInnerJoinMIcon isDisabled />
The second way is when a parent which contains the icon is disabled:
import { UiInnerJoinMIcon } from '@tabula/ui-node-icon';
const DisabledParentWithIcon = () => (
<button disabled>
<div>
<UiInnerJoinMIcon />
</div>
</button>
);
License
This project is ISC licensed.