react-inlinesvg 3.0.0 → 3.0.2

package/README.md

@@ -1,9 +1,11 @@
 # react-inlinesvg
 
-[![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://www.npmjs.com/package/react-inlinesvg) [![Build Status](https://travis-ci.com/gilbarbara/react-inlinesvg.svg?branch=master)](https://travis-ci.com/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)
+[![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://www.npmjs.com/package/react-inlinesvg) [![CI](https://github.com/gilbarbara/react-inlinesvg/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-inlinesvg/actions/workflows/main.yml) [![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.
 
+View the [demo](https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo)
+
 ## Highlights
 
 - 🏖 **Easy to use:** Just set the `src`
@@ -21,20 +23,18 @@ npm i react-inlinesvg
 And import it into your code:
 
 ```tsx
-import React, { useRef } from 'react';
-import SVG, { Props as SVGProps } from 'react-inlinesvg';
-
-const Logo = React.forwardRef<SVGElement, SVGProps>((props, ref) => (
-  <SVG innerRef={ref} title="MyLogo" {...props} />
-));
-
-export function App() {
-  const logo = useRef<SVGElement>(null);
+import React from 'react';
+import SVG from 'react-inlinesvg';
 
+export default function App() {
   return (
     <main>
-      <SVG src={`${process.env.PUBLIC_URL}/menu.svg`} width={24} height="auto" title="Menu" />
-      <Logo ref={logo} src={`${process.env.PUBLIC_URL}/logo.svg`} />
+      <SVG
+        src="https://cdn.svgporn.com/logos/react.svg"
+        width={128}
+        height="auto"
+        title="React"
+      />
     </main>
   );
 }

package/esm/index.d.ts

@@ -4,6 +4,7 @@ export declare const cacheStore: {
     [key: string]: StorageItem;
 };
 export default class InlineSVG extends React.PureComponent<Props, State> {
+    private isInitialized;
     private isActive;
     private readonly hash;
     static defaultProps: {

package/esm/index.js

@@ -57,83 +57,117 @@ var InlineSVG = /** @class */ (function (_super) {
     __extends(InlineSVG, _super);
     function InlineSVG(props) {
         var _this = _super.call(this, props) || this;
-        _this.isActive = false;
-        _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);
-                    }
-                });
+        Object.defineProperty(_this, "isInitialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(_this, "isActive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(_this, "hash", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "handleLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: function (content, hasCache) {
+                if (hasCache === void 0) { hasCache = false; }
+                /* istanbul ignore else */
+                if (_this.isActive) {
+                    _this.setState({
+                        content: content,
+                        hasCache: hasCache,
+                        status: STATUS.LOADED,
+                    }, _this.getElement);
+                }
             }
-        };
-        _this.request = function () {
-            var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
-            try {
-                if (cacheRequests) {
-                    cacheStore[src] = { content: '', status: STATUS.LOADING };
+        });
+        Object.defineProperty(_this, "handleError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 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);
+                        }
+                    });
                 }
-                return fetch(src, fetchOptions)
-                    .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.includes(d); })) {
-                        throw new Error("Content type isn't valid: ".concat(fileType));
+            }
+        });
+        Object.defineProperty(_this, "request", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: function () {
+                var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
+                try {
+                    if (cacheRequests) {
+                        cacheStore[src] = { content: '', status: STATUS.LOADING };
                     }
-                    return response.text();
-                })
-                    .then(function (content) {
-                    var currentSrc = _this.props.src;
-                    // the current src don't match the previous one, skipping...
-                    if (src !== currentSrc) {
-                        if (cacheStore[src].status === STATUS.LOADING) {
-                            delete cacheStore[src];
+                    return fetch(src, fetchOptions)
+                        .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');
                         }
-                        return;
-                    }
-                    _this.handleLoad(content);
-                    /* istanbul ignore else */
-                    if (cacheRequests) {
-                        var cache = cacheStore[src];
+                        if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) {
+                            throw new Error("Content type isn't valid: ".concat(fileType));
+                        }
+                        return response.text();
+                    })
+                        .then(function (content) {
+                        var currentSrc = _this.props.src;
+                        // the current src don't match the previous one, skipping...
+                        if (src !== currentSrc) {
+                            if (cacheStore[src].status === STATUS.LOADING) {
+                                delete cacheStore[src];
+                            }
+                            return;
+                        }
+                        _this.handleLoad(content);
                         /* istanbul ignore else */
-                        if (cache) {
-                            cache.content = content;
-                            cache.status = STATUS.LOADED;
+                        if (cacheRequests) {
+                            var cache = cacheStore[src];
+                            /* istanbul ignore else */
+                            if (cache) {
+                                cache.content = content;
+                                cache.status = STATUS.LOADED;
+                            }
                         }
-                    }
-                })
-                    .catch(function (error) {
-                    _this.handleError(error);
-                    /* istanbul ignore else */
-                    if (cacheRequests) {
-                        var cache = cacheStore[src];
+                    })
+                        .catch(function (error) {
+                        _this.handleError(error);
                         /* istanbul ignore else */
-                        if (cache) {
-                            delete cacheStore[src];
+                        if (cacheRequests) {
+                            var cache = cacheStore[src];
+                            /* istanbul ignore else */
+                            if (cache) {
+                                delete cacheStore[src];
+                            }
                         }
-                    }
-                });
-            }
-            catch (error) {
-                return _this.handleError(new Error(error.message));
+                    });
+                }
+                catch (error) {
+                    return _this.handleError(new Error(error.message));
+                }
             }
-        };
+        });
         _this.state = {
             content: '',
             element: null,
@@ -143,196 +177,250 @@ var InlineSVG = /** @class */ (function (_super) {
         _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) {
+    Object.defineProperty(InlineSVG.prototype, "componentDidMount", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.isActive = true;
+            if (!canUseDOM() || this.isInitialized) {
+                return;
+            }
+            var status = this.state.status;
+            var src = this.props.src;
+            try {
                 /* istanbul ignore else */
-                if (!isSupportedEnvironment()) {
-                    throw new Error('Browser does not support SVG');
+                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);
+            }
+            this.isInitialized = true;
+        }
+    });
+    Object.defineProperty(InlineSVG.prototype, "componentDidUpdate", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (previousProps, previousState) {
+            if (!canUseDOM()) {
+                return;
+            }
+            var _a = this.state, hasCache = _a.hasCache, status = _a.status;
+            var _b = this.props, onLoad = _b.onLoad, src = _b.src;
+            if (previousState.status !== STATUS.READY && status === STATUS.READY) {
                 /* istanbul ignore else */
+                if (onLoad) {
+                    onLoad(src, hasCache);
+                }
+            }
+            if (previousProps.src !== src) {
                 if (!src) {
-                    throw new Error('Missing src');
+                    this.handleError(new Error('Missing src'));
+                    return;
                 }
                 this.load();
             }
         }
-        catch (error) {
-            this.handleError(error);
+    });
+    Object.defineProperty(InlineSVG.prototype, "componentWillUnmount", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.isActive = false;
         }
-    };
-    InlineSVG.prototype.componentDidUpdate = function (previousProps, previousState) {
-        if (!canUseDOM()) {
-            return;
-        }
-        var _a = this.state, hasCache = _a.hasCache, status = _a.status;
-        var _b = this.props, onLoad = _b.onLoad, src = _b.src;
-        if (previousState.status !== STATUS.READY && status === STATUS.READY) {
-            /* istanbul ignore else */
-            if (onLoad) {
-                onLoad(src, hasCache);
+    });
+    Object.defineProperty(InlineSVG.prototype, "getNode", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: 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.createElementNS('http://www.w3.org/2000/svg', 'desc');
+                    descElement.innerHTML = description;
+                    svg.prepend(descElement);
+                }
+                if (typeof title !== 'undefined') {
+                    var originalTitle = svg.querySelector('title');
+                    if (originalTitle && originalTitle.parentNode) {
+                        originalTitle.parentNode.removeChild(originalTitle);
+                    }
+                    if (title) {
+                        var titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+                        titleElement.innerHTML = title;
+                        svg.prepend(titleElement);
+                    }
+                }
+                return svg;
             }
-        }
-        if (previousProps.src !== src) {
-            if (!src) {
-                this.handleError(new Error('Missing src'));
-                return;
+            catch (error) {
+                return this.handleError(error);
             }
-            this.load();
         }
-    };
-    InlineSVG.prototype.componentWillUnmount = function () {
-        this.isActive = false;
-    };
-    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);
+    });
+    Object.defineProperty(InlineSVG.prototype, "getElement", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: 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');
                 }
-                var descElement = document.createElement('desc');
-                descElement.innerHTML = description;
-                svg.prepend(descElement);
+                this.setState({
+                    element: element,
+                    status: STATUS.READY,
+                });
             }
-            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);
+            catch (error) {
+                this.handleError(new Error(error.message));
             }
-            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');
+    });
+    Object.defineProperty(InlineSVG.prototype, "load", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (this.isActive) {
+                this.setState({
+                    content: '',
+                    element: null,
+                    hasCache: false,
+                    status: STATUS.LOADING,
+                }, function () {
+                    var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
+                    var cache = cacheRequests && cacheStore[src];
+                    if (cache && cache.status === STATUS.LOADED) {
+                        _this.handleLoad(cache.content, true);
+                        return;
+                    }
+                    var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+                    var inlineSrc;
+                    if (dataURI) {
+                        inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
+                    }
+                    else if (src.includes('<svg')) {
+                        inlineSrc = src;
+                    }
+                    if (inlineSrc) {
+                        _this.handleLoad(inlineSrc);
+                        return;
+                    }
+                    _this.request();
+                });
             }
-            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 && cache.status === STATUS.LOADED) {
-                    _this.handleLoad(cache.content);
-                    return;
-                }
-                var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
-                var inlineSrc;
-                if (dataURI) {
-                    inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
-                }
-                else if (src.includes('<svg')) {
-                    inlineSrc = src;
+    });
+    Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: 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.includes(name) && (value ? !value.includes('#') : false);
+            };
+            if (!uniquifyIDs) {
+                return node;
+            }
+            __spreadArray([], __read(node.children), false).map(function (d) {
+                if (d.attributes && d.attributes.length) {
+                    var attributes_1 = Object.values(d.attributes).map(function (a) {
+                        var attribute = a;
+                        var match = a.value.match(/url\((.*?)\)/);
+                        if (match && match[1]) {
+                            attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")"));
+                        }
+                        return attribute;
+                    });
+                    replaceableAttributes.forEach(function (r) {
+                        var attribute = attributes_1.find(function (a) { return a.name === r; });
+                        if (attribute && !isDataValue(r, attribute.value)) {
+                            attribute.value = "".concat(attribute.value, "__").concat(_this.hash);
+                        }
+                    });
                 }
-                if (inlineSrc) {
-                    _this.handleLoad(inlineSrc);
-                    return;
+                if (d.children.length) {
+                    return _this.updateSVGAttributes(d);
                 }
-                _this.request();
+                return d;
             });
-        }
-    };
-    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.includes(name) && (value ? !value.includes('#') : false);
-        };
-        if (!uniquifyIDs) {
             return node;
         }
-        __spreadArray([], __read(node.children), false).map(function (d) {
-            if (d.attributes && d.attributes.length) {
-                var attributes_1 = Object.values(d.attributes).map(function (a) {
-                    var attribute = a;
-                    var match = a.value.match(/url\((.*?)\)/);
-                    if (match && match[1]) {
-                        attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")"));
-                    }
-                    return attribute;
-                });
-                replaceableAttributes.forEach(function (r) {
-                    var attribute = attributes_1.find(function (a) { return a.name === r; });
-                    if (attribute && !isDataValue(r, attribute.value)) {
-                        attribute.value = "".concat(attribute.value, "__").concat(_this.hash);
-                    }
-                });
+    });
+    Object.defineProperty(InlineSVG.prototype, "processSVG", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var content = this.state.content;
+            var preProcessor = this.props.preProcessor;
+            if (preProcessor) {
+                return preProcessor(content);
             }
-            if (d.children.length) {
-                return _this.updateSVGAttributes(d);
-            }
-            return d;
-        });
-        return node;
-    };
-    InlineSVG.prototype.processSVG = function () {
-        var content = this.state.content;
-        var preProcessor = this.props.preProcessor;
-        if (preProcessor) {
-            return preProcessor(content);
+            return content;
         }
-        return content;
-    };
-    InlineSVG.prototype.render = function () {
-        var _a = this.state, element = _a.element, status = _a.status;
-        var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d;
-        var elementProps = omit(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs');
-        if (!canUseDOM()) {
+    });
+    Object.defineProperty(InlineSVG.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _a = this.state, element = _a.element, status = _a.status;
+            var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d;
+            var elementProps = omit(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs');
+            if (!canUseDOM()) {
+                return loader;
+            }
+            if (element) {
+                return React.cloneElement(element, __assign({ ref: innerRef }, elementProps));
+            }
+            if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
+                return children;
+            }
             return loader;
         }
-        if (element) {
-            return React.cloneElement(element, __assign({ ref: innerRef }, elementProps));
+    });
+    Object.defineProperty(InlineSVG, "defaultProps", {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value: {
+            cacheRequests: true,
+            uniquifyIDs: false,
         }
-        if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
-            return children;
-        }
-        return loader;
-    };
-    InlineSVG.defaultProps = {
-        cacheRequests: true,
-        uniquifyIDs: false,
-    };
+    });
     return InlineSVG;
 }(React.PureComponent));
 export default InlineSVG;