@nice2dev/icons-cursor

Cursor and pointer icons for NiceToDev UI - system cursors, tools, and selection indicators.

Installation

npm install @nice2dev/icons-cursor

Usage

import { Pointer, Crosshair, ZoomIn, Wait } from '@nice2dev/icons-cursor';

function App() {
  return (
    <div>
      <Pointer size={24} />
      <Crosshair size={24} color="#3b82f6" />
      <ZoomIn variant="outlined" />
      <Wait animation="spin" />
    </div>
  );
}

Categories

Pointer Icons (15)

Basic cursor shapes and resize handles.

import {
  Pointer,
  PointerFinger,
  Crosshair,
  Move,
  ResizeN,
  ResizeS,
  ResizeE,
  ResizeW,
  ResizeNE,
  ResizeNW,
  ResizeSE,
  ResizeSW,
  ResizeHorizontal,
  ResizeVertical,
  ResizeAll,
} from '@nice2dev/icons-cursor';

Selection Icons (15)

Text/cell selection and drag cursors.

import {
  TextCursor,
  TextSelect,
  CellSelection,
  ColumnSelect,
  RowSelect,
  RangeSelect,
  Grab,
  Grabbing,
  Drag,
  DragHandle,
  Lasso,
  MagicWand,
  SelectAll,
  Deselect,
  InvertSelection,
} from '@nice2dev/icons-cursor';

Tool Icons (15)

Drawing and editing tool cursors.

import {
  ZoomIn,
  ZoomOut,
  Rotate,
  Pan,
  Draw,
  Brush,
  Eraser,
  Eyedropper,
  Bucket,
  Pen,
  Line,
  Rectangle,
  Ellipse,
  Polygon,
  Crop,
} from '@nice2dev/icons-cursor';

Status Icons (15)

System state indicators.

import {
  Wait,
  Progress,
  Forbidden,
  NotAllowed,
  Help,
  ContextMenu,
  Alias,
  Copy,
  NoDrop,
  Loading,
  Busy,
  Default,
  Auto,
  None,
  Inherit,
} from '@nice2dev/icons-cursor';

Tree-Shakable Imports

Import only what you need:

import { Pointer, Crosshair } from '@nice2dev/icons-cursor/pointers';
import { TextCursor, Grab } from '@nice2dev/icons-cursor/selection';
import { ZoomIn, Brush } from '@nice2dev/icons-cursor/tools';
import { Wait, Help } from '@nice2dev/icons-cursor/status';

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | ---------------- | --------------------------- | | size | number \| string | 24 | Icon size in pixels | | color | string | 'currentColor' | Icon color | | secondaryColor | string | - | Secondary color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Rendering variant | | animation | CursorIconAnimation | - | Animation effect | | animationDuration | number | 1000 | Animation duration (ms) | | title | string | - | Accessibility title | | desc | string | - | Accessibility description |

Animations

Available SMIL-based animations:

• pulse - Opacity pulsing
• grow - Scale up and down
• shake - Horizontal shaking
• spin - Continuous rotation
• bounce - Vertical bouncing
• fade - Fade in and out
• flip - 180° rotation
• slide - Horizontal sliding
• glow - Drop shadow glow

<Wait animation="spin" animationDuration={500} />
<Progress animation="pulse" />
<Loading animation="spin" />

Variants

// Solid fill (default)
<Pointer variant="filled" />

// Stroke outline only
<Pointer variant="outlined" />

// Background fill + stroke outline
<Pointer variant="duotone" secondaryColor="#e5e7eb" />

Custom Icons

Create custom cursor icons:

import { createCursorIcon } from '@nice2dev/icons-cursor';

const MyCustomCursor = createCursorIcon(
  'MyCustomCursor',
  'M5.5 3.21V20.8l5.25-5.25h6.56L5.5 3.21z',
  '#3b82f6', // optional default color
);

<MyCustomCursor size={24} />;

CSS Cursor Integration

Use icons as actual CSS cursors:

import { Pointer } from '@nice2dev/icons-cursor';
import { renderToStaticMarkup } from 'react-dom/server';

// Convert to data URL
const svgString = renderToStaticMarkup(<Pointer size={24} color="#000" />);
const dataUrl = `data:image/svg+xml,${encodeURIComponent(svgString)}`;

// Use as CSS cursor
element.style.cursor = `url("${dataUrl}"), auto`;

Use Cases

• Image editors: Drawing tools, selection tools
• Spreadsheet apps: Cell/row/column selection
• Design tools: Transform handles, zoom controls
• Loading states: Wait, progress, busy indicators
• Accessibility: Help, context menu indicators

TypeScript

Full TypeScript support:

import type {
  CursorIconProps,
  CursorIconAnimation,
  CursorIconVariant,
  PointerIconName,
  SelectionIconName,
  ToolIconName,
  StatusIconName,
} from '@nice2dev/icons-cursor';

License

MIT © NiceToDev