gradienticons - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/Icon.js

@@ -78,2 +78,26 @@ "use strict";
 };
+var parseSize = function parseSize(value) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1em';
+  if (typeof value === 'number') return "".concat(value, "px");
+  if (typeof value === 'string') {
+    var num = parseFloat(value);
+    return isNaN(num) ? value : "".concat(num, "px");
+  }
+  return defaultValue;
+};
+var parseColor = function parseColor(color) {
+  var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'currentColor';
+  return color || defaultColor;
+};
+var parseGradientColors = function parseGradientColors(colors) {
+  if (Array.isArray(colors) && colors.length >= 2) {
+    return [parseColor(colors[0]), parseColor(colors[1])];
+  }
+  return null;
+};
+var parseNumber = function parseNumber(value) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var num = parseFloat(value);
+  return isNaN(num) ? defaultValue : num;
+};
 var Icon = function Icon(_ref) {
@@ -127,12 +151,38 @@ var _iconData$icon, _iconData$icon2;
     setIsHovered = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   (0, _react.useEffect)(function () {
-    var icon = IconService.getIcon(name);
-    setIconData(icon);
+    try {
+      var icon = IconService.getIcon(name);
+      if (!icon) {
+        throw new Error("Icon \"".concat(name, "\" not found"));
+      }
+      setIconData(icon);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    }
   }, [name]);
+  if (error) {
+    console.error("Error in Icon component: ".concat(error));
+    return null; // or return a fallback icon
+  }
   var viewBox = (iconData === null || iconData === void 0 || (_iconData$icon = iconData.icon) === null || _iconData$icon === void 0 ? void 0 : _iconData$icon.viewBox) || (iconData === null || iconData === void 0 ? void 0 : iconData.viewBox) || '0 0 1024 1024';
   var paths = (iconData === null || iconData === void 0 || (_iconData$icon2 = iconData.icon) === null || _iconData$icon2 === void 0 ? void 0 : _iconData$icon2.paths) || (iconData === null || iconData === void 0 ? void 0 : iconData.paths) || [];
-  var activeGradientColors = isHovered && hoverGradientColors ? hoverGradientColors : gradientColors;
-  var activeColor = isHovered && hoverColor ? hoverColor : color;
-  var activeBackgroundColor = isHovered && hoverBackgroundColor ? hoverBackgroundColor : backgroundColor;
-  var fillStyle = activeGradientColors ? 'url(#iconGradient)' : activeColor;
+  var parsedSize = parseSize(size);
+  var parsedColor = parseColor(color);
+  var parsedHoverColor = parseColor(hoverColor);
+  var parsedBackgroundColor = parseColor(backgroundColor);
+  var parsedHoverBackgroundColor = parseColor(hoverBackgroundColor);
+  var parsedGradientColors = parseGradientColors(gradientColors);
+  var parsedHoverGradientColors = parseGradientColors(hoverGradientColors);
+  var parsedOpacity = parseNumber(opacity, 1);
+  var parsedBorderRadius = parseNumber(borderRadius);
+  var parsedPadding = parseNumber(padding);
+  var parsedOuterPadding = parseNumber(outerPadding);
+  var activeColor = isHovered ? parsedHoverColor : parsedColor;
+  var activeGradientColors = isHovered ? parsedHoverGradientColors : parsedGradientColors;
+  var activeBackgroundColor = isHovered ? parsedHoverBackgroundColor : parsedBackgroundColor;
   var start = getGradientDirection(directionStart);
@@ -144,4 +194,4 @@ var end = getGradientDirection(directionEnd);
     viewBoxHeight = _viewBox$split$slice$2[1];
-  var totalSize = parseFloat(size) + 2 * outerPadding;
-  var innerSize = parseFloat(size) - 2 * padding;
+  var totalSize = parseFloat(parsedSize) + 2 * parsedOuterPadding;
+  var innerSize = parseFloat(parsedSize) - 2 * parsedPadding;
   var scaleFactor = innerSize / viewBoxWidth;
@@ -151,15 +201,15 @@ var shapeElement = shape === 'circle' ? /*#__PURE__*/_react["default"].createElement("circle", {
     cy: totalSize / 2,
-    r: parseFloat(size) / 2,
+    r: parseFloat(parsedSize) / 2,
     fill: activeBackgroundColor
   }) : shape === 'square' ? /*#__PURE__*/_react["default"].createElement("rect", {
-    x: outerPadding,
-    y: outerPadding,
-    width: parseFloat(size),
-    height: parseFloat(size),
+    x: parsedOuterPadding,
+    y: parsedOuterPadding,
+    width: parseFloat(parsedSize),
+    height: parseFloat(parsedSize),
     fill: activeBackgroundColor,
-    rx: borderRadius
+    rx: parsedBorderRadius
   }) : null;
   var wrapperStyle = {
     display: 'inline-block',
-    borderRadius: shape === 'circle' ? '50%' : "".concat(borderRadius, "px"),
+    borderRadius: shape === 'circle' ? '50%' : "".concat(parsedBorderRadius, "px"),
     lineHeight: 0,
@@ -170,6 +220,6 @@ cursor: cursor,
   var svgStyle = _objectSpread(_objectSpread({}, styles), {}, {
-    opacity: opacity,
+    opacity: parsedOpacity,
     display: 'block',
     cursor: cursor,
-    filter: iconShadow ? 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))' : 'none'
+    filter: iconShadow ? "drop-shadow(".concat(iconShadow, ")") : 'none'
   });
