@uiw/react-icon - npm Package Compare versions

Comparing version 4.21.28 to 4.22.0

cjs/index.d.ts

 import React from 'react';
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
 import './style/index.less';
-export declare type IconsName = keyof typeof svgPaths;
-declare type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
-export interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {
+export type IconsName = keyof typeof svgPaths;
+export type IconTagType = React.ElementType | keyof JSX.IntrinsicElements;
+type ElementProps<T extends IconTagType, E = React.ReactElement> = {
+    fill?: string;
     style?: React.CSSProperties;
@@ -14,3 +15,3 @@ className?: string;
      */
-    tagName?: Tag;
+    tagName?: T;
     type?: IconsName | null | E;
@@ -20,4 +21,5 @@ spin?: boolean;
     verticalAlign?: 'middle' | 'baseline';
-}
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.ReactElement<{}, string | React.JSXElementConstructor<any>> | null;
-export {};
+};
+export type IconProps<T extends IconTagType> = ElementProps<T> & React.ComponentPropsWithoutRef<T>;
+declare const Icon: <T extends IconTagType = "span">(props: IconProps<T>) => React.JSX.Element;
+export default Icon;

cjs/index.js

@@ -7,3 +7,3 @@ "use strict";
 });
-exports["default"] = Icon;
+exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -14,4 +14,4 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "prefixCls", "verticalAlign", "tagName", "color", "type", "spin"];
-function Icon(props) {
+var _excluded = ["className", "prefixCls", "verticalAlign", "tagName", "color", "type", "spin", "style"];
+var Icon = function Icon(props) {
   var className = props.className,
@@ -23,3 +23,3 @@ _props$prefixCls = props.prefixCls,
     _props$tagName = props.tagName,
-    TagName = _props$tagName === void 0 ? 'span' : _props$tagName,
+    Element = _props$tagName === void 0 ? 'span' : _props$tagName,
     color = props.color,
@@ -29,7 +29,8 @@ type = props.type,
     spin = _props$spin === void 0 ? false : _props$spin,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    style = props.style,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var svg = null;
   if (typeof type === 'string') {
     svg = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-      fill: color,
+      fill: color || props.fill,
       viewBox: "0 0 20 20",
@@ -43,18 +44,16 @@ children: (_wIcon["default"][type] || []).map(function (d, i) {
     });
-  } else if ( /*#__PURE__*/_react["default"].isValidElement(type)) {
-    svg = /*#__PURE__*/_react["default"].cloneElement(type, {
-      fill: color
-    });
-  } else {
-    return null;
   }
-  others.style = (0, _objectSpread2["default"])({
+  var initStyle = (0, _objectSpread2["default"])({
     fill: 'currentColor'
-  }, others.style);
-  var propps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
-    className: [prefixCls, className, prefixCls && verticalAlign ? "".concat(prefixCls, "-").concat(verticalAlign) : null, spin && prefixCls ? "".concat(prefixCls, "-spin") : null].filter(Boolean).join(' ').trim()
-  });
-  return /*#__PURE__*/_react["default"].createElement(TagName, (0, _objectSpread2["default"])({}, propps), svg);
-}
-module.exports = exports.default;
-//# sourceMappingURL=index.js.map
+  }, style);
+  var cls = [prefixCls, className, prefixCls && verticalAlign ? "".concat(prefixCls, "-").concat(verticalAlign) : null, spin && prefixCls ? "".concat(prefixCls, "-spin") : null].filter(Boolean).join(' ').trim();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: cls
+  }, reset), {}, {
+    style: initStyle,
+    children: svg
+  }));
+};
+var _default = Icon;
+exports["default"] = _default;
+module.exports = exports.default;

esm/index.d.ts

 import React from 'react';
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
 import './style/index.less';
-export declare type IconsName = keyof typeof svgPaths;
-declare type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
-export interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {
+export type IconsName = keyof typeof svgPaths;
+export type IconTagType = React.ElementType | keyof JSX.IntrinsicElements;
+type ElementProps<T extends IconTagType, E = React.ReactElement> = {
+    fill?: string;
     style?: React.CSSProperties;
@@ -14,3 +15,3 @@ className?: string;
      */
-    tagName?: Tag;
+    tagName?: T;
     type?: IconsName | null | E;
@@ -20,4 +21,5 @@ spin?: boolean;
     verticalAlign?: 'middle' | 'baseline';
-}
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.ReactElement<{}, string | React.JSXElementConstructor<any>> | null;
-export {};
+};
+export type IconProps<T extends IconTagType> = ElementProps<T> & React.ComponentPropsWithoutRef<T>;
+declare const Icon: <T extends IconTagType = "span">(props: IconProps<T>) => React.JSX.Element;
+export default Icon;

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "prefixCls", "verticalAlign", "tagName", "color", "type", "spin"];
+var _excluded = ["className", "prefixCls", "verticalAlign", "tagName", "color", "type", "spin", "style"];
 import React from 'react';
