@onimuxha/oxycons 1.0.3 → 1.0.5

package/lib/icons/create-icon.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import React from "react";
-import { Icon } from "./icon";
-import { IconMetadata, IconProps } from "./types";
-
-/**
- * Create a reusable icon component from icon metadata
- *
- * @param metadata - Icon metadata including SVG path data (single or multiple) or full SVG code
- * @returns A React component that renders the icon with support for size and color customization
- *
- * @example
- * ```tsx
- * // Single path with size and color customization
- * const HomeIcon = createIcon({
- *   name: 'home',
- *   viewBox: '0 0 24 24',
- *   path: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z',
- *   categories: ['navigation'],
- * });
- * <HomeIcon size={24} className="text-red-500" />
- *
- * // Multiple paths with properties
- * const ComplexIcon = createIcon({
- *   name: 'logo',
- *   viewBox: '0 0 100 100',
- *   paths: [
- *     { d: 'M10 10h20v20H10z', fill: '#000', opacity: 0.45 },
- *     { d: 'M40 40h20v20H40z', fill: '#000', opacity: 0.6 },
- *   ],
- * });
- *
- * // Full SVG code
- * const LogoIcon = createIcon({
- *   name: 'logo',
- *   viewBox: '0 0 100 100',
- *   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="#000" d="M10 10h20v20H10z" opacity="0.45" /></svg>',
- * });
- * <HomeIcon size={24} />
- * ```
- */
-export function createIcon(metadata: IconMetadata) {
-  const IconComponent = React.forwardRef<SVGSVGElement, IconProps>(
-    (props, ref) => {
-      const { size = 24, className = "", ...restProps } = props;
-      const sizeValue =
-        typeof size === "number" ? size : parseInt(size as string, 10);
-
-      // Handle full SVG code
-      if (metadata.svg) {
-        return (
-          <svg
-            ref={ref}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox={metadata.viewBox}
-            width={sizeValue}
-            height={sizeValue}
-            className={`inline-block ${className}`}
-            style={{ color: "currentColor" }}
-            dangerouslySetInnerHTML={{ __html: metadata.svg }}
-            {...restProps}
-          />
-        );
-      }
-
-      // Handle both single path and multiple paths
-      const hasPaths = metadata.paths && metadata.paths.length > 0;
-      const singlePath = metadata.path;
-
-      return (
-        <Icon {...props} ref={ref} viewBox={metadata.viewBox || "0 0 24 24"}>
-          {hasPaths ? (
-            // Render multiple paths with their individual properties
-            metadata.paths!.map((pathData, index) => (
-              <path
-                key={index}
-                d={pathData.d}
-                fill={pathData.fill || "currentColor"}
-                stroke={pathData.stroke}
-                fillOpacity={pathData.fillOpacity}
-                strokeOpacity={pathData.strokeOpacity}
-                opacity={pathData.opacity}
-                strokeWidth={pathData.strokeWidth}
-              />
-            ))
-          ) : (
-            // Render single path
-            <path d={singlePath} fill="currentColor" />
-          )}
-        </Icon>
-      );
-    },
-  );
-
-  IconComponent.displayName = `${metadata.name}Icon`;
-
-  // Attach metadata to the component so the registry can read categories, keywords, etc.
-  try {
-    // Use a non-enumerable property to avoid interfering with React internals
-    Object.defineProperty(IconComponent, "metadata", {
-      value: metadata,
-      writable: false,
-      configurable: true,
-      enumerable: false,
-    });
-  } catch (e) {
-    // Fallback if defineProperty fails in some environments
-    (IconComponent as any).metadata = metadata;
-  }
-
-  return IconComponent;
-}
-
-/**
- * Create multiple icon components from metadata
- *
- * @param metadataMap - Object mapping icon names to metadata
- * @returns Object with icon components
- *
- * @example
- * ```tsx
- * const icons = createIcons({
- *   home: ICON_DATA.home,
- *   search: ICON_DATA.search,
- * });
- * <icons.home size={24} />
- * ```
- */
-export function createIcons(
-  metadataMap: Record<string, IconMetadata>,
-): Record<string, React.FC<IconProps>> {
-  const icons: Record<string, React.FC<IconProps>> = {};
-
-  Object.entries(metadataMap).forEach(([key, metadata]) => {
-    icons[key] = createIcon(metadata);
-  });
-
-  return icons;
-}

package/lib/icons/icon.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import React from 'react';
-import { IconProps } from './types';
-
-/**
- * Base Icon Component
- * Provides a consistent interface for rendering SVG icons
- */
-export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
-  (
-    {
-      size = 24,
-      filled = false,
-      className,
-      children,
-      'aria-label': ariaLabel,
-      viewBox = '0 0 24 24',
-      ...props
-    },
-    ref
-  ) => {
-    // Convert size to string if it's a number
-    const sizeValue = typeof size === 'number' ? `${size}px` : size;
-
-    return (
-      <svg
-        ref={ref}
-        width={sizeValue}
-        height={sizeValue}
-        viewBox={viewBox}
-        className={`inline-block ${className || ''}`}
-        aria-label={ariaLabel}
-        role={ariaLabel ? 'img' : 'presentation'}
-        {...props}
-      >
-        {children}
-      </svg>
-    );
-  }
-);
-
-Icon.displayName = 'Icon';

package/lib/icons/registry.ts

