react-inlinesvg - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

esm/helpers.d.ts

@@ -1,9 +0,9 @@
-import { PlainObject } from './types';
+import type { PlainObject } from './types';
 export declare const STATUS: {
-    FAILED: string;
-    LOADED: string;
-    LOADING: string;
-    PENDING: string;
-    READY: string;
-    UNSUPPORTED: string;
+    readonly IDLE: "idle";
+    readonly LOADING: "loading";
+    readonly LOADED: "loaded";
+    readonly FAILED: "failed";
+    readonly READY: "ready";
+    readonly UNSUPPORTED: "unsupported";
 };
@@ -10,0 +10,0 @@ export declare function canUseDOM(): boolean;

esm/helpers.js

 import { canUseDOM as canUseDOMFlag } from 'exenv';
 export var STATUS = {
+    IDLE: 'idle',
+    LOADING: 'loading',
+    LOADED: 'loaded',
     FAILED: 'failed',
-    LOADED: 'loaded',
-    LOADING: 'loading',
-    PENDING: 'pending',
     READY: 'ready',
@@ -8,0 +8,0 @@ UNSUPPORTED: 'unsupported',

esm/index.d.ts

@@ -7,5 +7,5 @@ import * as React from 'react';
 export default class InlineSVG extends React.PureComponent<Props, State> {
+    private readonly hash;
+    private isActive;
     private isInitialized;
-    private isActive;
-    private readonly hash;
     static defaultProps: {
@@ -19,12 +19,12 @@ cacheRequests: boolean;
     componentWillUnmount(): void;
+    private getElement;
     private getNode;
-    private getElement;
+    private handleError;
     private handleLoad;
-    private handleError;
+    private load;
+    private processSVG;
     private request;
-    private load;
     private updateSVGAttributes;
-    private processSVG;
     render(): React.ReactNode;
 }
 export * from './types';

esm/index.js

@@ -27,2 +27,38 @@ var __extends = (this && this.__extends) || (function () {
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __read = (this && this.__read) || function (o, n) {
@@ -61,7 +97,7 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
         var _this = _super.call(this, props) || this;
-        Object.defineProperty(_this, "isInitialized", {
+        Object.defineProperty(_this, "hash", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: false
+            value: void 0
         });
@@ -74,24 +110,8 @@ Object.defineProperty(_this, "isActive", {
         });
-        Object.defineProperty(_this, "hash", {
+        Object.defineProperty(_this, "isInitialized", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
-        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);
-                }
-            }
-        });
         Object.defineProperty(_this, "handleError", {
@@ -115,2 +135,18 @@ enumerable: true,
         });
+        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);
+                }
+            }
+        });
         Object.defineProperty(_this, "request", {
@@ -120,56 +156,63 @@ enumerable: 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 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));
-                        }
-                        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];
+            value: function () { return __awaiter(_this, void 0, void 0, function () {
+                var _a, cacheRequests, fetchOptions, src, response, contentType, _b, fileType_1, content, currentSrc, cache, error_1, cache;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _a = this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
+                            if (cacheRequests) {
+                                cacheStore[src] = { content: '', status: STATUS.LOADING };
                             }
-                            return;
-                        }
-                        _this.handleLoad(content);
-                        /* istanbul ignore else */
-                        if (cacheRequests) {
-                            var cache = cacheStore[src];
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 4, , 5]);
+                            return [4 /*yield*/, fetch(src, fetchOptions)];
+                        case 2:
+                            response = _c.sent();
+                            contentType = response.headers.get('content-type');
+                            _b = __read((contentType || '').split(/ ?; ?/), 1), fileType_1 = _b[0];
+                            if (response.status > 299) {
+                                throw new Error('Not found');
+                            }
+                            if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType_1.includes(d); })) {
+                                throw new Error("Content type isn't valid: ".concat(fileType_1));
+                            }
+                            return [4 /*yield*/, response.text()];
+                        case 3:
+                            content = _c.sent();
+                            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 [2 /*return*/];
+                            }
+                            this.handleLoad(content);
                             /* istanbul ignore else */
