@lendi-ui/icon - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/cjs/index.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var loadedSpritesheet = false;
-var Icon = /** @class */ (function (_super) {
-    __extends(Icon, _super);
-    function Icon(props) {
-        return _super.call(this, props) || this;
-    }
-    Icon.prototype.mountSVGSpritesheet = function (response) {
-        var svgWrapper = document.createElement('div');
-        svgWrapper.setAttribute('id', 'svg-icons');
-        svgWrapper.setAttribute('style', 'display:none;');
-        svgWrapper.innerHTML = response;
-        document.body.insertAdjacentHTML('afterbegin', svgWrapper.outerHTML);
-        loadedSpritesheet = true;
-    };
-    Icon.prototype.componentDidMount = function () {
-        var _this = this;
-        if (!loadedSpritesheet) {
-            loadedSpritesheet = true;
-            fetch('./sprite.symbol.svg')
-                .then(function (res) { return res.text(); })
-                .then(function (text) {
-                _this.mountSVGSpritesheet(text);
-            })
-                .catch(function (error) {
-                /* tslint:disable-next-line no-console */
-                console.warn(error);
-                loadedSpritesheet = false;
-            });
-        }
-        return undefined;
-    };
-    Icon.prototype.render = function () {
-        return (React.createElement("svg", { className: this.props.className, focusable: "false", role: "img" },
-            React.createElement("use", { href: "#" + this.props.name })));
-    };
-    Icon.defaultProps = {
-        className: undefined,
-    };
-    return Icon;
-}(React.Component));
-exports.Icon = Icon;
+var styled_components_1 = require("styled-components");
+var color_1 = require("@lendi-ui/color");
+var index_1 = require("./icons-compiled/index");
+var IconWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & > svg {\n    fill: ", ";\n  }\n"], ["\n  & > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var fill = _a.fill;
+    return color_1.color(fill);
+});
+var Icon = function (_a) {
+    var name = _a.name, color = _a.color;
+    var Svg = index_1.Icons[name];
+    return (React.createElement(IconWrapper, { fill: color },
+        React.createElement(Svg, null)));
+};
 exports.default = Icon;
+var templateObject_1;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,57 +0,21 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import * as React from 'react';
-var loadedSpritesheet = false;
-var Icon = /** @class */ (function (_super) {
-    __extends(Icon, _super);
-    function Icon(props) {
-        return _super.call(this, props) || this;
-    }
-    Icon.prototype.mountSVGSpritesheet = function (response) {
-        var svgWrapper = document.createElement('div');
-        svgWrapper.setAttribute('id', 'svg-icons');
-        svgWrapper.setAttribute('style', 'display:none;');
-        svgWrapper.innerHTML = response;
-        document.body.insertAdjacentHTML('afterbegin', svgWrapper.outerHTML);
-        loadedSpritesheet = true;
-    };
-    Icon.prototype.componentDidMount = function () {
-        var _this = this;
-        if (!loadedSpritesheet) {
-            loadedSpritesheet = true;
-            fetch('./sprite.symbol.svg')
-                .then(function (res) { return res.text(); })
-                .then(function (text) {
-                _this.mountSVGSpritesheet(text);
-            })
-                .catch(function (error) {
-                /* tslint:disable-next-line no-console */
-                console.warn(error);
-                loadedSpritesheet = false;
-            });
-        }
-        return undefined;
-    };
-    Icon.prototype.render = function () {
-        return (React.createElement("svg", { className: this.props.className, focusable: "false", role: "img" },
-            React.createElement("use", { href: "#" + this.props.name })));
-    };
-    Icon.defaultProps = {
-        className: undefined,
-    };
-    return Icon;
-}(React.Component));
-export { Icon };
+import styled from 'styled-components';
+import { color } from '@lendi-ui/color';
+import { Icons } from './icons-compiled/index';
+var IconWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & > svg {\n    fill: ", ";\n  }\n"], ["\n  & > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var fill = _a.fill;
+    return color(fill);
+});
+var Icon = function (_a) {
+    var name = _a.name, color = _a.color;
+    var Svg = Icons[name];
+    return (React.createElement(IconWrapper, { fill: color },
+        React.createElement(Svg, null)));
+};
 export default Icon;
+var templateObject_1;
 //# sourceMappingURL=index.js.map

dist/types/index.d.ts

 import * as React from 'react';
+import { NameOrNameMap } from '@lendi-ui/color';
+import { IconMap } from './icons-compiled/index';
 export interface IconProps {
-    /** Name of the svg icon */
-    name: string;
-    className?: string;
+    name: keyof IconMap;
+    color: NameOrNameMap;
 }
-export declare class Icon extends React.Component<IconProps> {
-    static defaultProps: Partial<IconProps>;
-    constructor(props: IconProps);
-    private mountSVGSpritesheet;
-    componentDidMount(): undefined;
-    render(): JSX.Element;
-}
+declare const Icon: React.SFC<IconProps>;
 export default Icon;

package.json

 {
   "name": "@lendi-ui/icon",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "source": "src/index.tsx",
@@ -16,7 +16,11 @@ "main": "dist/cjs/index.js",
     "@types/react": "^15 || ^16.4",
-    "react": "^15 || ^16.4"
+    "react": "^15 || ^16.4",
+    "styled-components": "^2 || ^3"
   },
   "devDependencies": {
-    "svg-sprite": "^1.4.0"
+    "@svgr/core": "^2.2.0"
   },
+  "dependencies": {
+    "@lendi-ui/color": "^2.0.1"
+  },
   "scripts": {
@@ -23,0 +27,0 @@ "build:svg": "node ./build.js",

README.md

 # Icon
 
-## NOTE
-This currently builds to ./packages/website/static/sprite.symbol.svg
-TODO: Deploy SVG spritesheet https://creditandfinance.atlassian.net/browse/LIP-529
+## Adding a new icon
+
+Add the SVG into src/icons. Be thoughtful with naming, as this will determine the name of the component. For example, the file `computer-bank` will create a SVG component called `computerBank` (note that the kebab-case filename will become a camelCase component).
+
+When this package is built, an equivalent react component will be created in src/icons-compiled.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

506565

increased by5870.83%

Number of package files

387

increased by5428.57%

Lines of code

2528

increased by1875%

Number of lines in readme file

8

increased by60%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

4

increased by100%

Number of low supply chain risk alerts

43

increased by4200%

Dependency changes

• + Added@lendi-ui/color@^2.0.1

• + Added@lendi-ui/breakpoint@1.0.1(transitive)

• + Added@lendi-ui/color@2.0.2(transitive)

• + Added@lendi-ui/theme@4.0.2(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

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

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

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedhas-flag@1.0.0(transitive)

• + Addedhoist-non-react-statics@2.5.5(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

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

• + Addedpromise@7.3.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedstyled-components@3.4.10(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@3.2.3(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)