@@ -189,8 +239,7 @@ var svgContent = /*#__PURE__*/_react["default"].createElement("svg", _extends({
   }, props), /*#__PURE__*/_react["default"].createElement("defs", null, activeGradientColors && /*#__PURE__*/_react["default"].createElement("linearGradient", {
-    id: "iconGradient",
+    id: "iconGradient-".concat(name),
     x1: start.x,
     y1: start.y,
     x2: end.x,
-    y2: end.y,
-    gradientUnits: "userSpaceOnUse"
+    y2: end.y
   }, /*#__PURE__*/_react["default"].createElement("stop", {
@@ -203,3 +252,5 @@ offset: "0%",
   }))), shapeElement, /*#__PURE__*/_react["default"].createElement("g", {
-    transform: "translate(".concat(outerPadding + padding, ", ").concat(outerPadding + padding, ") scale(").concat(scaleFactor, ")")
+    transform: "translate(".concat(parsedOuterPadding + parsedPadding, ", ").concat(parsedOuterPadding + parsedPadding, ") scale(").concat(scaleFactor, ")")
+  }, activeGradientColors ? /*#__PURE__*/_react["default"].createElement("mask", {
+    id: "iconMask-".concat(name)
   }, paths.map(function (path, index) {
@@ -209,4 +260,17 @@ return /*#__PURE__*/_react["default"].createElement("path", {
       d: path,
-      fill: fillStyle
+      fill: "white"
     });
+  })) : null, activeGradientColors ? /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "0",
+    y: "0",
+    width: viewBoxWidth,
+    height: viewBoxHeight,
+    fill: "url(#iconGradient-".concat(name, ")"),
+    mask: "url(#iconMask-".concat(name, ")")
+  }) : paths.map(function (path, index) {
+    return /*#__PURE__*/_react["default"].createElement("path", {
+      key: index,
+      d: path,
+      fill: activeColor
+    });
   })));
@@ -218,3 +282,3 @@ return /*#__PURE__*/_react["default"].createElement("div", {
       boxShadow: boxShadow,
-      borderRadius: shape === 'circle' ? '50%' : "".concat(borderRadius, "px")
+      borderRadius: shape === 'circle' ? '50%' : "".concat(parsedBorderRadius, "px")
     }
@@ -221,0 +285,0 @@ }, svgContent) : svgContent);

package.json

 {
   "name": "gradienticons",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A versatile React icon component library with gradient support, hover effects, and customizable shapes. Perfect for modern UI designs.",
@@ -45,2 +45,2 @@ "main": "dist/index.js",
   }
-}
+}

README.md

 # Gradienticons
 
-Gradienticons is a versatile and customizable React icon component library with support for gradients, hover effects, and shape variations.
+Gradienticons is a versatile and customizable React icon component library with support for gradients, hover effects, and shape variations. It offers flexible input handling for all props, making it easy to use in various scenarios.
 
@@ -13,2 +13,3 @@ ## Features
 - 💫 Box shadow and icon shadow effects
+- 🔄 Flexible input handling for all props
 
@@ -36,3 +37,3 @@ ## Installation
       name="home"
-      size="50px"
+      size={50} // or "50px" or "3em"
       color="blue"
@@ -43,2 +44,4 @@ gradientColors={['#ff00ff', '#00ffff']}
       backgroundColor="#f0f0f0"
+      outerPadding={10} // or "10px"
+      opacity={0.8} // or "0.8"
     />
@@ -51,25 +54,40 @@ );
 
