dmonphx

0 Followers · 0 Following

• Joined on 2026-02-19

Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/icon-service (0.2.0)

Published 2026-05-28 07:20:32 -07:00 by dmonphx

Installation

Set up this registry in your project .npmrc file:

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/

To install the package using npm, run the following command:

npm install @phoenix-tekhne/icon-service@0.2.0

or add it to the package.json file:

"@phoenix-tekhne/icon-service": "0.2.0"

For more information on the npm registry, see the documentation.

About this package

@phoenix-tekhne/icon-service

Framework-agnostic icon service for the Phoenix Tekhne design system. Provides icon search, set management, snippet generation, and theme-aware recommendations.

Purpose

Core service layer for icon operations — search, categorization, style filtering, attribution, and Phoenix component snippet generation. Extends TekhneService from @phoenix-tekhne/pattern-core for lifecycle management and logging.

Key Files

• IconService.ts — Main service class extending TekhneService
• IconSearchEngine.ts — Pure TS search engine (paginated, style/category filtering)
• staticLoader.ts — Build-time icon set loader (5 sets bundled)
• PhoenixSnippet.ts — React snippet generator + AI context output
• ThemeRulesEngine.ts — Theme-aware icon color recommendations (reads CSS custom properties)
• types.ts — Core type definitions

Dependencies

• @phoenix-tekhne/pattern-core — TekhneService base class, Logger
• @iconify/utils — Icon set parsing (parseIconSet)
• @iconify-json/{mdi,ph,lucide,heroicons,tabler} — Static icon data (peer dependency for consumers)

Usage

import { IconService } from '@phoenix-tekhne/icon-service';

const service = new IconService({ name: 'MyAppIconService' });
await service.initialize();

// Search icons
const results = service.search('home');
console.log(results.visibleResults);
console.log(results.categories);

// Paginate with loadMore
if (results.hasMore) {
  const more = results.loadMore();
  console.log(more.visibleResults);
}

// Generate Phoenix React snippet
const snippet = service.generateSnippet({
  iconName: 'home',
  prefix: 'mdi',
  size: 24,
  color: 'var(--color-primary)',
  theme: 'erebohkne',
});
console.log(snippet.jsx);
console.log(snippet.context.license);

// Get AI context for "Copy for AI Agent"
console.log(service.generateAIContext(snippet));

// Theme-aware recommendations
const colors = service.getThemeColors('erebohkne');
console.log(colors.accent); // #03A9F4

await service.destroy();

Testing

npm run test -w @phoenix-tekhne/icon-service
npx vitest run packages/icon-service/src/IconSearchEngine.test.ts

Known Limitations

• ThemeRulesEngine requires a browser environment for CSS custom property reading; falls back to hardcoded defaults in Node/tests
• staticLoader requires @iconify-json/* packages installed at build time for offline mode
• Attribution resolution depends on @phoenix-tekhne/react-graphikos/attribution at runtime

Dependencies

Dependencies

ID	Version
@iconify/types	^2.0.0
@iconify/utils	^2.1.5
@phoenix-tekhne/pattern-core	0.2.0

Development Dependencies

ID	Version
@types/react	^19.2.14
typescript	^5.0.0
vite	^5.0.0
vite-plugin-dts	4.5.4
vitest	^3.0.0

Peer Dependencies

ID	Version
react	>=19.0.0

Optional Dependencies

ID	Version
@iconify-json/heroicons	^1.2.0
@iconify-json/lucide	^1.2.0
@iconify-json/mdi	^1.2.0
@iconify-json/ph	^1.2.0
@iconify-json/tabler	^1.2.0

Details

npm

2026-05-28 07:20:32 -07:00

5

latest

20 KiB

Assets (1)

icon-service-0.2.0.tgz 20 KiB

Versions (1) View all

0.2.0 2026-05-28