@react-md/icon - npm Package Compare versions

Comparing version 2.0.0-alpha.0 to 2.0.0-alpha.1

es/FontIcon.js

@@ -23,2 +23,4 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
+var block = bem("rmd-icon");
 /**
@@ -35,7 +37,8 @@ * The `FontIcon` component is used for rendering a font-icon library's
     var _a = providedProps, className = _a.className, iconClassName = _a.iconClassName, dense = _a.dense, forceSize = _a.forceSize, forceFontSize = _a.forceFontSize, children = _a.children, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "iconClassName", "dense", "forceSize", "forceFontSize", "children", "forwardedRef"]);
-    return (React.createElement("i", __assign({}, props, { ref: forwardedRef, className: cn("rmd-icon rmd-icon--font", {
-            "rmd-icon--dense": dense,
-            "rmd-icon--forced-font": forceFontSize,
-            "rmd-icon--forced-size": forceSize,
-        }, iconClassName, className) }), children));
+    return (React.createElement("i", __assign({}, props, { ref: forwardedRef, className: cn(block({
+            font: true,
+            dense: dense,
+            "forced-font": forceFontSize,
+            "forced-size": forceSize,
+        }), iconClassName, className) }), children));
 };
@@ -42,0 +45,0 @@ var defaultProps = {

es/IconRotator.js

@@ -23,2 +23,4 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
+var block = bem("rmd-icon-rotator");
 /**
@@ -30,6 +32,3 @@ * The `IconRotator` is a simple component that is used to rotate an icon from a one degrees
     var _a = providedProps, style = _a.style, propClassName = _a.className, animate = _a.animate, rotated = _a.rotated, children = _a.children, forceIconWrap = _a.forceIconWrap, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap", "forwardedRef"]);
-    var className = cn("rmd-icon-rotator", {
-        "rmd-icon-rotator--animate": animate,
-        "rmd-icon-rotator--rotated": rotated,
-    }, propClassName);
+    var className = cn(block({ animate: animate, rotated: rotated }), propClassName);
     if (!forceIconWrap && isValidElement(children)) {
@@ -36,0 +35,0 @@ var child = Children.only(children);

es/SVGIcon.js

@@ -23,2 +23,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
+import { bem } from "@react-md/theme";
 /**
@@ -51,2 +52,3 @@ * A small helper function that will automatically generate specific ids within the icon
 }
+var block = bem("rmd-icon");
 /**
@@ -71,5 +73,3 @@ * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a sprite map
     }
-    return (React.createElement("svg", __assign({}, props, { ref: forwardedRef, "aria-labelledby": ariaLabelledBy || labelledBy, className: cn("rmd-icon rmd-icon--svg", {
-            "rmd-icon--dense": dense,
-        }, className) }),
+    return (React.createElement("svg", __assign({}, props, { ref: forwardedRef, "aria-labelledby": ariaLabelledBy || labelledBy, className: cn(block({ svg: true, dense: dense }), className) }),
         title,
@@ -76,0 +76,0 @@ desc,

lib/FontIcon.js

@@ -35,2 +35,4 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
+var block = theme_1.bem("rmd-icon");
 /**
@@ -47,7 +49,8 @@ * The `FontIcon` component is used for rendering a font-icon library's
     var _a = providedProps, className = _a.className, iconClassName = _a.iconClassName, dense = _a.dense, forceSize = _a.forceSize, forceFontSize = _a.forceFontSize, children = _a.children, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "iconClassName", "dense", "forceSize", "forceFontSize", "children", "forwardedRef"]);
-    return (react_1.default.createElement("i", __assign({}, props, { ref: forwardedRef, className: classnames_1.default("rmd-icon rmd-icon--font", {
-            "rmd-icon--dense": dense,
-            "rmd-icon--forced-font": forceFontSize,
-            "rmd-icon--forced-size": forceSize,
-        }, iconClassName, className) }), children));
+    return (react_1.default.createElement("i", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({
+            font: true,
+            dense: dense,
+            "forced-font": forceFontSize,
+            "forced-size": forceSize,
+        }), iconClassName, className) }), children));
 };
@@ -54,0 +57,0 @@ var defaultProps = {

lib/IconRotator.js

@@ -35,2 +35,4 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
+var block = theme_1.bem("rmd-icon-rotator");
 /**
@@ -42,6 +44,3 @@ * The `IconRotator` is a simple component that is used to rotate an icon from a one degrees
     var _a = providedProps, style = _a.style, propClassName = _a.className, animate = _a.animate, rotated = _a.rotated, children = _a.children, forceIconWrap = _a.forceIconWrap, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap", "forwardedRef"]);
-    var className = classnames_1.default("rmd-icon-rotator", {
-        "rmd-icon-rotator--animate": animate,
-        "rmd-icon-rotator--rotated": rotated,
-    }, propClassName);
+    var className = classnames_1.default(block({ animate: animate, rotated: rotated }), propClassName);
     if (!forceIconWrap && react_1.isValidElement(children)) {
@@ -48,0 +47,0 @@ var child = react_1.Children.only(children);

lib/SVGIcon.js

@@ -35,2 +35,3 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
+var theme_1 = require("@react-md/theme");
 /**
@@ -63,2 +64,3 @@ * A small helper function that will automatically generate specific ids within the icon
 }
+var block = theme_1.bem("rmd-icon");
 /**
@@ -83,5 +85,3 @@ * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a sprite map
     }
-    return (react_1.default.createElement("svg", __assign({}, props, { ref: forwardedRef, "aria-labelledby": ariaLabelledBy || labelledBy, className: classnames_1.default("rmd-icon rmd-icon--svg", {
-            "rmd-icon--dense": dense,
-        }, className) }),
+    return (react_1.default.createElement("svg", __assign({}, props, { ref: forwardedRef, "aria-labelledby": ariaLabelledBy || labelledBy, className: classnames_1.default(block({ svg: true, dense: dense }), className) }),
         title,
@@ -88,0 +88,0 @@ desc,

package.json

 {
   "name": "@react-md/icon",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "This package is for including icons within react-md. There is included support for both font icons and SVG icons.  There is also a helper component for applying spacing between icons and text.",
@@ -34,5 +34,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.0",
-    "@react-md/typography": "^2.0.0-alpha.0",
-    "@react-md/utils": "^2.0.0-alpha.0",
+    "@react-md/theme": "^2.0.0-alpha.1",
+    "@react-md/typography": "^2.0.0-alpha.1",
+    "@react-md/utils": "^2.0.0-alpha.1",
     "classnames": "^2.2.6"
@@ -49,3 +49,3 @@ },
   },
-  "gitHead": "cc5de21740e62c1fd5da8f832f562c48eb028717"
+  "gitHead": "9197bcdf38df3cff304499431696dc8e950b4b17"
 }

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

140538

decreased by-12.53%

Number of package files

59

decreased by-4.84%

Lines of code

1863

decreased by-15.43%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.1

• Updated@react-md/typography@^2.0.0-alpha.1

• Updated@react-md/utils@^2.0.0-alpha.1