@@ -8,3 +8,3 @@ import svgPaths from '@uiw/icons/fonts/w-icon.json';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Icon(props) {
+var Icon = props => {
   var {
@@ -14,12 +14,13 @@ className,
       verticalAlign = 'middle',
-      tagName: TagName = 'span',
+      tagName: Element = 'span',
       color,
       type,
-      spin = false
+      spin = false,
+      style
     } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded);
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
   var svg = null;
   if (typeof type === 'string') {
     svg = /*#__PURE__*/_jsx("svg", {
-      fill: color,
+      fill: color || props.fill,
       viewBox: "0 0 20 20",
@@ -31,17 +32,14 @@ children: (svgPaths[type] || []).map((d, i) => /*#__PURE__*/_jsx("path", {
     });
-  } else if ( /*#__PURE__*/React.isValidElement(type)) {
-    svg = /*#__PURE__*/React.cloneElement(type, {
-      fill: color
-    });
-  } else {
-    return null;
   }
-  others.style = _extends({
+  var initStyle = _extends({
     fill: 'currentColor'
-  }, others.style);
-  var propps = _extends({}, others, {
-    className: [prefixCls, className, prefixCls && verticalAlign ? prefixCls + "-" + verticalAlign : null, spin && prefixCls ? prefixCls + "-spin" : null].filter(Boolean).join(' ').trim()
-  });
-  return /*#__PURE__*/React.createElement(TagName, _extends({}, propps), svg);
-}
-//# sourceMappingURL=index.js.map
+  }, style);
+  var cls = [prefixCls, className, prefixCls && verticalAlign ? prefixCls + "-" + verticalAlign : null, spin && prefixCls ? prefixCls + "-spin" : null].filter(Boolean).join(' ').trim();
+  return /*#__PURE__*/_jsx(Element, _extends({
+    className: cls
+  }, reset, {
+    style: initStyle,
+    children: svg
+  }));
+};
+export default Icon;

package.json

 {
   "name": "@uiw/react-icon",
-  "version": "4.21.28",
+  "version": "4.22.0",
   "description": "Icon component",
@@ -5,0 +5,0 @@ "author": "Kenny Wong <[e-mail]>",

src/index.tsx

@@ -6,5 +6,5 @@ import React from 'react';
 export type IconsName = keyof typeof svgPaths;
-type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
-
-export interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {
+export type IconTagType = React.ElementType | keyof JSX.IntrinsicElements;
+type ElementProps<T extends IconTagType, E = React.ReactElement> = {
+  fill?: string;
   style?: React.CSSProperties;
@@ -17,3 +17,3 @@ className?: string;
    */
-  tagName?: Tag;
+  tagName?: T;
   type?: IconsName | null | E;
@@ -23,5 +23,7 @@ spin?: boolean;
   verticalAlign?: 'middle' | 'baseline';
-}
+};
 
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>) {
+export type IconProps<T extends IconTagType> = ElementProps<T> & React.ComponentPropsWithoutRef<T>;
+
+const Icon = <T extends IconTagType = 'span'>(props: IconProps<T>) => {
   const {
@@ -31,7 +33,8 @@ className,
     verticalAlign = 'middle',
-    tagName: TagName = 'span',
+    tagName: Element = 'span',
     color,
     type,
     spin = false,
-    ...others
+    style,
+    ...reset
   } = props;
@@ -42,4 +45,4 @@
     svg = (
-      <svg fill={color} viewBox="0 0 20 20">
-        {(svgPaths[type] || []).map((d, i) => (
+      <svg fill={color || props.fill} viewBox="0 0 20 20">
+        {(svgPaths[type as IconsName] || []).map((d, i) => (
           <path key={i} d={d} fillRule="evenodd" />
@@ -49,24 +52,20 @@ ))}
     );
-  } else if (React.isValidElement(type)) {
-    svg = React.cloneElement(type, {
-      fill: color,
-    });
-  } else {
-    return null;
   }
-  others.style = { fill: 'currentColor', ...others.style };
-  const propps = {
-    ...others,
-    className: [
-      prefixCls,
-      className,
-      prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,
-      spin && prefixCls ? `${prefixCls}-spin` : null,
-    ]
-      .filter(Boolean)
-      .join(' ')
-      .trim(),
-  };
+  const initStyle = { fill: 'currentColor', ...style };
+  const cls = [
+    prefixCls,
+    className,
+    prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,
+    spin && prefixCls ? `${prefixCls}-spin` : null,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <Element className={cls} {...reset} style={initStyle}>
+      {svg}
+    </Element>
+  );
+};
 
-  return React.createElement(TagName, { ...propps } as any, svg);
-}
+export default Icon;

cjs/index.js.map

-{
-  "version": 3,
-  "names": [
-    "_react",
-    "_interopRequireDefault",
-    "require",
-    "_wIcon",
-    "_jsxRuntime",
-    "_excluded",
-    "Icon",
-    "props",
-    "className",
-    "_props$prefixCls",
-    "prefixCls",
-    "_props$verticalAlign",
-    "verticalAlign",
-    "_props$tagName",
-    "tagName",
-    "TagName",
-    "color",
-    "type",
-    "_props$spin",
-    "spin",
-    "others",
-    "_objectWithoutProperties2",
-    "svg",
-    "jsx",
-    "fill",
-    "viewBox",
-    "children",
-    "svgPaths",
-    "map",
-    "d",
-    "i",
-    "fillRule",
-    "React",
-    "isValidElement",
-    "cloneElement",
-    "style",
-    "_objectSpread2",
-    "propps",
-    "concat",
-    "filter",
-    "Boolean",
-    "join",
-    "trim",
-    "createElement",
-    "module",
-    "exports",
-    "default"
-  ],
-  "sources": [
-    "../src/index.tsx"
-  ],
-  "sourcesContent": [
-    "import React from 'react';\nimport svgPaths from '@uiw/icons/fonts/w-icon.json';\nimport './style/index.less';\n\nexport type IconsName = keyof typeof svgPaths;\ntype TagType = React.ComponentType | keyof JSX.IntrinsicElements;\n\nexport interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {\n  style?: React.CSSProperties;\n  className?: string;\n  prefixCls?: string;\n  /**\n   * HTML tag to use for the rendered element.\n   * @default \"span\"\n   */\n  tagName?: Tag;\n  type?: IconsName | null | E;\n  spin?: boolean;\n  color?: string;\n  verticalAlign?: 'middle' | 'baseline';\n}\n\nexport default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>) {\n  const {\n    className,\n    prefixCls = 'w-icon',\n    verticalAlign = 'middle',\n    tagName: TagName = 'span',\n    color,\n    type,\n    spin = false,\n    ...others\n  } = props;\n\n  let svg = null;\n  if (typeof type === 'string') {\n    svg = (\n      <svg fill={color} viewBox=\"0 0 20 20\">\n        {(svgPaths[type] || []).map((d, i) => (\n          <path key={i} d={d} fillRule=\"evenodd\" />\n        ))}\n      </svg>\n    );\n  } else if (React.isValidElement(type)) {\n    svg = React.cloneElement(type, {\n      fill: color,\n    });\n  } else {\n    return null;\n  }\n  others.style = { fill: 'currentColor', ...others.style };\n  const propps = {\n    ...others,\n    className: [\n      prefixCls,\n      className,\n      prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,\n      spin && prefixCls ? `${prefixCls}-spin` : null,\n    ]\n      .filter(Boolean)\n      .join(' ')\n      .trim(),\n  };\n\n  return React.createElement(TagName, { ...propps } as any, svg);\n}\n"
-  ],
-  "mappings": ";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAoD,IAAAE,WAAA,GAAAF,OAAA;AAAA,IAAAG,SAAA;AAqBrC,SAASC,IAAIA,CAA+BC,KAAqB,EAAE;EAChF,IACEC,SAAS,GAQPD,KAAK,CARPC,SAAS;IAAAC,gBAAA,GAQPF,KAAK,CAPPG,SAAS;IAATA,SAAS,GAAAD,gBAAA,cAAG,QAAQ,GAAAA,gBAAA;IAAAE,oBAAA,GAOlBJ,KAAK,CANPK,aAAa;IAAbA,aAAa,GAAAD,oBAAA,cAAG,QAAQ,GAAAA,oBAAA;IAAAE,cAAA,GAMtBN,KAAK,CALPO,OAAO;IAAEC,OAAO,GAAAF,cAAA,cAAG,MAAM,GAAAA,cAAA;IACzBG,KAAK,GAIHT,KAAK,CAJPS,KAAK;IACLC,IAAI,GAGFV,KAAK,CAHPU,IAAI;IAAAC,WAAA,GAGFX,KAAK,CAFPY,IAAI;IAAJA,IAAI,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IACTE,MAAM,OAAAC,yBAAA,aACPd,KAAK,EAAAF,SAAA;EAET,IAAIiB,GAAG,GAAG,IAAI;EACd,IAAI,OAAOL,IAAI,KAAK,QAAQ,EAAE;IAC5BK,GAAG,gBACD,IAAAlB,WAAA,CAAAmB,GAAA;MAAKC,IAAI,EAAER,KAAM;MAACS,OAAO,EAAC,WAAW;MAAAC,QAAA,EAClC,CAACC,iBAAQ,CAACV,IAAI,CAAC,IAAI,EAAE,EAAEW,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC;QAAA,oBAC/B,IAAA1B,WAAA,CAAAmB,GAAA;UAAcM,CAAC,EAAEA,CAAE;UAACE,QAAQ,EAAC;QAAS,GAA3BD,CAA6B,CAAC;MAAA,CAC1C;IAAC,CACC,CACN;EACH,CAAC,MAAM,kBAAIE,iBAAK,CAACC,cAAc,CAAChB,IAAI,CAAC,EAAE;IACrCK,GAAG,gBAAGU,iBAAK,CAACE,YAAY,CAACjB,IAAI,EAAE;MAC7BO,IAAI,EAAER;IACR,CAAC,CAAC;EACJ,CAAC,MAAM;IACL,OAAO,IAAI;EACb;EACAI,MAAM,CAACe,KAAK,OAAAC,cAAA;IAAKZ,IAAI,EAAE;EAAc,GAAKJ,MAAM,CAACe,KAAK,CAAE;EACxD,IAAME,MAAM,OAAAD,cAAA,iBAAAA,cAAA,iBACPhB,MAAM;IACTZ,SAAS,EAAE,CACTE,SAAS,EACTF,SAAS,EACTE,SAAS,IAAIE,aAAa,MAAA0B,MAAA,CAAM5B,SAAS,OAAA4B,MAAA,CAAI1B,aAAa,IAAK,IAAI,EACnEO,IAAI,IAAIT,SAAS,MAAA4B,MAAA,CAAM5B,SAAS,aAAU,IAAI,CAC/C,CACE6B,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC,CACTC,IAAI,CAAC;EAAC,EACV;EAED,oBAAOV,iBAAK,CAACW,aAAa,CAAC5B,OAAO,MAAAqB,cAAA,iBAAOC,MAAM,GAAWf,GAAG,CAAC;AAChE;AAACsB,MAAA,CAAAC,OAAA,GAAAA,OAAA,CAAAC,OAAA"
-}

esm/index.js.map

-{
-  "version": 3,
-  "names": [
-    "React",
-    "svgPaths",
-    "jsx",
-    "_jsx",
-    "Icon",
-    "props",
-    "className",
-    "prefixCls",
-    "verticalAlign",
-    "tagName",
-    "TagName",
-    "color",
-    "type",
-    "spin",
-    "others",
-    "_objectWithoutPropertiesLoose",
-    "_excluded",
-    "svg",
-    "fill",
-    "viewBox",
-    "children",
-    "map",
-    "d",
-    "i",
-    "fillRule",
-    "isValidElement",
-    "cloneElement",
-    "style",
-    "_extends",
-    "propps",
-    "filter",
-    "Boolean",
-    "join",
-    "trim",
-    "createElement"
-  ],
-  "sources": [
-    "../src/index.tsx"
-  ],
-  "sourcesContent": [
-    "import React from 'react';\nimport svgPaths from '@uiw/icons/fonts/w-icon.json';\nimport './style/index.less';\n\nexport type IconsName = keyof typeof svgPaths;\ntype TagType = React.ComponentType | keyof JSX.IntrinsicElements;\n\nexport interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {\n  style?: React.CSSProperties;\n  className?: string;\n  prefixCls?: string;\n  /**\n   * HTML tag to use for the rendered element.\n   * @default \"span\"\n   */\n  tagName?: Tag;\n  type?: IconsName | null | E;\n  spin?: boolean;\n  color?: string;\n  verticalAlign?: 'middle' | 'baseline';\n}\n\nexport default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>) {\n  const {\n    className,\n    prefixCls = 'w-icon',\n    verticalAlign = 'middle',\n    tagName: TagName = 'span',\n    color,\n    type,\n    spin = false,\n    ...others\n  } = props;\n\n  let svg = null;\n  if (typeof type === 'string') {\n    svg = (\n      <svg fill={color} viewBox=\"0 0 20 20\">\n        {(svgPaths[type] || []).map((d, i) => (\n          <path key={i} d={d} fillRule=\"evenodd\" />\n        ))}\n      </svg>\n    );\n  } else if (React.isValidElement(type)) {\n    svg = React.cloneElement(type, {\n      fill: color,\n    });\n  } else {\n    return null;\n  }\n  others.style = { fill: 'currentColor', ...others.style };\n  const propps = {\n    ...others,\n    className: [\n      prefixCls,\n      className,\n      prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,\n      spin && prefixCls ? `${prefixCls}-spin` : null,\n    ]\n      .filter(Boolean)\n      .join(' ')\n      .trim(),\n  };\n\n  return React.createElement(TagName, { ...propps } as any, svg);\n}\n"
-  ],
-  "mappings": ";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,8BAA8B;AACnD;AAA4B,SAAAC,GAAA,IAAAC,IAAA;AAoB5B,eAAe,SAASC,IAAIA,CAA+BC,KAAqB,EAAE;EAChF,IAAM;MACJC,SAAS;MACTC,SAAS,GAAG,QAAQ;MACpBC,aAAa,GAAG,QAAQ;MACxBC,OAAO,EAAEC,OAAO,GAAG,MAAM;MACzBC,KAAK;MACLC,IAAI;MACJC,IAAI,GAAG;IAET,CAAC,GAAGR,KAAK;IADJS,MAAM,GAAAC,6BAAA,CACPV,KAAK,EAAAW,SAAA;EAET,IAAIC,GAAG,GAAG,IAAI;EACd,IAAI,OAAOL,IAAI,KAAK,QAAQ,EAAE;IAC5BK,GAAG,gBACDd,IAAA;MAAKe,IAAI,EAAEP,KAAM;MAACQ,OAAO,EAAC,WAAW;MAAAC,QAAA,EAClC,CAACnB,QAAQ,CAACW,IAAI,CAAC,IAAI,EAAE,EAAES,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC/BpB,IAAA;QAAcmB,CAAC,EAAEA,CAAE;QAACE,QAAQ,EAAC;MAAS,GAA3BD,CAA6B,CACzC;IAAC,CACC,CACN;EACH,CAAC,MAAM,kBAAIvB,KAAK,CAACyB,cAAc,CAACb,IAAI,CAAC,EAAE;IACrCK,GAAG,gBAAGjB,KAAK,CAAC0B,YAAY,CAACd,IAAI,EAAE;MAC7BM,IAAI,EAAEP;IACR,CAAC,CAAC;EACJ,CAAC,MAAM;IACL,OAAO,IAAI;EACb;EACAG,MAAM,CAACa,KAAK,GAAAC,QAAA;IAAKV,IAAI,EAAE;EAAc,GAAKJ,MAAM,CAACa,KAAK,CAAE;EACxD,IAAME,MAAM,GAAAD,QAAA,KACPd,MAAM;IACTR,SAAS,EAAE,CACTC,SAAS,EACTD,SAAS,EACTC,SAAS,IAAIC,aAAa,GAAMD,SAAS,SAAIC,aAAa,GAAK,IAAI,EACnEK,IAAI,IAAIN,SAAS,GAAMA,SAAS,aAAU,IAAI,CAC/C,CACEuB,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC,CACTC,IAAI,CAAC;EAAC,EACV;EAED,oBAAOjC,KAAK,CAACkC,aAAa,CAACxB,OAAO,EAAAkB,QAAA,KAAOC,MAAM,GAAWZ,GAAG,CAAC;AAChE"
-}

No alert changes

Worsened metrics

Total package byte prevSize

33016

-20.09%

Number of package files

12

-14.29%

No dependency changes