-                            if (cache) {
-                                cache.content = content;
-                                cache.status = STATUS.LOADED;
+                            if (cacheRequests) {
+                                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];
+                            return [3 /*break*/, 5];
+                        case 4:
+                            error_1 = _c.sent();
+                            this.handleError(error_1);
                             /* istanbul ignore else */
-                            if (cache) {
-                                delete cacheStore[src];
+                            if (cacheRequests) {
+                                cache = cacheStore[src];
+                                /* istanbul ignore else */
+                                if (cache) {
+                                    delete cacheStore[src];
+                                }
                             }
-                        }
-                    });
-                }
-                catch (error) {
-                    return _this.handleError(new Error(error.message));
-                }
-            }
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); }
         });
@@ -180,3 +223,3 @@ _this.state = {
             hasCache: !!props.cacheRequests && !!cacheStore[props.src],
-            status: STATUS.PENDING,
+            status: STATUS.IDLE,
         };
@@ -199,3 +242,3 @@ _this.hash = props.uniqueHash || randomString(8);
                 /* istanbul ignore else */
-                if (status === STATUS.PENDING) {
+                if (status === STATUS.IDLE) {
                     /* istanbul ignore else */
@@ -251,2 +294,23 @@ if (!isSupportedEnvironment()) {
     });
+    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');
+                }
+                this.setState({
+                    element: element,
+                    status: STATUS.READY,
+                });
+            }
+            catch (error) {
+                this.handleError(new Error(error.message));
+            }
+        }
+    });
     Object.defineProperty(InlineSVG.prototype, "getNode", {
@@ -292,23 +356,2 @@ enumerable: false,
     });
-    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');
-                }
-                this.setState({
-                    element: element,
-                    status: STATUS.READY,
-                });
-            }
-            catch (error) {
-                this.handleError(new Error(error.message));
-            }
-        }
-    });
     Object.defineProperty(InlineSVG.prototype, "load", {
@@ -334,3 +377,3 @@ enumerable: false,
                     }
-                    var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+                    var dataURI = src.match(/^data:image\/svg[^,]*?(;base64)?,(.*)/u);
                     var inlineSrc;
@@ -352,2 +395,15 @@ if (dataURI) {
     });
+    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);
+            }
+            return content;
+        }
+    });
     Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", {
@@ -368,3 +424,3 @@ enumerable: false,
             }
