@react-md/icon - npm Package Compare versions

Comparing version 2.0.0-alpha.15 to 2.0.0-beta.0

es/FontIcon.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, } from "react";
+import React, { forwardRef } from "react";
 import cn from "classnames";
@@ -37,3 +37,3 @@ import { bem } from "@react-md/utils";
  */
-function FontIcon(_a, ref) {
+var FontIcon = forwardRef(function FontIcon(_a, ref) {
     var className = _a.className, children = _a.children, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.iconClassName, iconClassName = _d === void 0 ? "material-icons" : _d, _e = _a.forceSize, forceSize = _e === void 0 ? false : _e, _f = _a.forceFontSize, forceFontSize = _f === void 0 ? false : _f, props = __rest(_a, ["className", "children", "aria-hidden", "dense", "iconClassName", "forceSize", "forceFontSize"]);
@@ -46,8 +46,7 @@ return (React.createElement("i", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: cn(block({
         }), iconClassName, className) }), children));
-}
-var ForwardedFontIcon = forwardRef(FontIcon);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedFontIcon.propTypes = {
+        FontIcon.propTypes = {
             "aria-hidden": PropTypes.oneOfType([
@@ -67,3 +66,3 @@ PropTypes.oneOf(["true", "false"]),
 }
-export default ForwardedFontIcon;
+export default FontIcon;
 //# sourceMappingURL=FontIcon.js.map

es/IconRotator.js

@@ -31,3 +31,3 @@ var __assign = (this && this.__assign) || function () {
  */
-function IconRotator(_a, ref) {
+var IconRotator = forwardRef(function IconRotator(_a, ref) {
     var style = _a.style, propClassName = _a.className, _b = _a.animate, animate = _b === void 0 ? true : _b, rotated = _a.rotated, children = _a.children, _c = _a.forceIconWrap, forceIconWrap = _c === void 0 ? false : _c, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap"]);
@@ -42,8 +42,8 @@ var className = cn(block({ animate: animate, rotated: rotated }), propClassName);
     return (React.createElement("span", __assign({}, props, { style: style, className: className, ref: ref }), children));
-}
-var ForwardedIconRotator = forwardRef(IconRotator);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedIconRotator.propTypes = {
+        IconRotator.propTypes = {
+            style: PropTypes.object,
             className: PropTypes.string,
@@ -58,3 +58,3 @@ animate: PropTypes.bool,
 }
-export default ForwardedIconRotator;
+export default IconRotator;
 //# sourceMappingURL=IconRotator.js.map

es/SVGIcon.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, } from "react";
+import React, { forwardRef } from "react";
 import cn from "classnames";
@@ -32,3 +32,3 @@ import { bem } from "@react-md/utils";
  */
-function SVGIcon(_a, ref) {
+var SVGIcon = forwardRef(function SVGIcon(_a, ref) {
     var _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.focusable, focusable = _c === void 0 ? "false" : _c, _d = _a.xmlns, xmlns = _d === void 0 ? "http://www.w3.org/2000/svg" : _d, _e = _a.viewBox, viewBox = _e === void 0 ? "0 0 24 24" : _e, _f = _a.dense, dense = _f === void 0 ? false : _f, className = _a.className, use = _a.use, propChildren = _a.children, props = __rest(_a, ["aria-hidden", "focusable", "xmlns", "viewBox", "dense", "className", "use", "children"]);
@@ -40,8 +40,7 @@ var children = propChildren;
     return (React.createElement("svg", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: cn(block({ svg: true, dense: dense }), className), focusable: focusable, xmlns: xmlns, viewBox: viewBox }), children));
-}
-var ForwardedSVGIcon = forwardRef(SVGIcon);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedSVGIcon.propTypes = {
+        SVGIcon.propTypes = {
             className: PropTypes.string,
@@ -61,3 +60,3 @@ role: PropTypes.string,
 }
-export default ForwardedSVGIcon;
+export default SVGIcon;
 //# sourceMappingURL=SVGIcon.js.map

lib/FontIcon.d.ts

@@ -28,3 +28,12 @@ import React, { HTMLAttributes, ReactNode } from "react";
 }
-declare const ForwardedFontIcon: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>;
-export default ForwardedFontIcon;
+/**
+ * The `FontIcon` component is used for rendering a font-icon library's icon.
+ * The default is to use the `material-icons` library, but others can be used as
+ * well.
+ *
+ * If you are using another font icon library that does not always create icons
+ * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
+ * `forceSize` and `forceFontSize` props to fix the sizing issues.
+ */
+declare const FontIcon: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>;
+export default FontIcon;

lib/FontIcon.js

@@ -48,3 +48,3 @@ "use strict";
  */
-function FontIcon(_a, ref) {
+var FontIcon = react_1.forwardRef(function FontIcon(_a, ref) {
     var className = _a.className, children = _a.children, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.iconClassName, iconClassName = _d === void 0 ? "material-icons" : _d, _e = _a.forceSize, forceSize = _e === void 0 ? false : _e, _f = _a.forceFontSize, forceFontSize = _f === void 0 ? false : _f, props = __rest(_a, ["className", "children", "aria-hidden", "dense", "iconClassName", "forceSize", "forceFontSize"]);
@@ -57,8 +57,7 @@ return (react_1.default.createElement("i", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: classnames_1.default(block({
         }), iconClassName, className) }), children));
-}
-var ForwardedFontIcon = react_1.forwardRef(FontIcon);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedFontIcon.propTypes = {
+        FontIcon.propTypes = {
             "aria-hidden": PropTypes.oneOfType([
@@ -78,3 +77,3 @@ PropTypes.oneOf(["true", "false"]),
 }
-exports.default = ForwardedFontIcon;
+exports.default = FontIcon;
 //# sourceMappingURL=FontIcon.js.map

lib/IconRotator.d.ts

@@ -1,2 +0,5 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import React, { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare type CloneableClassNameChild = ReactElement<{
+    className?: string;
+}>;
 export interface IconRotatorBaseProps extends HTMLAttributes<HTMLSpanElement> {
@@ -35,3 +38,7 @@ /**
 }
-declare const ForwardedIconRotator: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>;
-export default ForwardedIconRotator;
+/**
+ * The `IconRotator` is a simple component that is used to rotate an icon from a
+ * one degrees to another.
+ */
+declare const IconRotator: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default IconRotator;

lib/IconRotator.js

@@ -43,3 +43,3 @@ "use strict";
  */
-function IconRotator(_a, ref) {
+var IconRotator = react_1.forwardRef(function IconRotator(_a, ref) {
     var style = _a.style, propClassName = _a.className, _b = _a.animate, animate = _b === void 0 ? true : _b, rotated = _a.rotated, children = _a.children, _c = _a.forceIconWrap, forceIconWrap = _c === void 0 ? false : _c, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap"]);
@@ -54,8 +54,8 @@ var className = classnames_1.default(block({ animate: animate, rotated: rotated }), propClassName);
     return (react_1.default.createElement("span", __assign({}, props, { style: style, className: className, ref: ref }), children));
-}
-var ForwardedIconRotator = react_1.forwardRef(IconRotator);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedIconRotator.propTypes = {
+        IconRotator.propTypes = {
+            style: PropTypes.object,
             className: PropTypes.string,
@@ -70,3 +70,3 @@ animate: PropTypes.bool,
 }
-exports.default = ForwardedIconRotator;
+exports.default = IconRotator;
 //# sourceMappingURL=IconRotator.js.map

lib/SVGIcon.d.ts

@@ -56,3 +56,7 @@ import React, { HTMLAttributes, ReactNode } from "react";
 }
-declare const ForwardedSVGIcon: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>;
-export default ForwardedSVGIcon;
+/**
+ * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
+ * sprite map as an icon.
+ */
+declare const SVGIcon: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>;
+export default SVGIcon;

lib/SVGIcon.js

@@ -43,3 +43,3 @@ "use strict";
  */
-function SVGIcon(_a, ref) {
+var SVGIcon = react_1.forwardRef(function SVGIcon(_a, ref) {
     var _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.focusable, focusable = _c === void 0 ? "false" : _c, _d = _a.xmlns, xmlns = _d === void 0 ? "http://www.w3.org/2000/svg" : _d, _e = _a.viewBox, viewBox = _e === void 0 ? "0 0 24 24" : _e, _f = _a.dense, dense = _f === void 0 ? false : _f, className = _a.className, use = _a.use, propChildren = _a.children, props = __rest(_a, ["aria-hidden", "focusable", "xmlns", "viewBox", "dense", "className", "use", "children"]);
@@ -51,8 +51,7 @@ var children = propChildren;
     return (react_1.default.createElement("svg", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: classnames_1.default(block({ svg: true, dense: dense }), className), focusable: focusable, xmlns: xmlns, viewBox: viewBox }), children));
-}
-var ForwardedSVGIcon = react_1.forwardRef(SVGIcon);
+});
 if (process.env.NODE_ENV !== "production") {
     try {
         var PropTypes = require("prop-types");
-        ForwardedSVGIcon.propTypes = {
+        SVGIcon.propTypes = {
             className: PropTypes.string,
@@ -72,3 +71,3 @@ role: PropTypes.string,
 }
-exports.default = ForwardedSVGIcon;
+exports.default = SVGIcon;
 //# sourceMappingURL=SVGIcon.js.map

lib/TextIconSpacing.d.ts

@@ -20,3 +20,3 @@ import { FC, ReactElement, ReactNode } from "react";
      */
-    icon?: ReactElement<Element> | ReactNode;
+    icon?: ReactElement | ReactNode;
     /**
@@ -23,0 +23,0 @@ * Boolean if the icon should appear after the text instead of before.

package.json

 {
   "name": "@react-md/icon",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-beta.0",
   "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.",
@@ -40,5 +40,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.15",
-    "@react-md/typography": "^2.0.0-alpha.15",
-    "@react-md/utils": "^2.0.0-alpha.15",
+    "@react-md/theme": "^2.0.0-beta.0",
+    "@react-md/typography": "^2.0.0-beta.0",
+    "@react-md/utils": "^2.0.0-beta.0",
     "classnames": "^2.2.6"
@@ -55,3 +55,3 @@ },
   },
-  "gitHead": "c20671308497530c59f6563eafd1914b55122b8c"
+  "gitHead": "8d754a2c2734ee98eaf571e348a836cf12a9f104"
 }

types/FontIcon.d.ts

@@ -28,3 +28,12 @@ import React, { HTMLAttributes, ReactNode } from "react";
 }
-declare const ForwardedFontIcon: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>;
-export default ForwardedFontIcon;
+/**
+ * The `FontIcon` component is used for rendering a font-icon library's icon.
+ * The default is to use the `material-icons` library, but others can be used as
+ * well.
+ *
+ * If you are using another font icon library that does not always create icons
+ * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
+ * `forceSize` and `forceFontSize` props to fix the sizing issues.
+ */
+declare const FontIcon: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>;
+export default FontIcon;

types/IconRotator.d.ts

@@ -1,2 +0,5 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import React, { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare type CloneableClassNameChild = ReactElement<{
+    className?: string;
+}>;
 export interface IconRotatorBaseProps extends HTMLAttributes<HTMLSpanElement> {
@@ -35,3 +38,7 @@ /**
 }
-declare const ForwardedIconRotator: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>;
-export default ForwardedIconRotator;
+/**
+ * The `IconRotator` is a simple component that is used to rotate an icon from a
+ * one degrees to another.
+ */
+declare const IconRotator: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default IconRotator;

types/SVGIcon.d.ts

@@ -56,3 +56,7 @@ import React, { HTMLAttributes, ReactNode } from "react";
 }
-declare const ForwardedSVGIcon: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>;
-export default ForwardedSVGIcon;
+/**
+ * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a
+ * sprite map as an icon.
+ */
+declare const SVGIcon: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>;
+export default SVGIcon;

types/TextIconSpacing.d.ts

@@ -20,3 +20,3 @@ import { FC, ReactElement, ReactNode } from "react";
      */
-    icon?: ReactElement<Element> | ReactNode;
+    icon?: ReactElement | ReactNode;
     /**
@@ -23,0 +23,0 @@ * Boolean if the icon should appear after the text instead of before.

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

180514

increased by0.58%

Lines of code

2323

increased by0.96%

Dependency changes

• Updated@react-md/theme@^2.0.0-beta.0

• Updated@react-md/typography@^2.0.0-beta.0

• Updated@react-md/utils@^2.0.0-beta.0