@modul-es/icons 0.1.1

package/README.md

@@ -0,0 +1,35 @@
+# Icons Module
+
+A simple icon system supporting multiple icon sets with consistent props and styling.
+
+## Icon Sets
+
+- **huge**
+- **phosphor**
+- **lucide**
+- **pixelart**
+
+## Basic Usage
+
+```tsx
+import { Icon } from '@modules/icons';
+
+// Basic usage
+<Icon set="huge" name="home-01" color="slate-400" stroke="2" />
+
+// Phosphor with weight variants
+<Icon set="phosphor" name="heart" style="thin" color="white" />
+<Icon set="phosphor" name="heart" style="bold" color="white" />
+<Icon set="phosphor" name="heart" style="fill" color="ef4444" />
+<Icon set="phosphor" name="heart" style="duotone" color="fbbf24" />
+
+// Lucide with color variants
+<Icon set="lucide" name="heart" color="red-500" />
+<Icon set="lucide" name="zap" color="yellow-400" />
+```
+
+## Props
+- **set**
+- **color** (accepts hex & tailwind color names)
+- **stroke**
+- **style** (does not apply to all sets)

package/dist/Icon.d.ts

@@ -0,0 +1,11 @@
+export type IconSet = 'huge' | 'pixelart' | 'phosphor' | 'lucide';
+export interface IconProps {
+    name: string;
+    color?: string;
+    stroke?: string;
+    style?: 'sharp' | 'default' | 'fill' | 'thin' | 'light' | 'bold' | 'duotone';
+    set?: IconSet;
+    className?: string;
+    size?: number | string;
+}
+export declare function Icon({ name, color, stroke, style, set, className, size }: IconProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Icon.js

@@ -0,0 +1,136 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var colors_1 = require("./colors");
+// Cache for loaded SVG content
+var svgCache = new Map();
+function Icon(_a) {
+    var _this = this;
+    var name = _a.name, _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, stroke = _a.stroke, style = _a.style, _c = _a.set, set = _c === void 0 ? 'huge' : _c, _d = _a.className, className = _d === void 0 ? "w-6 select-none" : _d, size = _a.size;
+    var _e = (0, react_1.useState)(null), svgContent = _e[0], setSvgContent = _e[1];
+    var _f = (0, react_1.useState)(false), error = _f[0], setError = _f[1];
+    var iconKey = (0, react_1.useMemo)(function () {
+        var iconName = name.replace('.svg', '');
+        if (set === 'phosphor' && typeof style === 'string' && ['thin', 'light', 'bold', 'fill', 'duotone'].includes(style)) {
+            iconName = "".concat(iconName, ".").concat(style);
+        }
+        if (set === 'huge' && style === 'sharp') {
+            iconName = "".concat(iconName, ".sharp");
+        }
+        return iconName;
+    }, [name, set, style]);
+    var cacheKey = "".concat(set, "/").concat(iconKey);
+    (0, react_1.useEffect)(function () {
+        var loadSvg = function () { return __awaiter(_this, void 0, void 0, function () {
+            var params, colorValue, url, response, svg, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (svgCache.has(cacheKey)) {
+                            setSvgContent(svgCache.get(cacheKey));
+                            return [2 /*return*/];
+                        }
+                        setError(false);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, , 7]);
+                        params = new URLSearchParams();
+                        if (color !== 'currentColor') {
+                            colorValue = (0, colors_1.resolveColor)(color).replace('#', '');
+                            params.set('color', colorValue);
+                        }
+                        if (stroke)
+                            params.set('stroke', stroke);
+                        url = "https://icons.modul.es/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
+                        return [4 /*yield*/, fetch(url, { mode: 'cors', cache: 'force-cache' })];
+                    case 2:
+                        response = _a.sent();
+                        if (!response.ok) return [3 /*break*/, 4];
+                        return [4 /*yield*/, response.text()];
+                    case 3:
+                        svg = _a.sent();
+                        svgCache.set(cacheKey, svg);
+                        setSvgContent(svg);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setError(true);
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        err_1 = _a.sent();
+                        setError(true);
+                        return [3 /*break*/, 7];
+                    case 7: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadSvg();
+    }, [cacheKey, color, stroke, set, iconKey]);
+    var processedSvg = (0, react_1.useMemo)(function () {
+        if (!svgContent)
+            return null;
+        var svg = svgContent;
+        svg = svg.replace(/<\?xml[^>]*\?>/g, '');
+        svg = svg.replace(/<!--[\s\S]*?-->/g, '');
+        svg = svg.replace(/<svg([^>]*)\s(?:width|height)="[^"]*"([^>]*)>/gi, '<svg$1$2>');
+        if (size) {
+            svg = svg.replace(/<svg([^>]*)>/i, "<svg$1 width=\"".concat(size, "\" height=\"").concat(size, "\">"));
+        }
+        svg = svg.replace(/<svg([^>]*)>/i, function (match, attrs) {
+            var newAttrs = attrs;
+            if (!newAttrs.includes('class=')) {
+                newAttrs += " class=\"".concat(className, "\"");
+            }
+            if (set !== 'phosphor' && set !== 'lucide' && !newAttrs.includes('fill=')) {
+                newAttrs += " fill=\"currentColor\"";
+            }
+            if (!newAttrs.includes('shape-rendering=')) {
+                newAttrs += " shape-rendering=\"crispEdges\"";
+            }
+            return "<svg".concat(newAttrs, ">");
+        });
+        return svg.trim();
+    }, [svgContent, size, className, set]);
+    if (error || !processedSvg) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { imageRendering: 'crisp-edges' }, dangerouslySetInnerHTML: { __html: processedSvg } }));
+}

