Platform Assets

A centralized, strongly-typed collection of infrastructure and platform engineering assets for React applications. Designed for performance, modularity, and future extensibility.

• Modular: Assets are grouped by domain namespace (e.g., k8s).
• Tree-shakeable: Only bundle the specific assets you import.
• Zero-runtime overhead: SVG paths are inlined; no external network requests.
• TypeScript: First-class type support with JSDoc visual previews in your IDE.

Installation

npm install @kunobi/platform-assets

Available Assets

Kubernetes (k8s)

Official Kubernetes community icons covering resources, control plane components, and infrastructure.

Future updates will include additional domains (e.g., cloud providers, infrastructure logos).

Usage

Assets are imported through their specific domain namespace.

Individual Components (Recommended)

Import specific icons for the smallest bundle size.

import { k8s } from '@kunobi/platform-assets';

function Status() {
  return (
    <div className="flex gap-4">
      {/* Kubernetes Pod Icon */}
      <k8s.PodIcon size={32} />
      
      {/* Labeled Variant */}
      <k8s.DeploymentIcon variant="labeled" size={48} />
    </div>
  );
}

Dynamic Rendering

Use the generic Icon component from a namespace when rendering data-driven UIs (e.g., dashboards, topological maps).

import { k8s } from '@kunobi/platform-assets';

function ResourceCard({ type }: { type: k8s.K8sResourceType }) {
  return (
    <div className="card">
      <k8s.Icon type={type} size={24} />
      <span>{k8s.K8S_RESOURCE_META[type].label}</span>
    </div>
  );
}

API

Props

Most icon components accept the standard IconProps:

Prop	Type	Default	Description
size	number	24	Size in pixels (width & height).
variant	'unlabeled' | 'labeled'	'unlabeled'	Use 'labeled' to include the official text label.
className	string	undefined	CSS classes to apply to the container.
style	React.CSSProperties	undefined	Inline styles.

Metadata

Access human-readable labels and categories for building UIs.

import { k8s } from '@kunobi/platform-assets';

console.log(k8s.K8S_RESOURCE_META['cronjob']);
// Output: { label: 'CronJob', shortLabel: 'cronjob', category: 'resource' }

License

Library license: Apache-2.0
Icon copyrights retain their original licenses (e.g., CC BY 4.0 for Kubernetes icons).