dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/react-graphikos (0.2.0)

Published 2026-05-28 07:21:45 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/react-graphikos@0.2.0
"@phoenix-tekhne/react-graphikos": "0.2.0"

About this package

@phoenix-tekhne/react-graphikos

Graphics and icon components for the Phoenix Tekhne Design System.

Overview

Graphikos (γραφικός — "graphic/visual" in Greek) provides icon components and graphic utilities. It offers two icon systems:

  1. Heroicons (Icon.Outline / Icon.Solid) — Curated, tree-shakeable, static icon components
  2. Iconify (IconifyIcon) — Broad access to 200+ icon sets (7,000+ icons), with attribution and offline support

Components

Heroicons (Static Icons)

All Heroicons React exports are re-exported with consistent sizing:

import { Icon } from "@phoenix-tekhne/react-graphikos";

function Navigation() {
  return (
    <nav>
      <Icon.Outline.HomeIcon className="w-6 h-6" />
      <Icon.Solid.UserIcon className="w-5 h-5" />
    </nav>
  );
}

Icon Sets:

Set Size Style
Outline 24×24 Stroke-based
Solid 24×24 Filled
Mini 20×20 Compact

IconifyIcon (Dynamic Icons)

Access any Iconify icon set with Phoenix token sizing, accessibility, and attribution:

import { IconifyIcon } from "@phoenix-tekhne/react-graphikos";

function App() {
  return (
    <div>
      <IconifyIcon icon="mdi:home" size="lg" aria-label="Home" />
      <IconifyIcon icon="phosphor:gear-six" size="md" />
      <IconifyIcon icon="lucide:settings" size={32} />
    </div>
  );
}

Size Scale:

Size Pixels Use Case
xs 12 Inline text icons, badges
sm 16 Small buttons, compact density
md 20 Default (standard density)
lg 24 Prominent icons (matches Heroicons default)
xl 32 Section headers, feature cards
2xl 48 Large display, hero sections

Offline / Air-Gapped Mode

For enterprise environments without internet access, import the registration module at your app entry:

import "@phoenix-tekhne/react-graphikos/registerIcons";

This preloads all installed @iconify-json/* sets via addCollection(), ensuring zero network requests.

Attribution (License Compliance)

Phoenix Tekhne requires attribution for all consumed icons. Use these utilities:

import {
  getIconAttribution,
  useIconAttribution,
  useAllAttributions,
} from "@phoenix-tekhne/react-graphikos";

const attr = getIconAttribution("mdi:home");
// → { setName: "Material Design Icons", author: "Pictogrammers", license: "Apache 2.0", ... }

function LicensesPage() {
  const { attributions } = useAllAttributions();
  return (
    <ul>
      {Array.from(attributions.values()).map((a) => (
        <li key={a.setPrefix}>{a.setName} by {a.author} — {a.license}</li>
      ))}
    </ul>
  );
}

Icon Set Attribution Table:

Icon Set Prefix Author License Source
Heroicons — (direct) Tailwind Labs MIT https://heroicons.com
Material Design Icons mdi Pictogrammers Apache-2.0 https://github.com/Templarian/MaterialDesign
Phosphor Icons ph Phosphor Icons MIT https://phosphoricons.com
Lucide lucide Lucide Contributors ISC https://lucide.dev

Installation

npm install @phoenix-tekhne/react-graphikos

# Optional: Install icon sets for offline/air-gapped use
npm install @iconify-json/mdi @iconify-json/phosphor @iconify-json/lucide

Dependencies

  • @heroicons/react — Curated Heroicons (MIT license)
  • @iconify/react — Iconify React component (MIT license)
  • @iconify/utils — Iconify utility functions (MIT license)
  • React >= 19.0.0
  • React DOM >= 19.0.0

Usage Patterns

With Buttons

import { Button } from "@phoenix-tekhne/react-tupos";
import { IconifyIcon } from "@phoenix-tekhne/react-graphikos";

<Button>
  <IconifyIcon icon="mdi:plus" size="sm" />
  Add Item
</Button>

Status Indicators

import { IconifyIcon } from "@phoenix-tekhne/react-graphikos";

<span className="text-success">
  <IconifyIcon icon="mdi:check-circle" size="md" />
</span>

Dynamic Icons from Data

import { IconifyIcon } from "@phoenix-tekhne/react-graphikos";

const menuItems = [
  { label: "Home", icon: "mdi:home" },
  { label: "Settings", icon="mdi:cog" },
  { label: "Profile", icon: "mdi:account" },
];

menuItems.map(({ label, icon }) => (
  <IconifyIcon icon={icon} size="md" aria-label={label} />
));

Documentation

Contributing

See AGENTS.md in repository root for contribution guidelines.

License

Copyright © 2026 Phoenix Inceptions Media LLC. All rights reserved.

Icon sets consumed by this package are subject to their respective licenses:

  • Heroicons: MIT (Tailwind Labs)
  • Material Design Icons: Apache-2.0 (Pictogrammers)
  • Phosphor Icons: MIT (Phosphor Icons)
  • Lucide: ISC (Lucide Contributors)

Attribution to original icon set authors is required when icons are displayed in applications.

Dependencies

Dependencies

ID Version
@heroicons/react ^2.1.3
@iconify/react ^5.2.1

Development Dependencies

ID Version
@iconify-json/heroicons ^1.2.3
@iconify-json/lucide ^1.1.0
@iconify-json/mdi ^1.1.0
@iconify-json/ph ^1.2.2
@iconify-json/tabler ^1.2.35
@types/react ^19.2.14
typescript ^5.0.0
vite ^5.0.0
vite-plugin-dts 4.5.4
Details
npm
2026-05-28 07:21:45 -07:00
7
latest
190 KiB
Assets (1)
react-graphikos-0.2.0.tgz 190 KiB
Versions (1) View all
0.2.0 2026-05-28