-            __spreadArray([], __read(node.children), false).map(function (d) {
+            __spreadArray([], __read(node.children), false).forEach(function (d) {
                 if (d.attributes && d.attributes.length) {
@@ -394,15 +450,2 @@ var attributes_1 = Object.values(d.attributes).map(function (a) {
     });
-    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);
-            }
-            return content;
-        }
-    });
     Object.defineProperty(InlineSVG.prototype, "render", {
@@ -409,0 +452,0 @@ enumerable: false,

esm/types.d.ts

 import * as React from 'react';
+import { STATUS } from './helpers';
 export type ErrorCallback = (error: Error | FetchError) => void;
 export type LoadCallback = (src: string, isCached: boolean) => void;
-export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PlainObject<T = unknown> = Record<string, T>;
 export type PreProcessorCallback = (code: string) => string;
@@ -26,3 +27,3 @@ export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
     hasCache: boolean;
-    status: string;
+    status: Status;
 }
@@ -35,5 +36,6 @@ export interface FetchError extends Error {
 }
+export type Status = (typeof STATUS)[keyof typeof STATUS];
 export interface StorageItem {
     content: string;
-    status: string;
+    status: Status;
 }

lib/helpers.d.ts

@@ -1,9 +0,9 @@
-import { PlainObject } from './types';
+import type { PlainObject } from './types';
 export declare const STATUS: {
-    FAILED: string;
-    LOADED: string;
-    LOADING: string;
-    PENDING: string;
-    READY: string;
-    UNSUPPORTED: string;
+    readonly IDLE: "idle";
+    readonly LOADING: "loading";
+    readonly LOADED: "loaded";
+    readonly FAILED: "failed";
+    readonly READY: "ready";
+    readonly UNSUPPORTED: "unsupported";
 };
@@ -10,0 +10,0 @@ export declare function canUseDOM(): boolean;

lib/helpers.js

@@ -6,6 +6,6 @@ "use strict";
 exports.STATUS = {
+    IDLE: 'idle',
+    LOADING: 'loading',
+    LOADED: 'loaded',
     FAILED: 'failed',
-    LOADED: 'loaded',
-    LOADING: 'loading',
-    PENDING: 'pending',
     READY: 'ready',
@@ -12,0 +12,0 @@ UNSUPPORTED: 'unsupported',

lib/index.d.ts

@@ -7,5 +7,5 @@ import * as React from 'react';
 export default class InlineSVG extends React.PureComponent<Props, State> {
+    private readonly hash;
+    private isActive;
     private isInitialized;
-    private isActive;
-    private readonly hash;
     static defaultProps: {
@@ -19,12 +19,12 @@ cacheRequests: boolean;
     componentWillUnmount(): void;
+    private getElement;
     private getNode;
-    private getElement;
+    private handleError;
     private handleLoad;
-    private handleError;
+    private load;
+    private processSVG;
     private request;
-    private load;
     private updateSVGAttributes;
-    private processSVG;
     render(): React.ReactNode;
 }
 export * from './types';

lib/index.js

@@ -42,2 +42,38 @@ "use strict";
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __read = (this && this.__read) || function (o, n) {
@@ -78,7 +114,7 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
         var _this = _super.call(this, props) || this;
-        Object.defineProperty(_this, "isInitialized", {
+        Object.defineProperty(_this, "hash", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: false
+            value: void 0
         });
@@ -91,24 +127,8 @@ Object.defineProperty(_this, "isActive", {
         });
-        Object.defineProperty(_this, "hash", {
+        Object.defineProperty(_this, "isInitialized", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
-        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: helpers_1.STATUS.LOADED,
-                    }, _this.getElement);
-                }
-            }
-        });
         Object.defineProperty(_this, "handleError", {
@@ -132,2 +152,18 @@ enumerable: true,
         });
+        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: helpers_1.STATUS.LOADED,
+                    }, _this.getElement);
+                }
+            }
+        });
         Object.defineProperty(_this, "request", {
@@ -137,56 +173,63 @@ enumerable: true,
             writable: true,
-            value: function () {
-                var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
-                try {
-                    if (cacheRequests) {
-                        exports.cacheStore[src] = { content: '', status: helpers_1.STATUS.LOADING };
-                    }
-                    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));
-                        }
-                        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 (exports.cacheStore[src].status === helpers_1.STATUS.LOADING) {
-                                delete exports.cacheStore[src];
+            value: function () { return __awaiter(_this, void 0, void 0, function () {
+                var _a, cacheRequests, fetchOptions, src, response, contentType, _b, fileType_1, content, currentSrc, cache, error_1, cache;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            _a = this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
+                            if (cacheRequests) {
+                                exports.cacheStore[src] = { content: '', status: helpers_1.STATUS.LOADING };
                             }
-                            return;
-                        }
-                        _this.handleLoad(content);
-                        /* istanbul ignore else */
-                        if (cacheRequests) {
-                            var cache = exports.cacheStore[src];
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 4, , 5]);
+                            return [4 /*yield*/, fetch(src, fetchOptions)];
+                        case 2:
+                            response = _c.sent();
+                            contentType = response.headers.get('content-type');
+                            _b = __read((contentType || '').split(/ ?; ?/), 1), fileType_1 = _b[0];
+                            if (response.status > 299) {
+                                throw new Error('Not found');
+                            }
+                            if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType_1.includes(d); })) {
+                                throw new Error("Content type isn't valid: ".concat(fileType_1));
+                            }
+                            return [4 /*yield*/, response.text()];
+                        case 3:
+                            content = _c.sent();
+                            currentSrc = this.props.src;
+                            // the current src don't match the previous one, skipping...
+                            if (src !== currentSrc) {
+                                if (exports.cacheStore[src].status === helpers_1.STATUS.LOADING) {
+                                    delete exports.cacheStore[src];
+                                }
+                                return [2 /*return*/];
+                            }
+                            this.handleLoad(content);
                             /* istanbul ignore else */
