@onimuxha/oxycons 1.0.1

package/lib/icons/categories/tools/git.ts

@@ -0,0 +1,12 @@
+import { createIcon } from "../../create-icon";
+
+export const Git = createIcon({
+  name: "Git",
+  viewBox: "0 0 24 24",
+  svg: `<svg fill="currentColor">
+    <path
+        d="M23.546 10.93L13.067.452a1.55 1.55 0 0 0-2.188 0L8.708 2.627l2.76 2.76a1.838 1.838 0 0 1 2.327 2.341l2.658 2.66a1.838 1.838 0 0 1 1.9 3.039a1.837 1.837 0 0 1-2.6 0a1.85 1.85 0 0 1-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348a1.85 1.85 0 0 1 0 2.6a1.844 1.844 0 0 1-2.609 0a1.834 1.834 0 0 1 0-2.598c.182-.18.387-.316.605-.406V8.835a1.834 1.834 0 0 1-.996-2.41L7.636 3.7L.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477a1.545 1.545 0 0 0 2.186 0l10.43-10.43a1.544 1.544 0 0 0 0-2.187" />
+</svg>`,
+  categories: ["tools", "development"],
+  keywords: ["git", "version", "control", "github"],
+});

package/lib/icons/categories/tools/github.ts

@@ -0,0 +1,12 @@
+import { createIcon } from "../../create-icon";
+
+export const Github = createIcon({
+  name: "Github",
+  viewBox: "0 0 24 24",
+  svg: `<svg fill="currentColor">
+    <path
+        d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+</svg>`,
+  categories: ["tools", "development"],
+  keywords: ["github", "repository", "source", "code", "version control"],
+});

package/lib/icons/categories/tools/go-abstract.ts

@@ -0,0 +1,12 @@
+import { createIcon } from "../../create-icon";
+
+export const GoAbstract = createIcon({
+  name: "Go Abstract",
+  viewBox: "0 0 24 24",
+  svg: `<svg fill="currentColor">
+    <path
+        d="M12 0c9.601 0 12 2.399 12 12s-2.399 12-12 12S0 21.601 0 12S2.399 0 12 0m-1.969 18.564c2.524.003 4.604-2.07 4.609-4.595c0-2.521-2.074-4.595-4.595-4.595S5.45 11.449 5.45 13.969c0 2.516 2.065 4.588 4.581 4.595m8.344-.189V5.625H5.625v2.247h10.498v10.503zm-8.344-6.748a2.343 2.343 0 1 1-.002 4.686a2.343 2.343 0 0 1 .002-4.686" />
+</svg>`,
+  categories: ["tools"],
+  keywords: ["abstract", "go", "design", "pattern", "software", "development"],
+});

package/lib/icons/categories/tools/index.ts

@@ -0,0 +1,15 @@
+export { AbDownloadManager } from "./ab-download-manager";
+export { AbletonLive } from "./abletonlive";
+export { Acode } from "./acode";
+export { Actualbudget } from "./actual-budget";
+export { DataScience365 } from "./365-data-sience";
+export { Docker } from "./docker";
+export { Git } from "./git";
+export { Github } from "./github";
+export { GoAbstract } from "./go-abstract";
+export { OnePanel } from "./1panel";
+export { OnePassword } from "./1password";
+export { SevenZip } from "./7zip";
+export { ThirtySecondsOfCode } from "./thirty-seconds-of-code";
+export { TwoFAS } from "./2fas";
+export { _1_1_1_1 } from "./1.1.1.1";

package/lib/icons/categories/tools/thirty-seconds-of-code.ts