-| Prop                 | Type   | Default        | Description                              |
-| -------------------- | ------ | -------------- | ---------------------------------------- |
-| name                 | string | -              | Name of the icon                         |
-| size                 | string | '1em'          | Size of the icon                         |
-| color                | string | 'currentColor' | Color of the icon                        |
-| gradientColors       | array  | null           | Array of two colors for gradient         |
-| hoverColor           | string | null           | Color on hover                           |
-| hoverGradientColors  | array  | null           | Gradient colors on hover                 |
-| directionStart       | string | 'topLeft'      | Start direction of gradient              |
-| directionEnd         | string | 'bottomRight'  | End direction of gradient                |
-| opacity              | number | 1              | Opacity of the icon                      |
-| backgroundColor      | string | 'transparent'  | Background color                         |
-| hoverBackgroundColor | string | null           | Background color on hover                |
-| shape                | string | 'circle'       | Shape of the icon ('circle' or 'square') |
-| borderRadius         | number | 0              | Border radius for square shape           |
-| padding              | number | 0              | Inner padding                            |
-| outerPadding         | number | 0              | Outer padding                            |
-| boxShadow            | string | null           | Box shadow CSS                           |
-| iconShadow           | string | null           | Icon shadow CSS                          |
-| cursor               | string | 'default'      | Cursor style                             |
+| Prop                 | Type             | Default        | Description                              |
+| -------------------- | ---------------- | -------------- | ---------------------------------------- |
+| name                 | string           | -              | Name of the icon                         |
+| size                 | string \| number | '1em'          | Size of the icon                         |
+| color                | string           | 'currentColor' | Color of the icon                        |
+| gradientColors       | array            | null           | Array of two colors for gradient         |
+| hoverColor           | string           | null           | Color on hover                           |
+| hoverGradientColors  | array            | null           | Gradient colors on hover                 |
+| directionStart       | string           | 'topLeft'      | Start direction of gradient              |
+| directionEnd         | string           | 'bottomRight'  | End direction of gradient                |
+| opacity              | string \| number | 1              | Opacity of the icon                      |
+| backgroundColor      | string           | 'transparent'  | Background color                         |
+| hoverBackgroundColor | string           | null           | Background color on hover                |
+| shape                | string           | 'circle'       | Shape of the icon ('circle' or 'square') |
+| borderRadius         | string \| number | 0              | Border radius for square shape           |
+| padding              | string \| number | 0              | Inner padding                            |
+| outerPadding         | string \| number | 0              | Outer padding                            |
+| boxShadow            | string           | null           | Box shadow CSS                           |
+| iconShadow           | string           | null           | Icon shadow CSS                          |
+| cursor               | string           | 'default'      | Cursor style                             |
 
+## Flexible Input Handling
+
+Gradienticons now supports flexible input handling for all props. You can pass values as strings or numbers, and they will be correctly parsed and applied. For example:
+
+```jsx
+<Icon
+  size={80} // or "80px" or "5em"
+  opacity={0.7} // or "0.7"
+  borderRadius="10px" // or 10
+  outerPadding="5" // or 5
+/>
+```
+
+This flexibility makes it easier to use Gradienticons in various contexts and with different styling approaches.
+
 ## License
 
 MIT © [DHEERAJ]

src/Icon.js

@@ -32,2 +32,27 @@ import React, { useState, useEffect } from 'react';
 
+const parseSize = (value, defaultValue = '1em') => {
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') {
+    const num = parseFloat(value);
+    return isNaN(num) ? value : `${num}px`;
+  }
+  return defaultValue;
+};
+
+const parseColor = (color, defaultColor = 'currentColor') => {
+  return color || defaultColor;
+};
+
+const parseGradientColors = (colors) => {
+  if (Array.isArray(colors) && colors.length >= 2) {
+    return [parseColor(colors[0]), parseColor(colors[1])];
+  }
+  return null;
+};
+
+const parseNumber = (value, defaultValue = 0) => {
+  const num = parseFloat(value);
+  return isNaN(num) ? defaultValue : num;
+};
+
 const Icon = ({
@@ -57,8 +82,22 @@ name,
   const [isHovered, setIsHovered] = useState(false);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
-    const icon = IconService.getIcon(name);
-    setIconData(icon);
+    try {
+      const icon = IconService.getIcon(name);
+      if (!icon) {
+        throw new Error(`Icon "${name}" not found`);
+      }
+      setIconData(icon);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    }
   }, [name]);
 
+  if (error) {
+    console.error(`Error in Icon component: ${error}`);
+    return null; // or return a fallback icon
+  }
+
   const viewBox =
@@ -68,9 +107,21 @@ iconData?.icon?.viewBox || iconData?.viewBox || '0 0 1024 1024';
 
