@slatico/react · v0.1.0

React & Next.js Integration Guide

@slatico/react provides tree-shakeable, SSR-safe React 18 & 19 SVG components for all 27 Slatico icon families across all 7 official styles (189 total variants).

1. Installation

Terminal (npm / pnpm / yarn)

npm install @slatico/react
# or
pnpm add @slatico/react
# or
yarn add @slatico/react

2. Monochrome, Duotone & Dual-Color Usage

Import either unified <NameIcon /> components (which accept a variant prop) or explicit style components such as BellRegularIcon, ShieldCheckDuotoneIcon, and WalletColorIcon:

AppHeader.tsx

import {
  BellIcon,
  ShieldCheckDuotoneIcon,
  WalletColorIcon,
  ArrowUpRightBoldIcon
} from "@slatico/react";

export function AppHeader() {
  return (
    <header className="flex items-center gap-4">
      {/* 1. Regular monochrome icon (defaults to size=24, color="currentColor") */}
      <BellIcon variant="regular" size={24} color="currentColor" />

      {/* 2. Customized sizing and explicit hex color */}
      <ArrowUpRightBoldIcon size={32} color="#010520" />

      {/* 3. Duotone icon with primary color, secondaryColor & secondaryOpacity */}
      <ShieldCheckDuotoneIcon
        size={28}
        color="#010520"
        secondaryColor="#FF6040"
        secondaryOpacity={0.25}
        title="Security Verified"
      />

      {/* 4. Color icon with default brand palette (#FF6040 primary + #000000 secondary) */}
      <WalletColorIcon size={28} />

      {/* 5. Color icon with two custom colors (color + secondaryColor) */}
      <BellIcon
        variant="color"
        size={28}
        color="#FF6040"
        secondaryColor="#010520"
        title="Notifications"
      />
    </header>
  );
}

3. Subpath Imports & Tree Shaking

@slatico/react sets "sideEffects": false and exposes per-icon subpath modules under @slatico/react/icons/<slug> for instant dev-server startup and minimal production bundles:

SubpathImportExample.tsx

import { BellIcon, BellDuotoneIcon } from "@slatico/react/icons/bell";
import { ArrowUpRightIcon } from "@slatico/react/icons/arrow-up-right";

export function ActionBadge() {
  return (
    <span className="inline-flex items-center gap-2">
      <BellDuotoneIcon size={20} color="#010520" secondaryColor="#FF6040" />
      <ArrowUpRightIcon variant="bold" size={16} />
    </span>
  );
}

4. Accessibility Usage

When title is omitted, the component renders aria-hidden="true" and focusable="false" so decorative icons inside buttons or links are ignored by screen readers. Pass title when the icon conveys standalone semantic meaning:

AccessibleIcons.tsx

import { BellIcon, MagnifyingGlassIcon } from "@slatico/react";

export function AccessibleIcons() {
  return (
    <>
      {/* Decorative icon next to visible button text (aria-hidden="true") */}
      <button type="button" className="inline-flex items-center gap-2">
        <MagnifyingGlassIcon size={18} />
        <span>Search Icons</span>
      </button>

      {/* Standalone semantic icon (role="img" + aria-label + <title>) */}
      <BellIcon variant="duotone" size={24} title="3 Unread Notifications" />
    </>
  );
}

5. Complete Props Reference (`SlaticoIconProps`)

All components forward ref to the root SVGSVGElement and accept standard React SVGProps<SVGSVGElement> in addition to:

Prop	Type	Default	Description
variant	"thin" \| "light" \| "regular" \| "bold" \| "fill" \| "duotone" \| "color"	"regular"	Selects the architectural style on unified `*Icon` components.
size	number \| string	24	Sets SVG width and height in pixels (`24`) or CSS units (`"1.5rem"`).
color	string	"currentColor"	Primary foreground color for monochrome and Duotone icons, or custom primary fill (`--slatico-primary-color`, default `#FF6040`) for `color` icons.
secondaryColor	string	undefined	Binds `--slatico-secondary-color` for `duotone` and `color` (default `#000000`) icons.
secondaryOpacity	number \| string	0.2 (in SVG)	Binds `--slatico-secondary-opacity` for `duotone` secondary layers.
title	string	undefined	Accessible label. When provided, sets `role="img"`, `aria-label`, and renders a `<title>` node; otherwise sets `aria-hidden="true"`.