@uiw/react-icon - npm Package Compare versions

Comparing version 4.21.14 to 5.0.0-bate-0

cjs/index.d.ts

 import React from 'react';
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
-import './style/index.less';
+export * from './style';
 export declare type IconsName = keyof typeof svgPaths;
@@ -20,3 +20,3 @@ declare type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
 }
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.ReactElement<{}, string | React.JSXElementConstructor<any>> | null;
-export {};
+export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.DOMElement<any, Element> | null;
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -8,2 +8,3 @@ "use strict";
 });
+var _exportNames = {};
 exports["default"] = Icon;
@@ -19,2 +20,16 @@
 
+var _style = require("./style");
+
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -64,6 +79,8 @@
   });
-  return /*#__PURE__*/_react["default"].createElement(TagName, (0, _objectSpread2["default"])({}, propps), svg);
+  return /*#__PURE__*/_react["default"].createElement(_style.IconStyleBase, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, propps), {}, {
+    verticalAlign: verticalAlign,
+    spin: spin,
+    as: TagName
+  }), svg);
 }
-
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

 import React from 'react';
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
-import './style/index.less';
+export * from './style';
 export declare type IconsName = keyof typeof svgPaths;
@@ -20,3 +20,3 @@ declare type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
 }
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.ReactElement<{}, string | React.JSXElementConstructor<any>> | null;
-export {};
+export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>): React.DOMElement<any, Element> | null;
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -6,4 +6,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
-import "./style/index.css";
+import { IconStyleBase } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
+export * from './style';
 export default function Icon(props) {
@@ -48,4 +49,8 @@ var {
 
-  return /*#__PURE__*/React.createElement(TagName, _extends({}, propps), svg);
+  return /*#__PURE__*/React.createElement(IconStyleBase, _extends({}, propps, {
+    verticalAlign,
+    spin,
+    as: TagName
+  }), svg);
 }
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-icon",
-  "version": "4.21.14",
+  "version": "5.0.0-bate-0",
   "description": "Icon component",
@@ -44,7 +44,8 @@ "author": "Kenny Wong <[e-mail]>",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/icons": "~2.6.0"
+    "@uiw/icons": "2.6.1"
   }
 }

README.md

@@ -18,6 +18,4 @@ Icon 图标
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Input, CopyToClipboard, Icon, Notify } from 'uiw';
@@ -84,3 +82,3 @@
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -125,8 +123,7 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo =()=>(
   <div style={{ fontSize: 18, lineHeight: '12px' }}>
@@ -136,5 +133,6 @@ <Icon type="heart-on" />
     <Icon type="tag" />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
+
 ```
@@ -146,8 +144,7 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ fontSize: '28px' }}>
@@ -157,5 +154,5 @@ <Icon type="heart-on" />
     <Icon type="tag" />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -170,8 +167,7 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ fontSize: '28px',color: 'green' }}>
@@ -182,5 +178,5 @@ <Icon type="apple" color="red" />
     <Icon type="uiw" style={{stroke: 'red',fill: '#ffef00'}} />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -190,13 +186,13 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign="baseline" type="baidu" /></h3>
     <span>uiw</span><Icon type="uiw" verticalAlign="baseline" style={{ fill: '#009688', fontSize: 21 }} />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -208,14 +204,13 @@
 
-> \[形状?\]-\[图标名\]-\[描线?\]-\[方向?\]  
-> 方向：`down`、`up`、`left`、`right`  
-> 描线：`-o` 图标添加边框描线  
-> 默认：`w-icon-` 默认引用的字体文件作用域  
-> 自定定义：`w-icon-uiw-` 自定定义作用域  
+> \[形状?\]-\[图标名\]-\[描线?\]-\[方向?\]
+> 方向：`down`、`up`、`left`、`right`
+> 描线：`-o` 图标添加边框描线
+> 默认：`w-icon-` 默认引用的字体文件作用域
+> 自定定义：`w-icon-uiw-` 自定定义作用域
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo = () => (
   <div>
@@ -225,5 +220,5 @@ <Icon type="circle-close" verticalAlign="baseline" />  图标名称：circle-close，[circle圈]-[关闭close]
     <Icon type="circle-close-o" verticalAlign="baseline" /> 图标名称：circle-close-o，[circle圈]-[关闭close]-[o描线]
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -235,8 +230,7 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ fontSize: 21, color: 'green' }}>
@@ -247,5 +241,5 @@ <Icon type="loading" spin={true} color="red" />
     <Icon type="smile-o" spin={true} style={{fill: 'blue'}} />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -255,5 +249,4 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
-import ReactDOM from 'react-dom';
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -273,9 +266,9 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ fontSize: 21, color: 'green' }}>
     <Icon style={styl} type={chat} color="red" />
     <Icon style={styl} type={contrast} spin={true} />
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -329,5 +322,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -343,3 +335,3 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -354,5 +346,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -362,5 +354,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -375,3 +366,3 @@
 }
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -386,5 +377,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -394,5 +385,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -411,3 +401,3 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -422,5 +412,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -430,9 +420,8 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
 
 const iconList = [
-  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh', 
+  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',
   'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',
@@ -446,3 +435,3 @@ 'question-circle-o', 'question-circle', 'stop-o', 'stop',
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -457,5 +446,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -465,5 +454,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -473,3 +461,3 @@
  'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',
- 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o', 
+ 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',
  'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',
@@ -483,3 +471,3 @@ 'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -494,5 +482,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -502,5 +490,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -510,3 +497,3 @@
   'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',
-  'folder-add', 'folder-open', 'paper-clip', 
+  'folder-add', 'folder-open', 'paper-clip',
 ]
@@ -518,3 +505,3 @@ const itemStyl = {
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -529,5 +516,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -537,5 +524,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -558,3 +544,3 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -569,5 +555,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -577,5 +563,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -590,3 +575,3 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -601,5 +586,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```
@@ -609,5 +594,4 @@
 
-<!--rehype:bgWhite=true&noCode=true&codeSandbox=true&codePen=true-->
-```js
-import ReactDOM from 'react-dom';
+```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true
+import React from "react"
 import { Icon } from 'uiw';
@@ -621,3 +605,3 @@
 
-ReactDOM.render(
+const Demo = () => (
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>
@@ -632,5 +616,5 @@ {iconList.map((type, idx) => {
     })}
-  </div>,
-  _mount_
+  </div>
 );
+export default Demo
 ```

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

47985

increased by18.11%

Number of package files

16

increased by14.29%

Lines of code

317

increased by14.44%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

577

decreased by-2.7%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Added@uiw/icons@2.6.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@uiw/icons@2.6.10(transitive)

• Updated@uiw/icons@2.6.1