-  const activeGradientColors =
-    isHovered && hoverGradientColors ? hoverGradientColors : gradientColors;
-  const activeColor = isHovered && hoverColor ? hoverColor : color;
-  const activeBackgroundColor =
-    isHovered && hoverBackgroundColor ? hoverBackgroundColor : backgroundColor;
+  const parsedSize = parseSize(size);
+  const parsedColor = parseColor(color);
+  const parsedHoverColor = parseColor(hoverColor);
+  const parsedBackgroundColor = parseColor(backgroundColor);
+  const parsedHoverBackgroundColor = parseColor(hoverBackgroundColor);
+  const parsedGradientColors = parseGradientColors(gradientColors);
+  const parsedHoverGradientColors = parseGradientColors(hoverGradientColors);
+  const parsedOpacity = parseNumber(opacity, 1);
+  const parsedBorderRadius = parseNumber(borderRadius);
+  const parsedPadding = parseNumber(padding);
+  const parsedOuterPadding = parseNumber(outerPadding);
 
-  const fillStyle = activeGradientColors ? 'url(#iconGradient)' : activeColor;
+  const activeColor = isHovered ? parsedHoverColor : parsedColor;
+  const activeGradientColors = isHovered
+    ? parsedHoverGradientColors
+    : parsedGradientColors;
+  const activeBackgroundColor = isHovered
+    ? parsedHoverBackgroundColor
+    : parsedBackgroundColor;
 
@@ -81,4 +132,4 @@ const start = getGradientDirection(directionStart);
   const [viewBoxWidth, viewBoxHeight] = viewBox.split(' ').slice(2).map(Number);
-  const totalSize = parseFloat(size) + 2 * outerPadding;
-  const innerSize = parseFloat(size) - 2 * padding;
+  const totalSize = parseFloat(parsedSize) + 2 * parsedOuterPadding;
+  const innerSize = parseFloat(parsedSize) - 2 * parsedPadding;
   const scaleFactor = innerSize / viewBoxWidth;
@@ -91,3 +142,3 @@
         cy={totalSize / 2}
-        r={parseFloat(size) / 2}
+        r={parseFloat(parsedSize) / 2}
         fill={activeBackgroundColor}
@@ -97,8 +148,8 @@ />
       <rect
-        x={outerPadding}
-        y={outerPadding}
-        width={parseFloat(size)}
-        height={parseFloat(size)}
+        x={parsedOuterPadding}
+        y={parsedOuterPadding}
+        width={parseFloat(parsedSize)}
+        height={parseFloat(parsedSize)}
         fill={activeBackgroundColor}
-        rx={borderRadius}
+        rx={parsedBorderRadius}
       />
@@ -109,3 +160,3 @@ ) : null;
     display: 'inline-block',
-    borderRadius: shape === 'circle' ? '50%' : `${borderRadius}px`,
+    borderRadius: shape === 'circle' ? '50%' : `${parsedBorderRadius}px`,
     lineHeight: 0,
@@ -118,6 +169,6 @@ cursor: cursor,
     ...styles,
-    opacity,
+    opacity: parsedOpacity,
     display: 'block',
     cursor: cursor,
-    filter: iconShadow ? 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))' : 'none',
+    filter: iconShadow ? `drop-shadow(${iconShadow})` : 'none',
   };
@@ -139,3 +190,3 @@
           <linearGradient
-            id="iconGradient"
+            id={`iconGradient-${name}`}
             x1={start.x}
@@ -145,3 +196,2 @@ y1={start.y}
             y2={end.y}
-            gradientUnits="userSpaceOnUse"
           >
@@ -155,9 +205,27 @@ <stop offset="0%" stopColor={activeGradientColors[0]} />
       <g
-        transform={`translate(${outerPadding + padding}, ${
-          outerPadding + padding
+        transform={`translate(${parsedOuterPadding + parsedPadding}, ${
+          parsedOuterPadding + parsedPadding
         }) scale(${scaleFactor})`}
       >
-        {paths.map((path, index) => (
-          <path key={index} d={path} fill={fillStyle} />
-        ))}
+        {activeGradientColors ? (
+          <mask id={`iconMask-${name}`}>
+            {paths.map((path, index) => (
+              <path key={index} d={path} fill="white" />
+            ))}
+          </mask>
+        ) : null}
+        {activeGradientColors ? (
+          <rect
+            x="0"
+            y="0"
+            width={viewBoxWidth}
+            height={viewBoxHeight}
+            fill={`url(#iconGradient-${name})`}
+            mask={`url(#iconMask-${name})`}
+          />
+        ) : (
+          paths.map((path, index) => (
+            <path key={index} d={path} fill={activeColor} />
+          ))
+        )}
       </g>
@@ -173,3 +241,4 @@ </svg>
             boxShadow: boxShadow,
-            borderRadius: shape === 'circle' ? '50%' : `${borderRadius}px`,
+            borderRadius:
+              shape === 'circle' ? '50%' : `${parsedBorderRadius}px`,
           }}
@@ -176,0 +245,0 @@ >

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

778462

increased by0.71%

Lines of code

13782

increased by0.94%

Number of lines in readme file

90

increased by25%

No dependency changes