React usage

Named importsCopy Anchor Link

Each icon has a PascalCase component name ending in Icon.

import { HomeIcon, ShopIcon, CashRegisterIcon } from "solite-icons";

export function Toolbar() {
  return (
    <nav aria-label="Main navigation">
      <a href="/">
        <HomeIcon size={20} /> Home
      </a>
      <a href="/shops">
        <ShopIcon size={20} /> Shops
      </a>
      <a href="/pos">
        <CashRegisterIcon size={20} /> Register
      </a>
    </nav>
  );
}

Named imports let your production bundler remove unused icons. A direct module import is also available:

import ShopIcon from "solite-icons/icons/shop";

For a name stored in data or configuration, use the separate dynamic renderer.

Component propsCopy Anchor Link

Standard SVG props and aria-* / data-* attributes are forwarded. Explicit width and height props override size.

An icon-only buttonCopy Anchor Link

Name the button so people using assistive technology can understand its action.

import { SettingsIcon } from "solite-icons";

<button type="button" aria-label="Open settings">
  <SettingsIcon size={20} />
</button>;

Icons are decorative by default. The button supplies the accessible name. Read the accessibility guide before using an icon as the only source of information.

Refs and reusable propsCopy Anchor Link

import { useRef } from "react";
import { ShopIcon, type SoliteIconProps } from "solite-icons";

export function ShopMark(props: SoliteIconProps) {
  const ref = useRef<SVGSVGElement>(null);
  return <ShopIcon {...props} ref={ref} />;
}

Server rendering and Next.jsCopy Anchor Link

Icons support server-rendered HTML. The published React modules preserve their "use client" boundary for Next.js. Import the components normally; add your own client boundary when your containing component uses hooks or event handlers.

CommonJSCopy Anchor Link

const { ShopIcon } = require("solite-icons");
const { SoliteIcon } = require("solite-icons/dynamic");

Separate ESM and CommonJS type declarations are included.