package/dist/colors.d.ts

@@ -0,0 +1 @@
+export declare function resolveColor(color: string): string;

package/dist/colors.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = resolveColor;
+// Tailwind color mappings to hex values (without # prefix for URL params)
+var tailwindColors = {
+    // Red
+    'red-50': 'fef2f2', 'red-100': 'fee2e2', 'red-200': 'fecaca', 'red-300': 'fca5a5',
+    'red-400': 'f87171', 'red-500': 'ef4444', 'red-600': 'dc2626', 'red-700': 'b91c1c',
+    'red-800': '991b1b', 'red-900': '7f1d1d', 'red-950': '450a0a',
+    // Orange
+    'orange-50': 'fff7ed', 'orange-100': 'ffedd5', 'orange-200': 'fed7aa', 'orange-300': 'fdba74',
+    'orange-400': 'fb923c', 'orange-500': 'f97316', 'orange-600': 'ea580c', 'orange-700': 'c2410c',
+    'orange-800': '9a3412', 'orange-900': '7c2d12', 'orange-950': '431407',
+    // Amber
+    'amber-50': 'fffbeb', 'amber-100': 'fef3c7', 'amber-200': 'fde68a', 'amber-300': 'fcd34d',
+    'amber-400': 'fbbf24', 'amber-500': 'f59e0b', 'amber-600': 'd97706', 'amber-700': 'b45309',
+    'amber-800': '92400e', 'amber-900': '78350f', 'amber-950': '451a03',
+    // Yellow
+    'yellow-50': 'fefce8', 'yellow-100': 'fef3c7', 'yellow-200': 'fde68a', 'yellow-300': 'fcd34d',
+    'yellow-400': 'fbbf24', 'yellow-500': 'f59e0b', 'yellow-600': 'd97706', 'yellow-700': 'b45309',
+    'yellow-800': '92400e', 'yellow-900': '78350f', 'yellow-950': '451a03',
+    // Lime
+    'lime-50': 'f7fee7', 'lime-100': 'ecfccb', 'lime-200': 'd9f99d', 'lime-300': 'bef264',
+    'lime-400': 'a3e635', 'lime-500': '84cc16', 'lime-600': '65a30d', 'lime-700': '4d7c0f',
+    'lime-800': '365314', 'lime-900': '1a2e05', 'lime-950': '0c1a02',
+    // Green
+    'green-50': 'f0fdf4', 'green-100': 'dcfce7', 'green-200': 'bbf7d0', 'green-300': '86efac',
+    'green-400': '4ade80', 'green-500': '22c55e', 'green-600': '16a34a', 'green-700': '15803d',
+    'green-800': '166534', 'green-900': '14532d', 'green-950': '052e16',
+    // Emerald
+    'emerald-50': 'ecfdf5', 'emerald-100': 'd1fae5', 'emerald-200': 'a7f3d0', 'emerald-300': '6ee7b7',
+    'emerald-400': '34d399', 'emerald-500': '10b981', 'emerald-600': '059669', 'emerald-700': '047857',
+    'emerald-800': '065f46', 'emerald-900': '064e3b', 'emerald-950': '022c22',
+    // Teal
+    'teal-50': 'f0fdfa', 'teal-100': 'ccfbf1', 'teal-200': '99f6e4', 'teal-300': '5eead4',
+    'teal-400': '2dd4bf', 'teal-500': '14b8a6', 'teal-600': '0d9488', 'teal-700': '0f766e',
+    'teal-800': '115e59', 'teal-900': '134e4a', 'teal-950': '042f2e',
+    // Cyan
+    'cyan-50': 'ecfeff', 'cyan-100': 'cffafe', 'cyan-200': 'a5f3fc', 'cyan-300': '67e8f9',
+    'cyan-400': '22d3ee', 'cyan-500': '06b6d4', 'cyan-600': '0891b2', 'cyan-700': '0e7490',
+    'cyan-800': '155e75', 'cyan-900': '164e63', 'cyan-950': '083344',
+    // Sky
+    'sky-50': 'f0f9ff', 'sky-100': 'e0f2fe', 'sky-200': 'bae6fd', 'sky-300': '7dd3fc',
+    'sky-400': '38bdf8', 'sky-500': '0ea5e9', 'sky-600': '0284c7', 'sky-700': '0369a1',
+    'sky-800': '075985', 'sky-900': '0c4a6e', 'sky-950': '082f49',
+    // Blue
+    'blue-50': 'eff6ff', 'blue-100': 'dbeafe', 'blue-200': 'bfdbfe', 'blue-300': '93c5fd',
+    'blue-400': '60a5fa', 'blue-500': '3b82f6', 'blue-600': '2563eb', 'blue-700': '1d4ed8',
+    'blue-800': '1e40af', 'blue-900': '1e3a8a', 'blue-950': '172554',
+    // Indigo
+    'indigo-50': 'eef2ff', 'indigo-100': 'e0e7ff', 'indigo-200': 'c7d2fe', 'indigo-300': 'a5b4fc',
+    'indigo-400': '818cf8', 'indigo-500': '6366f1', 'indigo-600': '4f46e5', 'indigo-700': '4338ca',
+    'indigo-800': '3730a3', 'indigo-900': '312e81', 'indigo-950': '1e1b4b',
+    // Violet
+    'violet-50': 'f5f3ff', 'violet-100': 'ede9fe', 'violet-200': 'ddd6fe', 'violet-300': 'c4b5fd',
+    'violet-400': 'a78bfa', 'violet-500': '8b5cf6', 'violet-600': '7c3aed', 'violet-700': '6d28d9',
+    'violet-800': '5b21b6', 'violet-900': '4c1d95', 'violet-950': '2e1065',
+    // Purple
+    'purple-50': 'faf5ff', 'purple-100': 'f3e8ff', 'purple-200': 'e9d5ff', 'purple-300': 'd8b4fe',
+    'purple-400': 'c084fc', 'purple-500': 'a855f7', 'purple-600': '9333ea', 'purple-700': '7c3aed',
+    'purple-800': '6b21a8', 'purple-900': '581c87', 'purple-950': '3b0764',
+    // Fuchsia
+    'fuchsia-50': 'fdf4ff', 'fuchsia-100': 'fae8ff', 'fuchsia-200': 'f5d0fe', 'fuchsia-300': 'f0abfc',
+    'fuchsia-400': 'e879f9', 'fuchsia-500': 'd946ef', 'fuchsia-600': 'c026d3', 'fuchsia-700': 'a21caf',
+    'fuchsia-800': '86198f', 'fuchsia-900': '701a75', 'fuchsia-950': '4a044e',
+    // Pink
+    'pink-50': 'fdf2f8', 'pink-100': 'fce7f3', 'pink-200': 'fbcfe8', 'pink-300': 'f9a8d4',
+    'pink-400': 'f472b6', 'pink-500': 'ec4899', 'pink-600': 'db2777', 'pink-700': 'be185d',
+    'pink-800': '9d174d', 'pink-900': '831843', 'pink-950': '500724',
+    // Rose
+    'rose-50': 'fff1f2', 'rose-100': 'ffe4e6', 'rose-200': 'fecdd3', 'rose-300': 'fda4af',
+    'rose-400': 'fb7185', 'rose-500': 'f43f5e', 'rose-600': 'e11d48', 'rose-700': 'be123c',
+    'rose-800': '9f1239', 'rose-900': '881337', 'rose-950': '4c0519',
+    // Slate
+    'slate-50': 'f8fafc', 'slate-100': 'f1f5f9', 'slate-200': 'e2e8f0', 'slate-300': 'cbd5e1',
+    'slate-400': '94a3b8', 'slate-500': '64748b', 'slate-600': '475569', 'slate-700': '334155',
+    'slate-800': '1e293b', 'slate-900': '0f172a', 'slate-950': '020617',
+    // Gray
+    'gray-50': 'f9fafb', 'gray-100': 'f3f4f6', 'gray-200': 'e5e7eb', 'gray-300': 'd1d5db',
+    'gray-400': '9ca3af', 'gray-500': '6b7280', 'gray-600': '4b5563', 'gray-700': '374151',
+    'gray-800': '1f2937', 'gray-900': '111827', 'gray-950': '030712',
+    // Zinc
+    'zinc-50': 'fafafa', 'zinc-100': 'f4f4f5', 'zinc-200': 'e4e4e7', 'zinc-300': 'd4d4d8',
+    'zinc-400': 'a1a1aa', 'zinc-500': '71717a', 'zinc-600': '52525b', 'zinc-700': '3f3f46',
+    'zinc-800': '27272a', 'zinc-900': '18181b', 'zinc-950': '09090b',
+    // Neutral
+    'neutral-50': 'fafafa', 'neutral-100': 'f5f5f5', 'neutral-200': 'e5e5e5', 'neutral-300': 'd4d4d4',
+    'neutral-400': 'a3a3a3', 'neutral-500': '737373', 'neutral-600': '525252', 'neutral-700': '404040',
+    'neutral-800': '262626', 'neutral-900': '171717', 'neutral-950': '0a0a0a',
+    // Stone
+    'stone-50': 'fafaf9', 'stone-100': 'f5f5f4', 'stone-200': 'e7e5e4', 'stone-300': 'd6d3d1',
+    'stone-400': 'a8a29e', 'stone-500': '78716c', 'stone-600': '57534e', 'stone-700': '44403c',
+    'stone-800': '292524', 'stone-900': '1c1917', 'stone-950': '0c0a09',
+    // Common colors
+    'black': '000000',
+    'white': 'ffffff',
+    'transparent': 'transparent',
+    'current': 'currentColor',
+};
+function resolveColor(color) {
+    // If it's already a hex color, return as is
+    if (color.match(/^[0-9a-fA-F]{3,8}$/)) {
+        return "#".concat(color);
+    }
+    // Check if it's a Tailwind color
+    if (tailwindColors[color]) {
+        return "#".concat(tailwindColors[color]);
+    }
+    // If it starts with bg-, text-, border-, etc., extract the color part
+    var colorMatch = color.match(/^(?:bg-|text-|border-|ring-|from-|to-|via-)?(.+)$/);
+    if (colorMatch && tailwindColors[colorMatch[1]]) {
+        return "#".concat(tailwindColors[colorMatch[1]]);
+    }
+    // Default to the original color (might be a CSS color name)
+    return color.startsWith('#') ? color : "#".concat(color);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSet } from './Icon';

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@modul-es/icons",
+  "version": "0.1.1",
+  "description": "Icon component system",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/traf/modules.git",
+    "directory": "modules/icons"
+  },
+  "keywords": ["react", "icons", "components", "modules"],
+  "author": "@traf"
+}