Next.js

@ikions/react works with the App Router and the Pages Router without configuration.

npm install @ikions/react

Server components#

Icons have no client-side state, so they render inside Server Components and add no JavaScript to the page on their own:

// app/page.tsx (a Server Component)
import { SparklesIcon } from "@ikions/react";

export default function Page() {
  return (
    <h1>
      <SparklesIcon size={20} variant="filled" /> What's new
    </h1>
  );
}

The generated markup is plain SVG, so it is part of the static HTML and is visible before hydration.

Client components#

Inside "use client" components you can switch variants with state:

"use client";

import { useState } from "react";
import { StarIcon } from "@ikions/react";

export function Rating() {
  const [on, setOn] = useState(false);
  return (
    <button aria-pressed={on} onClick={() => setOn(!on)}>
      <StarIcon variant={on ? "filled" : "outline"} title={on ? "Starred" : "Star"} />
    </button>
  );
}

Bundle size#

Only imported icons end up in your bundles. If you render icons by name from data, map names to components explicitly instead of importing the whole package dynamically:

import { HomeIcon, SearchIcon, SettingsIcon } from "@ikions/react";

const icons = { home: HomeIcon, search: SearchIcon, settings: SettingsIcon };

Metadata and SEO#

Icons are inline SVG and do not affect your metadata exports. For favicons or Open Graph images, use the raw SVG files from @ikions/icons.