react-inlinesvg 1.1.7 → 2.1.0

package/README.md

@@ -2,8 +2,15 @@
 
 [![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://www.npmjs.com/package/react-inlinesvg) [![build status](https://travis-ci.org/gilbarbara/react-inlinesvg.svg)](https://travis-ci.org/gilbarbara/react-inlinesvg) [![Maintainability](https://api.codeclimate.com/v1/badges/c7e42fe511b80cc25760/maintainability)](https://codeclimate.com/github/gilbarbara/react-inlinesvg/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/c7e42fe511b80cc25760/test_coverage)](https://codeclimate.com/github/gilbarbara/react-inlinesvg/test_coverage)
 
-Load inline, local or remote SVGs in your React components.  
-Async requests will be cached.
+Load inline, local or remote SVGs in your React components.
+
+## Highlights
+
+- 🏖 **Easy to use:** Just set the `src`
+- 🛠 **Flexible:** Personalize the options to fit your needs
+- ⚡️ **Smart:** Async requests will be cached. 
+- 🚀 **SSR:** Render a loader until the DOM is available
+- 🟦 **Typescript:** Nicely typed
 
 ## Usage
 
@@ -17,17 +24,27 @@ And import it into your code:
 import React from 'react';
 import SVG from 'react-inlinesvg';
 
-const Icon = () => <SVG src="/path/to/myfile.svg" />;
+const Icon = () => <SVG src={require('/path/to/myfile.svg')} />;
 ```
 
 ## Props
 
 **src** {string} - **required**.  
-The SVG file you want to load. It can be an `url` or a string (base64 or encoded).
+The SVG file you want to load. It can be a require,  URL or a string (base64 or url encoded).
+*If you are using create-react-app and your file resides in the `public` directory you can use the path directly without require.*
 
 **baseURL** {string}  
 An URL to prefix each ID in case you are using the `<base>` tag and `uniquifyIDs`.
 
+**children** {ReactNode}  
+The fallback content in case of a fetch error or unsupported browser.
+
+```
+<SVG src="...">
+	<img src="..." alt="fallback" />
+</SVG>
+```
+
 **cacheRequests** {boolean} ▶︎ `true`  
 Cache remote SVGs.
 
@@ -38,7 +55,8 @@ A description for your SVG. It will override an existing `<desc>` tag.
 Get the SVG HTMLElement.
 
 **loader** {node}  
-A component to be shown while the SVG is loading.
+A component to be shown while the SVG is loading.  
+If you set 
 
 **onError** {function}  
 A callback to be invoked if loading the SVG fails.  
@@ -90,7 +108,7 @@ Create unique IDs for each icon.
   baseURL="/home"
   cacheRequests={true}
   description="The React logo"
-  loader={() => <span>Loading...</span>}
+  loader={<span>Loading...</span>}
   onError={error => console.log(error.message)}
   onLoad={(src, hasCache) => console.log(src, hasCache)}
   preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
@@ -104,17 +122,12 @@ Create unique IDs for each icon.
 ## Browser Support
 
 Any browsers that support inlining [SVGs](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) and [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) will work.
-If you need to support legacy browsers you'll need to include a polyfiil in your app.  
-Take a look at [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill).
 
-## CORS
+If you need to support legacy browsers you'll need to include a polyfiil for `fetch` and `Number.isNaN` in your app. Take a look at [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill) or [polyfill.io](https://polyfill.io/v3/).
 
-If loading SVGs from another domain, you'll need to make sure it allows [CORS].
+## CORS
 
-[cors]: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
-[svg-use-external-source]: http://css-tricks.com/svg-use-external-source
-[use-article]: http://taye.me/blog/svg/a-guide-to-svg-use-elements/
-[use-support]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#Browser_compatibility
+If you are loading remote SVGs, you'll need to make sure it has [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) support.
 
 ## Why you need this package?
 
@@ -145,4 +158,4 @@ The SVG [`<use>`][svg-use-external-source] element can be used to achieve someth
 ## Credits
 
 Thanks to [@matthewwithanm](https://github.com/matthewwithanm) for creating this component and so kindly transfer it to me.
-I'll definitely keep the good work! ❤️
+I'll definitely keep the good work! ❤️

package/esm/helpers.d.ts

@@ -0,0 +1,12 @@
+export declare const STATUS: {
+    FAILED: string;
+    LOADED: string;
+    LOADING: string;
+    PENDING: string;
+    READY: string;
+    UNSUPPORTED: string;
+};
+export declare function canUseDOM(): boolean;
+export declare function supportsInlineSVG(): boolean;
+export declare function isSupportedEnvironment(): boolean;
+export declare function randomString(length: number): string;

package/esm/helpers.js

@@ -0,0 +1,38 @@
+import { canUseDOM as canUseDOMFlag } from 'exenv';
+export var STATUS = {
+    FAILED: 'failed',
+    LOADED: 'loaded',
+    LOADING: 'loading',
+    PENDING: 'pending',
+    READY: 'ready',
+    UNSUPPORTED: 'unsupported',
+};
+export function canUseDOM() {
+    return canUseDOMFlag;
+}
+export function supportsInlineSVG() {
+    /* istanbul ignore next */
+    if (!document) {
+        return false;
+    }
+    var div = document.createElement('div');
+    div.innerHTML = '<svg />';
+    return !!div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+}
+export function isSupportedEnvironment() {
+    return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+}
+export function randomString(length) {
+    var letters = 'abcdefghijklmnopqrstuvwxyz';
+    var numbers = '1234567890';
+    var charset = "" + letters + letters.toUpperCase() + numbers;
+    var randomCharacter = function (character) {
+        return character[Math.floor(Math.random() * character.length)];
+    };
+    var R = '';
+    for (var i = 0; i < length; i++) {
+        R += randomCharacter(charset);
+    }
+    return R;
+}
+//# sourceMappingURL=helpers.js.map

package/esm/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,aAAa;CAC3B,CAAC;AAEF,MAAM,UAAU,SAAS;IACvB,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,0BAA0B;IAC1B,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,KAAK,CAAC;KACd;IAED,IAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,CAAC,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU,CAAC,YAAY,KAAK,4BAA4B,CAAC;AAC1F,CAAC;AAED,MAAM,UAAU,sBAAsB;IACpC,OAAO,iBAAiB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAM,OAAO,GAAG,4BAA4B,CAAC;IAC7C,IAAM,OAAO,GAAG,YAAY,CAAC;IAC7B,IAAM,OAAO,GAAG,KAAG,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,OAAS,CAAC;IAE/D,IAAM,eAAe,GAAG,UAAC,SAAiB;QACxC,OAAA,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAAvD,CAAuD,CAAC;IAE1D,IAAI,CAAC,GAAG,EAAE,CAAC;IACX,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC;KAC/B;IAED,OAAO,CAAC,CAAC;AACX,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Props, State } from './types';
+export default class InlineSVG extends React.PureComponent<Props, State> {
+    constructor(props: Props);
+    private isActive;
+    private readonly hash;
+    static defaultProps: {
+        cacheRequests: boolean;
+        uniquifyIDs: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    private processSVG;
+    private updateSVGAttributes;
+    private getNode;
+    private getElement;
+    private load;
+    private handleCacheQueue;
+    private handleLoad;
+    private handleError;
+    private request;
+    render(): React.ReactNode;
+}
+export * from './types';

package/esm/index.js

@@ -0,0 +1,356 @@
+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 (Object.prototype.hasOwnProperty.call(b, 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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import * as React from 'react';
+import convert from 'react-from-dom';
+import { STATUS, canUseDOM, isSupportedEnvironment, randomString } from './helpers';
+var cacheStore = Object.create(null);
+var InlineSVG = /** @class */ (function (_super) {
+    __extends(InlineSVG, _super);
+    function InlineSVG(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isActive = false;
+        _this.handleCacheQueue = function (content) {
+            /* istanbul ignore else */
+            if (typeof content === 'string') {
+                _this.handleLoad(content);
+                return;
+            }
+            _this.handleError(content);
+        };
+        _this.handleLoad = function (content) {
+            /* istanbul ignore else */
+            if (_this.isActive) {
+                _this.setState({
+                    content: content,
+                    status: STATUS.LOADED,
+                }, _this.getElement);
+            }
+        };
+        _this.handleError = function (error) {
+            var onError = _this.props.onError;
+            var status = error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
+            /* istanbul ignore else */
+            if (_this.isActive) {
+                _this.setState({ status: status }, function () {
+                    /* istanbul ignore else */
+                    if (typeof onError === 'function') {
+                        onError(error);
+                    }
+                });
+            }
+        };
+        _this.request = function () {
+            var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
+            try {
+                if (cacheRequests) {
+                    cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
+                }
+                return fetch(src)
+                    .then(function (response) {
+                    var contentType = response.headers.get('content-type');
+                    var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0];
+                    if (response.status > 299) {
+                        throw new Error('Not found');
+                    }
+                    if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.indexOf(d) >= 0; })) {
+                        throw new Error("Content type isn't valid: " + fileType);
+                    }
+                    return response.text();
+                })
+                    .then(function (content) {
+                    _this.handleLoad(content);
+                    /* istanbul ignore else */
+                    if (cacheRequests) {
+                        var cache = cacheStore[src];
+                        /* istanbul ignore else */
+                        if (cache) {
+                            cache.content = content;
+                            cache.status = STATUS.LOADED;
+                            cache.queue = cache.queue.filter(function (cb) {
+                                cb(content);
+                                return false;
+                            });
+                        }
+                    }
+                })
+                    .catch(function (error) {
+                    _this.handleError(error);
+                    /* istanbul ignore else */
+                    if (cacheRequests) {
+                        var cache = cacheStore[src];
+                        /* istanbul ignore else */
+                        if (cache) {
+                            cache.queue.forEach(function (cb) {
+                                cb(error);
+                            });
+                            delete cacheStore[src];
+                        }
+                    }
+                });
+            }
+            catch (error) {
+                return _this.handleError(new Error(error.message));
+            }
+        };
+        _this.state = {
+            content: '',
+            element: null,
+            hasCache: !!props.cacheRequests && !!cacheStore[props.src],
+            status: STATUS.PENDING,
+        };
+        _this.hash = props.uniqueHash || randomString(8);
+        return _this;
+    }
+    InlineSVG.prototype.componentDidMount = function () {
+        this.isActive = true;
+        if (!canUseDOM()) {
+            return;
+        }
+        var status = this.state.status;
+        var src = this.props.src;
+        try {
+            /* istanbul ignore else */
+            if (status === STATUS.PENDING) {
+                /* istanbul ignore else */
+                if (!isSupportedEnvironment()) {
+                    throw new Error('Browser does not support SVG');
+                }
+                /* istanbul ignore else */
+                if (!src) {
+                    throw new Error('Missing src');
+                }
+                this.load();
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    };
+    InlineSVG.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (!canUseDOM()) {
+            return;
+        }
+        var _a = this.state, hasCache = _a.hasCache, status = _a.status;
+        var _b = this.props, onLoad = _b.onLoad, src = _b.src;
+        if (prevState.status !== STATUS.READY && status === STATUS.READY) {
+            /* istanbul ignore else */
+            if (onLoad) {
+                onLoad(src, hasCache);
+            }
+        }
+        if (prevProps.src !== src) {
+            if (!src) {
+                this.handleError(new Error('Missing src'));
+                return;
+            }
+            this.load();
+        }
+    };
+    InlineSVG.prototype.componentWillUnmount = function () {
+        this.isActive = false;
+    };
+    InlineSVG.prototype.processSVG = function () {
+        var content = this.state.content;
+        var preProcessor = this.props.preProcessor;
+        if (preProcessor) {
+            return preProcessor(content);
+        }
+        return content;
+    };
+    InlineSVG.prototype.updateSVGAttributes = function (node) {
+        var _this = this;
+        var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs;
+        var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
+        var linkAttributes = ['href', 'xlink:href'];
+        var isDataValue = function (name, value) {
+            return linkAttributes.indexOf(name) >= 0 && (value ? value.indexOf('#') < 0 : false);
+        };
+        if (!uniquifyIDs) {
+            return node;
+        }
+        __spread(node.children).map(function (d) {
+            if (d.attributes && d.attributes.length) {
+                var attributes_1 = Object.values(d.attributes).map(function (a) {
+                    var attr = a;
+                    var match = a.value.match(/url\((.*?)\)/);
+                    if (match && match[1]) {
+                        attr.value = a.value.replace(match[0], "url(" + baseURL + match[1] + "__" + _this.hash + ")");
+                    }
+                    return attr;
+                });
+                replaceableAttributes.forEach(function (r) {
+                    var attribute = attributes_1.find(function (a) { return a.name === r; });
+                    if (attribute && !isDataValue(r, attribute.value)) {
+                        attribute.value = attribute.value + "__" + _this.hash;
+                    }
+                });
+            }
+            if (d.children.length) {
+                return _this.updateSVGAttributes(d);
+            }
+            return d;
+        });
+        return node;
+    };
+    InlineSVG.prototype.getNode = function () {
+        var _a = this.props, description = _a.description, title = _a.title;
+        try {
+            var svgText = this.processSVG();
+            var node = convert(svgText, { nodeOnly: true });
+            if (!node || !(node instanceof SVGSVGElement)) {
+                throw new Error('Could not convert the src to a DOM Node');
+            }
+            var svg = this.updateSVGAttributes(node);
+            if (description) {
+                var originalDesc = svg.querySelector('desc');
+                if (originalDesc && originalDesc.parentNode) {
+                    originalDesc.parentNode.removeChild(originalDesc);
+                }
+                var descElement = document.createElement('desc');
+                descElement.innerHTML = description;
+                svg.prepend(descElement);
+            }
+            if (title) {
+                var originalTitle = svg.querySelector('title');
+                if (originalTitle && originalTitle.parentNode) {
+                    originalTitle.parentNode.removeChild(originalTitle);
+                }
+                var titleElement = document.createElement('title');
+                titleElement.innerHTML = title;
+                svg.prepend(titleElement);
+            }
+            return svg;
+        }
+        catch (error) {
+            return this.handleError(error);
+        }
+    };
+    InlineSVG.prototype.getElement = function () {
+        try {
+            var node = this.getNode();
+            var element = convert(node);
+            if (!element || !React.isValidElement(element)) {
+                throw new Error('Could not convert the src to a React element');
+            }
+            this.setState({
+                element: element,
+                status: STATUS.READY,
+            });
+        }
+        catch (error) {
+            this.handleError(new Error(error.message));
+        }
+    };
+    InlineSVG.prototype.load = function () {
+        var _this = this;
+        /* istanbul ignore else */
+        if (this.isActive) {
+            this.setState({
+                content: '',
+                element: null,
+                status: STATUS.LOADING,
+            }, function () {
+                var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
+                var cache = cacheRequests && cacheStore[src];
+                if (cache) {
+                    /* istanbul ignore else */
+                    if (cache.status === STATUS.LOADING) {
+                        cache.queue.push(_this.handleCacheQueue);
+                    }
+                    else if (cache.status === STATUS.LOADED) {
+                        _this.handleLoad(cache.content);
+                    }
+                    return;
+                }
+                var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+                var inlineSrc;
+                if (dataURI) {
+                    inlineSrc = dataURI[1] ? atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
+                }
+                else if (src.indexOf('<svg') >= 0) {
+                    inlineSrc = src;
+                }
+                if (inlineSrc) {
+                    _this.handleLoad(inlineSrc);
+                    return;
+                }
+                _this.request();
+            });
+        }
+    };
+    InlineSVG.prototype.render = function () {
+        var _a = this.state, element = _a.element, status = _a.status;
+        var _b = this.props, baseURL = _b.baseURL, cacheRequests = _b.cacheRequests, _c = _b.children, children = _c === void 0 ? null : _c, description = _b.description, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d, onError = _b.onError, onLoad = _b.onLoad, preProcessor = _b.preProcessor, src = _b.src, title = _b.title, uniqueHash = _b.uniqueHash, uniquifyIDs = _b.uniquifyIDs, rest = __rest(_b, ["baseURL", "cacheRequests", "children", "description", "innerRef", "loader", "onError", "onLoad", "preProcessor", "src", "title", "uniqueHash", "uniquifyIDs"]);
+        if (!canUseDOM()) {
+            return loader;
+        }
+        if (element) {
+            return React.cloneElement(element, __assign({ ref: innerRef }, rest));
+        }
+        if ([STATUS.UNSUPPORTED, STATUS.FAILED].indexOf(status) > -1) {
+            return children;
+        }
+        return loader;
+    };
+    InlineSVG.defaultProps = {
+        cacheRequests: true,
+        uniquifyIDs: false,
+    };
+    return InlineSVG;
+}(React.PureComponent));
+export default InlineSVG;
+export * from './types';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/esm/types.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+declare type Callback = (...args: any[]) => void;
+export declare type ErrorCallback = (error: Error | FetchError) => void;
+export declare type LoadCallback = (src: string, isCached: boolean) => void;
+export declare type PreProcessorCallback = (code: string) => string;
+export interface Props extends Omit<React.HTMLProps<SVGElement>, 'onLoad' | 'onError'> {
+    baseURL?: string;
+    cacheRequests?: boolean;
+    children?: React.ReactNode;
+    description?: string;
+    innerRef?: React.Ref<HTMLElement>;
+    loader?: React.ReactNode;
+    onError?: ErrorCallback;
+    onLoad?: LoadCallback;
+    preProcessor?: PreProcessorCallback;
+    src: string;
+    title?: string;
+    uniqueHash?: string;
+    uniquifyIDs?: boolean;
+}
+export interface State {
+    content: string;
+    element: React.ReactNode;
+    hasCache: boolean;
+    status: string;
+}
+export interface FetchError extends Error {
+    code: string;
+    errno: string;
+    message: string;
+    type: string;
+}
+export interface StorageItem {
+    content: string;
+    queue: Callback[];
+    status: string;
+}
+export {};

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/helpers.d.ts

@@ -1,10 +1,12 @@
-export declare const canUseDOM: () => boolean;
-export declare const supportsInlineSVG: () => boolean | null;
-export declare class InlineSVGError extends Error {
-    name: string;
-    message: string;
-    data?: object;
-    constructor(message: string, data?: object);
-}
-export declare const isSupportedEnvironment: () => boolean | null;
-export declare const randomString: (length: number) => string;
+export declare const STATUS: {
+    FAILED: string;
+    LOADED: string;
+    LOADING: string;
+    PENDING: string;
+    READY: string;
+    UNSUPPORTED: string;
+};
+export declare function canUseDOM(): boolean;
+export declare function supportsInlineSVG(): boolean;
+export declare function isSupportedEnvironment(): boolean;
+export declare function randomString(length: number): string;