@@ -1,127 +0,0 @@
-import * as Programming from "./categories/programming";
-import * as App from "./categories/app";
-import * as DesignTools from "./categories/design-tools";
-import * as AI from "./categories/ai";
-import * as Tools from "./categories/tools";
-import * as Framework from "./categories/framework";
-import * as Company from "./categories/company";
-
-// Compile all icons from all categories
-export const Oxycons = {
-  // Programming
-  ...Programming,
-  // App
-  ...App,
-  // Design Tools
-  ...DesignTools,
-  // AI
-  ...AI,
-  // Tools
-  ...Tools,
-  // Framework
-  ...Framework,
-  // Company
-  ...Company,
-};
-
-export type OxyconsType = typeof Oxycons;
-
-// Get all icon names
-export const getIconNames = (): string[] => {
-  return Object.keys(Oxycons);
-};
-
-// Get all categories with their icons
-export const getIconsByCategory = () => {
-  // Start with empty arrays for every known category
-  const buckets: Record<string, any[]> = {
-    programming: [],
-    app: [],
-    "design-tools": [],
-    ai: [],
-    tools: [],
-    framework: [],
-  };
-
-  // Merge all exports into a single map to iterate
-  const all: Record<string, any> = {
-    ...Programming,
-    ...App,
-    ...DesignTools,
-    ...AI,
-    ...Tools,
-    ...Framework,
-    ...Company,
-  };
-
-  Object.entries(all).forEach(([exportName, component]) => {
-    if (!component) return;
-
-    // Try to read metadata attached to the component (created in createIcon)
-    const meta = (component as any).metadata;
-
-    // Prepare an item that includes the export name and the component
-    const item = { name: exportName, component };
-
-    // If metadata includes categories, add the component into each listed category
-    if (meta && Array.isArray(meta.categories) && meta.categories.length > 0) {
-      meta.categories.forEach((cat: string) => {
-        if (!buckets[cat]) buckets[cat] = [];
-        buckets[cat].push(item);
-      });
-      return;
-    }
-
-    // Fallback: add to framework by default
-    buckets["framework"].push(item);
-  });
-
-  return buckets;
-};
-
-// Get category info
-export const getCategoryInfo = (category: string) => {
-  const info: Record<string, { name: string; description: string }> = {
-    programming: {
-      name: "Programming",
-      description: "Programming languages and web technologies",
-    },
-    app: {
-      name: "App",
-      description: "Application and device related icons",
-    },
-    "design-tools": {
-      name: "Design Tools",
-      description: "Design and creative software icons",
-    },
-    ai: {
-      name: "AI",
-      description: "Artificial intelligence and machine learning icons",
-    },
-    tools: {
-      name: "Tools",
-      description: "Development and utility tools icons",
-    },
-    framework: {
-      name: "Framework",
-      description: "Web frameworks and libraries icons",
-    },
-    company: {
-      name: "Company",
-      description: "Tech companies and brands icons",
-    },
-  };
-
-  return info[category];
-};
-
-// All categories
-export const CATEGORIES = [
-  "programming",
-  "app",
-  "design-tools",
-  "ai",
-  "tools",
-  "framework",
-  "company",
-];

package/lib/icons/types.ts

@@ -1,69 +0,0 @@
-import React from "react"
-/**
- * Oxycons Icon Library Types
- * Core type definitions for the icon system
- */
-
-export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-  /** Size of the icon in pixels */
-  size?: number | string;
-  /** Whether the icon is filled */
-  filled?: boolean;
-  /** Custom CSS class for styling */
-  className?: string;
-  /** ARIA label for accessibility */
-  'aria-label'?: string;
-}
-
-export interface PathData {
-  /** SVG path d attribute */
-  d: string;
-  /** Fill color for the path */
-  fill?: string;
-  /** Stroke color for the path */
-  stroke?: string;
-  /** Fill opacity */
-  fillOpacity?: number;
-  /** Stroke opacity */
-  strokeOpacity?: number;
-  /** Opacity for the entire path */
-  opacity?: number;
-  /** Stroke width */
-  strokeWidth?: string | number;
-}
-
-export interface IconMetadata {
-  /** Icon name/identifier */
-  name: string;
-  /** SVG viewBox attribute */
-  viewBox?: string;
-  /** SVG path data - supports single string or array of paths */
-  path?: string;
-  /** Multiple paths for complex icons */
-  paths?: PathData[];
-  /** Full SVG code as a string */
-  svg?: string;
-  /** Whether the icon has a filled variant */
-  hasFilled?: boolean;
-  /** Icon categories for organization */
-  categories?: string[];
-  /** Search keywords for the icon */
-  keywords?: string[];
-  /** Icon version */
-  version?: string;
-}
-
-export type IconComponent = React.FC<IconProps>;
-
-export interface IconLibraryConfig {
-  /** Library name */
-  name: string;
-  /** Library version */
-  version: string;
-  /** Library description */
-  description: string;
-  /** Total number of icons */
-  totalIcons: number;
-  /** Available categories */
-  categories: string[];
-}

package/lib/icons.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#000000"
-    style="opacity:1;">
-    <path
-        d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978c.401 0 .955.042 1.468.103a9 9 0 0 1 1.141.195v3.325a9 9 0 0 0-.653-.036a27 27 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.7 1.7 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103l-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647" />
-</svg>

package/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}