@@ -0,0 +1,17 @@
+import { createIcon } from "../../create-icon";
+
+export const ThirtySecondsOfCode = createIcon({
+  name: "ThirtySecondsOfCode",
+  viewBox: "0 0 24 24",
+  svg: `<svg fill="currentColor">
+    <path
+        d="M13.895 12c0 .734-.593 1.328-1.324 1.328h-.58a6.67 6.67 0 0 1-.389 5.09a6.63 6.63 0 0 1-2.22 2.508a6.6 6.6 0 0 1-9.028-1.619l-.044-.06c-.47-.563-.397-1.4.163-1.872a1.32 1.32 0 0 1 1.864.164l.158.207a3.97 3.97 0 0 0 3.523 1.63a3.96 3.96 0 0 0 3.226-2.163A3.997 3.997 0 0 0 7.771 12A3.98 3.98 0 0 0 9.45 9.927a4 4 0 0 0-1.537-4.644a3.96 3.96 0 0 0-5.417.971l-.158.208a1.32 1.32 0 0 1-1.864.163A1.33 1.33 0 0 1 .31 4.754l.044-.061a6.6 6.6 0 0 1 2.583-2.128a6.6 6.6 0 0 1 6.446.51a6.63 6.63 0 0 1 2.22 2.506a6.66 6.66 0 0 1 .389 5.09h.58c.73 0 1.323.595 1.323 1.329m-.067 5.21a8.3 8.3 0 0 1-1.196 2.811a6.63 6.63 0 0 0 4.717 1.964A6.654 6.654 0 0 0 24 15.328V8.672a6.654 6.654 0 0 0-6.651-6.657c-1.844 0-3.513.75-4.717 1.964a8.3 8.3 0 0 1 1.196 2.81a3.99 3.99 0 0 1 7.511 1.883v6.656a3.992 3.992 0 0 1-7.51 1.883Z" />
+</svg>`,
+  categories: ["tools"],
+  keywords: [
+    "30 seconds of code",
+    "javascript",
+    "web development",
+    "programming",
+  ],
+});

package/lib/icons/categories-info.ts

@@ -0,0 +1,50 @@
+/**
+ * Server-safe category metadata. Use this in Server Components (e.g. app/page.tsx).
+ * Do not import the full registry or any icon components on the server—
+ * they use createIcon() which is client-only.
+ */
+
+export const CATEGORIES = [
+  "programming",
+  "app",
+  "design-tools",
+  "ai",
+  "tools",
+  "framework",
+  "company",
+] as const;
+
+const CATEGORY_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",
+  },
+};
+
+export function getCategoryInfo(category: string) {
+  return CATEGORY_INFO[category];
+}

package/lib/icons/create-icon.tsx

@@ -0,0 +1,140 @@
+"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

@@ -0,0 +1,43 @@
+'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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,69 @@
+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/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@onimuxha/oxycons",
+  "version": "1.0.1",
+  "description": "A modern, comprehensive icon library for React applications with TypeScript support",
+  "private": false,
+  "license": "MIT",
+  "author": "Endo Design",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/endo-design/oxycons"
+  },
+  "homepage": "https://github.com/endo-design/oxycons",
+  "bugs": {
+    "url": "https://github.com/endo-design/oxycons/issues"
+  },
+  "keywords": [
+    "icons",
+    "react",
+    "typescript",
+    "svg",
+    "icon-library",
+    "ui-icons",
+    "design-system"
+  ],
+  "files": [
+    "lib/icons",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./lib/icons/index.ts",
+  "types": "./lib/icons/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/icons/index.ts",
+      "default": "./lib/icons/index.ts"
+    },
+    "./icons": {
+      "default": "./lib/icons/icons.ts"
+    },
+    "./data": {
+      "default": "./lib/icons/data.ts"
+    }
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "framer-motion": "^11.18.2",
+    "input-otp": "1.4.1",
+    "lenis": "^1.3.17",
+    "lucide-react": "^0.544.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "^19",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^19",
+    "react-hook-form": "^7.54.1",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.0",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8.5",
+    "tailwindcss": "^3.4.17",
+    "typescript": "5.7.3"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "generate:icons": "node scripts/generate-icons.js",
+    "generate:icons:verbose": "node scripts/generate-icons.js --verbose",
+    "update:indexes": "node scripts/update-indexes.js"
+  }
+}