-                            if (cache) {
-                                cache.content = content;
-                                cache.status = helpers_1.STATUS.LOADED;
+                            if (cacheRequests) {
+                                cache = exports.cacheStore[src];
+                                /* istanbul ignore else */
+                                if (cache) {
+                                    cache.content = content;
+                                    cache.status = helpers_1.STATUS.LOADED;
+                                }
                             }
-                        }
-                    })
-                        .catch(function (error) {
-                        _this.handleError(error);
-                        /* istanbul ignore else */
-                        if (cacheRequests) {
-                            var cache = exports.cacheStore[src];
+                            return [3 /*break*/, 5];
+                        case 4:
+                            error_1 = _c.sent();
+                            this.handleError(error_1);
                             /* istanbul ignore else */
-                            if (cache) {
-                                delete exports.cacheStore[src];
+                            if (cacheRequests) {
+                                cache = exports.cacheStore[src];
+                                /* istanbul ignore else */
+                                if (cache) {
+                                    delete exports.cacheStore[src];
+                                }
                             }
-                        }
-                    });
-                }
-                catch (error) {
-                    return _this.handleError(new Error(error.message));
-                }
-            }
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); }
         });
@@ -197,3 +240,3 @@ _this.state = {
             hasCache: !!props.cacheRequests && !!exports.cacheStore[props.src],
-            status: helpers_1.STATUS.PENDING,
+            status: helpers_1.STATUS.IDLE,
         };
@@ -216,3 +259,3 @@ _this.hash = props.uniqueHash || (0, helpers_1.randomString)(8);
                 /* istanbul ignore else */
-                if (status === helpers_1.STATUS.PENDING) {
+                if (status === helpers_1.STATUS.IDLE) {
                     /* istanbul ignore else */
@@ -268,2 +311,23 @@ if (!(0, helpers_1.isSupportedEnvironment)()) {
     });
+    Object.defineProperty(InlineSVG.prototype, "getElement", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            try {
+                var node = this.getNode();
+                var element = (0, react_from_dom_1.default)(node);
+                if (!element || !React.isValidElement(element)) {
+                    throw new Error('Could not convert the src to a React element');
+                }
+                this.setState({
+                    element: element,
+                    status: helpers_1.STATUS.READY,
+                });
+            }
+            catch (error) {
+                this.handleError(new Error(error.message));
+            }
+        }
+    });
     Object.defineProperty(InlineSVG.prototype, "getNode", {
@@ -309,23 +373,2 @@ enumerable: false,
     });
-    Object.defineProperty(InlineSVG.prototype, "getElement", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            try {
-                var node = this.getNode();
-                var element = (0, react_from_dom_1.default)(node);
-                if (!element || !React.isValidElement(element)) {
-                    throw new Error('Could not convert the src to a React element');
-                }
-                this.setState({
-                    element: element,
-                    status: helpers_1.STATUS.READY,
-                });
-            }
-            catch (error) {
-                this.handleError(new Error(error.message));
-            }
-        }
-    });
     Object.defineProperty(InlineSVG.prototype, "load", {
@@ -351,3 +394,3 @@ enumerable: false,
                     }
-                    var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+                    var dataURI = src.match(/^data:image\/svg[^,]*?(;base64)?,(.*)/u);
                     var inlineSrc;
@@ -369,2 +412,15 @@ if (dataURI) {
     });
+    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);
+            }
+            return content;
+        }
+    });
     Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", {
@@ -385,3 +441,3 @@ enumerable: false,
             }
