@modul-es/icons 0.1.6 → 0.1.8

package/dist/Icon.d.ts

@@ -1,4 +1,5 @@
 export type IconSet = 'huge' | 'pixelart' | 'phosphor' | 'lucide';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface IconProps {
     name: string;
     color?: string;
@@ -6,6 +7,6 @@ export interface IconProps {
     style?: 'sharp' | 'default' | 'fill' | 'thin' | 'light' | 'bold' | 'duotone';
     set?: IconSet;
     className?: string;
-    size?: number | string;
+    size?: IconSize | 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

@@ -40,9 +40,16 @@ exports.Icon = Icon;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var colors_1 = require("./colors");
+var SIZE_MAP = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40
+};
 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 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, className = _a.className, _d = _a.size, size = _d === void 0 ? 'md' : _d;
     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 () {
@@ -99,17 +106,21 @@ function Icon(_a) {
     var processedSvg = (0, react_1.useMemo)(function () {
         if (!svgContent)
             return null;
+        var iconSize = typeof size === 'string' && size in SIZE_MAP
+            ? SIZE_MAP[size]
+            : typeof size === 'number'
+                ? size
+                : 24;
         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, "\"");
+            newAttrs = newAttrs.replace(/\s(?:width|height)="[^"]*"/gi, '');
+            newAttrs += " width=\"".concat(iconSize, "\" style=\"height: auto;\"");
+            if (className) {
+                newAttrs = newAttrs.replace(/\sclass="[^"]*"/gi, '');
+                newAttrs += " className=\"".concat(className, "\"");
             }
             if (set !== 'phosphor' && set !== 'lucide' && !newAttrs.includes('fill=')) {
                 newAttrs += " fill=\"currentColor\"";
@@ -119,10 +130,11 @@ function Icon(_a) {
             }
             return "<svg".concat(newAttrs, ">");
         });
+        svg = svg.replace(/\sclass=/g, ' className=');
         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 } }));
+    return ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: processedSvg } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul-es/icons",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Icon component system",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",