-            __spreadArray([], __read(node.children), false).map(function (d) {
+            __spreadArray([], __read(node.children), false).forEach(function (d) {
                 if (d.attributes && d.attributes.length) {
@@ -411,15 +467,2 @@ var attributes_1 = Object.values(d.attributes).map(function (a) {
     });
-    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);
-            }
-            return content;
-        }
-    });
     Object.defineProperty(InlineSVG.prototype, "render", {
@@ -426,0 +469,0 @@ enumerable: false,

lib/types.d.ts

 import * as React from 'react';
+import { STATUS } from './helpers';
 export type ErrorCallback = (error: Error | FetchError) => void;
 export type LoadCallback = (src: string, isCached: boolean) => void;
-export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PlainObject<T = unknown> = Record<string, T>;
 export type PreProcessorCallback = (code: string) => string;
@@ -26,3 +27,3 @@ export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
     hasCache: boolean;
-    status: string;
+    status: Status;
 }
@@ -35,5 +36,6 @@ export interface FetchError extends Error {
 }
+export type Status = (typeof STATUS)[keyof typeof STATUS];
 export interface StorageItem {
     content: string;
-    status: string;
+    status: Status;
 }

package.json

 {
   "name": "react-inlinesvg",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "An SVG loader for React",
@@ -42,23 +42,23 @@ "author": "Gil Barbara <[e-mail]>",
   "devDependencies": {
-    "@gilbarbara/eslint-config": "^0.3.7",
-    "@gilbarbara/helpers": "^0.6.3",
-    "@gilbarbara/prettier-config": "^0.1.0",
+    "@gilbarbara/eslint-config": "^0.5.2",
+    "@gilbarbara/helpers": "^0.8.1",
+    "@gilbarbara/prettier-config": "^1.0.0",
     "@gilbarbara/tsconfig": "^0.1.1",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@size-limit/preset-small-lib": "^8.2.6",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/exenv": "^1.2.0",
     "@types/fetch-mock": "^7.3.5",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.1",
-    "@types/node-fetch": "^2.6.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "cross-fetch": "^3.1.5",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^20.4.8",
+    "@types/node-fetch": "^2.6.4",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "cross-fetch": "^4.0.0",
     "del-cli": "^5.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
-    "jest-extended": "^3.2.4",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jest-extended": "^4.0.1",
     "jest-fetch-mock": "^3.0.3",
@@ -70,7 +70,7 @@ "jest-serializer-html": "^7.1.0",
     "repo-tools": "^0.2.2",
-    "size-limit": "^8.2.4",
-    "start-server-and-test": "^1.15.4",
-    "ts-jest": "^29.0.5",
+    "size-limit": "^8.2.6",
+    "start-server-and-test": "^2.0.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   },
@@ -77,0 +77,0 @@ "scripts": {

README.md

 # react-inlinesvg
 
-[![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)
+[![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) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-inlinesvg&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-inlinesvg) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-inlinesvg&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-inlinesvg)
 
-Load inline, local or remote SVGs in your React components.
+Load inline, local, or remote SVGs in your React components.
 
@@ -108,4 +108,5 @@ View the [demo](https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo)
 
-**title** {string}  
-A title for your SVG. It will override an existing `<title>` tag.
+**title** {string | null}  
+A title for your SVG. It will override an existing `<title>` tag.  
+If `null` is passed, the `<title>` tag will be removed.
 
@@ -112,0 +113,0 @@ **uniqueHash** {string} ▶︎ a random 8 characters string `[A-Za-z0-9]`

src/helpers.ts

 import { canUseDOM as canUseDOMFlag } from 'exenv';
 
-import { PlainObject } from './types';
+import type { PlainObject } from './types';
 
 export const STATUS = {
+  IDLE: 'idle',
+  LOADING: 'loading',
+  LOADED: 'loaded',
   FAILED: 'failed',
-  LOADED: 'loaded',
-  LOADING: 'loading',
-  PENDING: 'pending',
   READY: 'ready',
   UNSUPPORTED: 'unsupported',
-};
+} as const;
 
@@ -14,0 +14,0 @@ export function canUseDOM(): boolean {

src/types.ts

 import * as React from 'react';
 
+import { STATUS } from './helpers';
+
 export type ErrorCallback = (error: Error | FetchError) => void;
 export type LoadCallback = (src: string, isCached: boolean) => void;
-export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PlainObject<T = unknown> = Record<string, T>;
 export type PreProcessorCallback = (code: string) => string;
@@ -29,3 +31,3 @@
   hasCache: boolean;
-  status: string;
+  status: Status;
 }
@@ -40,5 +42,7 @@
 
+export type Status = (typeof STATUS)[keyof typeof STATUS];
+
 export interface StorageItem {
   content: string;
-  status: string;
+  status: Status;
 }

No alert changes

Improved metrics

Total package byte prevSize

96518

increased by7.03%

Lines of code

1646

increased by5.45%

Number of lines in readme file

183

increased by0.55%

No dependency changes