react-inlinesvg 1.1.4 → 1.2.0

package/README.md

@@ -34,6 +34,9 @@ Cache remote SVGs.
 **description** {string}  
 A description for your SVG. It will override an existing `<desc>` tag.
 
+**innerRef** {React.Ref|function}  
+Get the SVG HTMLElement.
+
 **loader** {node}  
 A component to be shown while the SVG is loading.
 

package/lib/helpers.js

@@ -53,3 +53,4 @@ exports.randomString = function (length) {
     }
     return R;
 };
+//# sourceMappingURL=helpers.js.map

package/lib/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAmD;AAEtC,QAAA,SAAS,GAAG,cAAM,OAAA,iBAAa,EAAb,CAAa,CAAC;AAEhC,QAAA,iBAAiB,GAAG;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,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU,CAAC,YAAY,KAAK,4BAA4B,CAAC;AACxF,CAAC,CAAC;AAEF,gDAAgD;AAChD;IAAoC,kCAAK;IAKvC,wBAAY,OAAe,EAAE,IAAa;QAA1C,YACE,iBAAO,SAOR;QALC,KAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC;QAC7B,KAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,KAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,OAAO,KAAI,CAAC;IACd,CAAC;IACH,qBAAC;AAAD,CAAC,AAdD,CAAoC,KAAK,GAcxC;AAdY,wCAAc;AAgBd,QAAA,sBAAsB,GAAG;IACpC,OAAA,yBAAiB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,IAAI;AAAvE,CAAuE,CAAC;AAE7D,QAAA,YAAY,GAAG,UAAC,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;IACD,OAAO,CAAC,CAAC;AACX,CAAC,CAAC"}

package/lib/index.d.ts

@@ -6,6 +6,7 @@ export interface IProps {
     children?: React.ReactNode;
     description?: string;
     loader?: React.ReactNode;
+    innerRef?: React.Ref<HTMLElement>;
     onError?: (error: InlineSVGError | IFetchError) => void;
     onLoad?: (src: string, isCached: boolean) => void;
     preProcessor?: (code: string) => string;

package/lib/index.js

@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
         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)
@@ -205,6 +216,10 @@ var InlineSVG = /** @class */ (function (_super) {
         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;
         }
@@ -212,14 +227,14 @@ var InlineSVG = /** @class */ (function (_super) {
             if (d.attributes && d.attributes.length) {
                 var attributes_1 = Object.values(d.attributes);
                 attributes_1.forEach(function (a) {
-                    var match = a.value.match(/^url\((#[^)]+)/);
+                    var match = a.value.match(/url\((.*?)\)/);
                     if (match && match[1]) {
-                        a.value = "url(" + baseURL + match[1] + "__" + _this.hash + ")";
+                        a.value = a.value.replace(match[0], "url(" + baseURL + match[1] + "__" + _this.hash + ")");
                     }
                 });
                 replaceableAttributes.forEach(function (r) {
                     var attribute = attributes_1.find(function (a) { return a.name === r; });
-                    if (attribute) {
+                    if (attribute && !isDataValue(r, attribute.value)) {
                         attribute.value = attribute.value + "__" + _this.hash;
                     }
                 });
@@ -265,7 +280,6 @@ var InlineSVG = /** @class */ (function (_super) {
         }
     };
     InlineSVG.prototype.getElement = function () {
-        var _a = this.props, baseURL = _a.baseURL, cacheRequests = _a.cacheRequests, children = _a.children, description = _a.description, onError = _a.onError, onLoad = _a.onLoad, loader = _a.loader, preProcessor = _a.preProcessor, src = _a.src, title = _a.title, uniqueHash = _a.uniqueHash, uniquifyIDs = _a.uniquifyIDs, rest = __rest(_a, ["baseURL", "cacheRequests", "children", "description", "onError", "onLoad", "loader", "preProcessor", "src", "title", "uniqueHash", "uniquifyIDs"]);
         try {
             var node = this.getNode();
             var element = react_from_dom_1.default(node);
@@ -273,7 +287,7 @@ var InlineSVG = /** @class */ (function (_super) {
                 throw new helpers_1.InlineSVGError('Could not convert the src to a React element');
             }
             this.setState({
-                element: React.cloneElement(element, rest),
+                element: element,
                 status: exports.STATUS.READY,
             });
         }
@@ -323,9 +337,9 @@ var InlineSVG = /** @class */ (function (_super) {
             return null;
         }
         var _a = this.state, element = _a.element, status = _a.status;
-        var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, _d = _b.loader, loader = _d === void 0 ? null : _d;
+        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 (element) {
-            return element;
+            return React.cloneElement(element, __assign({ ref: innerRef }, rest));
         }
         if ([exports.STATUS.UNSUPPORTED, exports.STATUS.FAILED].indexOf(status) > -1) {
             return children;
@@ -339,3 +353,4 @@ var InlineSVG = /** @class */ (function (_super) {
     return InlineSVG;
 }(React.PureComponent));
 exports.default = InlineSVG;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "An SVG loader for React",
   "author": "Gil Barbara <gilbarbara@gmail.com>",
   "contributors": [
@@ -19,7 +19,8 @@
   "homepage": "https://github.com/gilbarbara/react-inlinesvg#readme",
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -28,55 +29,51 @@
     "svg"
   ],
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0"
   },
   "dependencies": {
     "exenv": "^1.2.2",
-    "react-from-dom": "^0.2.3"
+    "react-from-dom": "^0.3.0"
   },
   "devDependencies": {
+    "@gilbarbara/tsconfig": "^0.1.0",
+    "@size-limit/preset-small-lib": "^2.2.1",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/exenv": "^1.2.0",
-    "@types/fetch-mock": "^7.3.1",
-    "@types/jest": "^24.0.15",
-    "@types/node": "^12.6.8",
-    "@types/node-fetch": "^2.5.0",
-    "@types/react": "^16.8.23",
-    "@types/react-dom": "^16.8.5",
-    "bundlesize": "^0.18.0",
-    "chalk": "^2.4.2",
-    "cross-env": "^5.2.0",
+    "@types/fetch-mock": "^7.3.2",
+    "@types/jest": "^24.0.23",
+    "@types/node": "^12.12.9",
+    "@types/node-fetch": "^2.5.3",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "fetch-mock": "^7.3.9",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "fetch-mock": "^8.0.0",
     "http-server": "^0.11.1",
-    "husky": "^3.0.1",
-    "jest": "^24.8.0",
+    "husky": "^3.1.0",
+    "jest": "^24.9.0",
     "jest-chain": "^1.1.2",
-    "jest-enzyme": "^7.0.2",
+    "jest-enzyme": "^7.1.2",
     "jest-extended": "^0.11.2",
-    "jest-watch-typeahead": "^0.3.1",
+    "jest-watch-typeahead": "^0.4.2",
     "node-fetch": "^2.6.0",
-    "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "rimraf": "^2.6.3",
-    "start-server-and-test": "^1.9.1",
-    "styled-components": "^4.3.2",
-    "ts-jest": "^24.0.2",
-    "ts-node": "^8.3.0",
-    "tslint": "^5.18.0",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "repo-tools": "^0.2.0",
+    "rimraf": "^3.0.0",
+    "size-limit": "^2.2.1",
+    "start-server-and-test": "^1.10.6",
+    "ts-jest": "^24.1.0",
+    "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
-    "tslint-react": "^4.0.0",
-    "typescript": "^3.5.3",
-    "yargs": "^13.3.0"
+    "tslint-react": "^4.1.0",
+    "typescript": "^3.7.2"
   },
   "scripts": {
     "build": "npm run clean && npm run build:ts",
-    "build:ts": "tsc --outDir lib",
+    "build:ts": "tsc",
     "watch": "npm run build:ts -- -w",
     "clean": "rimraf lib",
     "start": "http-server -p 1337 --cors test/__fixtures__",
@@ -85,8 +82,8 @@
     "test:watch": "jest --watch --verbose",
     "lint": "tslint 'src/**/*.ts?(x)' 'test/**/*.ts?(x)' 'tools/**/*.ts?(x)'",
     "format": "prettier \"**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql,mdx}\" --write",
-    "validate": "npm run lint && npm run test && npm run build && npm run bundlesize",
-    "bundlesize": "bundlesize",
+    "validate": "npm run lint && npm run test && npm run size",
+    "size": "npm run build && size-limit",
     "prepublishOnly": "npm run validate"
   },
   "browserslist": [
@@ -100,16 +97,16 @@
     "singleQuote": true,
     "trailingComma": "all"
   },
-  "bundlesize": [
+  "size-limit": [
     {
       "path": "./lib/index.js",
-      "maxSize": "5 kB"
+      "limit": "8 KB"
     }
   ],
   "husky": {
     "hooks": {
-      "post-merge": "ts-node tools update",
-      "pre-commit": "ts-node tools has-commits && npm run validate"
+      "post-merge": "repo-tools istall-packages",
+      "pre-commit": "repo-tools check-remote && npm run validate"
     }
   }
 }

package/src/helpers.ts

@@ -0,0 +1,49 @@
+import { canUseDOM as canUseDOMFlag } from 'exenv';
+
+export const canUseDOM = () => canUseDOMFlag;
+
+export const supportsInlineSVG = () => {
+  /* istanbul ignore next */
+  if (!document) {
+    return false;
+  }
+
+  const div = document.createElement('div');
+  div.innerHTML = '<svg />';
+  return div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+};
+
+// tslint:disable-next-line:no-shadowed-variable
+export class InlineSVGError extends Error {
+  public name: string;
+  public message: string;
+  public data?: object;
+
+  constructor(message: string, data?: object) {
+    super();
+
+    this.name = 'InlineSVGError';
+    this.message = message;
+    this.data = data;
+
+    return this;
+  }
+}
+
+export const isSupportedEnvironment = () =>
+  supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+
+export const randomString = (length: number) => {
+  const letters = 'abcdefghijklmnopqrstuvwxyz';
+  const numbers = '1234567890';
+  const charset = `${letters}${letters.toUpperCase()}${numbers}`;
+
+  const randomCharacter = (character: string) =>
+    character[Math.floor(Math.random() * character.length)];
+
+  let R = '';
+  for (let i = 0; i < length; i++) {
+    R += randomCharacter(charset);
+  }
+  return R;
+};

package/src/index.tsx

@@ -0,0 +1,418 @@
+import * as React from 'react';
+
+import convert from 'react-from-dom';
+
+import { canUseDOM, InlineSVGError, isSupportedEnvironment, randomString } from './helpers';
+
+export interface IProps {
+  baseURL?: string;
+  cacheRequests?: boolean;
+  children?: React.ReactNode;
+  description?: string;
+  loader?: React.ReactNode;
+  innerRef?: React.Ref<HTMLElement>;
+  onError?: (error: InlineSVGError | IFetchError) => void;
+  onLoad?: (src: string, isCached: boolean) => void;
+  preProcessor?: (code: string) => string;
+  src: string;
+  title?: string;
+  uniqueHash?: string;
+  uniquifyIDs?: boolean;
+  [key: string]: any;
+}
+
+export interface IState {
+  content: string;
+  element: React.ReactNode;
+  hasCache: boolean;
+  status: string;
+}
+
+export interface IFetchError extends Error {
+  code: string;
+  errno: string;
+  message: string;
+  type: string;
+}
+
+export interface IStorageItem {
+  content: string;
+  queue: any[];
+  status: string;
+}
+
+export const STATUS = {
+  FAILED: 'failed',
+  LOADED: 'loaded',
+  LOADING: 'loading',
+  PENDING: 'pending',
+  READY: 'ready',
+  UNSUPPORTED: 'unsupported',
+};
+
+const cacheStore: { [key: string]: IStorageItem } = Object.create(null);
+
+export default class InlineSVG extends React.PureComponent<IProps, IState> {
+  public static defaultProps = {
+    cacheRequests: true,
+    uniquifyIDs: false,
+  };
+
+  // tslint:disable-next-line:variable-name
+  private _isMounted = false;
+  private readonly hash: string;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      content: '',
+      element: null,
+      hasCache: !!props.cacheRequests && !!cacheStore[props.src],
+      status: STATUS.PENDING,
+    };
+
+    this.hash = props.uniqueHash || randomString(8);
+  }
+
+  public componentDidMount() {
+    this._isMounted = true;
+
+    if (!canUseDOM()) {
+      this.handleError(new InlineSVGError('No DOM'));
+      return;
+    }
+
+    const { status } = this.state;
+    const { src } = this.props;
+
+    try {
+      /* istanbul ignore else */
+      if (status === STATUS.PENDING) {
+        /* istanbul ignore else */
+        if (!isSupportedEnvironment()) {
+          throw new InlineSVGError('Browser does not support SVG');
+        }
+
+        /* istanbul ignore else */
+        if (!src) {
+          throw new InlineSVGError('Missing src');
+        }
+
+        this.load();
+      }
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+
+  public componentDidUpdate(prevProps: IProps, prevState: IState) {
+    if (!canUseDOM()) {
+      return;
+    }
+
+    const { hasCache, status } = this.state;
+    const { onLoad, src } = this.props;
+
+    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 InlineSVGError('Missing src'));
+        return;
+      }
+
+      this.load();
+    }
+  }
+
+  public componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  private processSVG() {
+    const { content } = this.state;
+    const { preProcessor } = this.props;
+
+    if (preProcessor) {
+      return preProcessor(content);
+    }
+
+    return content;
+  }
+
+  private updateSVGAttributes(node: SVGSVGElement): SVGSVGElement {
+    const { baseURL = '', uniquifyIDs } = this.props;
+    const replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
+    const linkAttributes = ['href', 'xlink:href'];
+    const isDataValue = (name: string, value: string) =>
+      linkAttributes.indexOf(name) >= 0 && (value ? value.indexOf('#') < 0 : false);
+
+    if (!uniquifyIDs) {
+      return node;
+    }
+
+    [...node.children].map(d => {
+      if (d.attributes && d.attributes.length) {
+        const attributes = Object.values(d.attributes);
+
+        attributes.forEach(a => {
+          const match = a.value.match(/url\((.*?)\)/);
+
+          if (match && match[1]) {
+            a.value = a.value.replace(match[0], `url(${baseURL}${match[1]}__${this.hash})`);
+          }
+        });
+
+        replaceableAttributes.forEach(r => {
+          const attribute = attributes.find(a => a.name === r);
+
+          if (attribute && !isDataValue(r, attribute.value)) {
+            attribute.value = `${attribute.value}__${this.hash}`;
+          }
+        });
+      }
+
+      if (d.children.length) {
+        d = this.updateSVGAttributes(d as SVGSVGElement);
+      }
+
+      return d;
+    });
+
+    return node;
+  }
+
+  private getNode() {
+    const { description, title } = this.props;
+
+    try {
+      const svgText = this.processSVG();
+      const node = convert(svgText, { nodeOnly: true });
+
+      if (!node || !(node instanceof SVGSVGElement)) {
+        throw new InlineSVGError('Could not convert the src to a DOM Node');
+      }
+
+      const svg = this.updateSVGAttributes(node);
+
+      if (description) {
+        const originalDesc = svg.querySelector('desc');
+
+        if (originalDesc && originalDesc.parentNode) {
+          originalDesc.parentNode.removeChild(originalDesc);
+        }
+
+        const descElement = document.createElement('desc');
+        descElement.innerHTML = description;
+        svg.prepend(descElement);
+      }
+
+      if (title) {
+        const originalTitle = svg.querySelector('title');
+
+        if (originalTitle && originalTitle.parentNode) {
+          originalTitle.parentNode.removeChild(originalTitle);
+        }
+
+        const titleElement = document.createElement('title');
+        titleElement.innerHTML = title;
+        svg.prepend(titleElement);
+      }
+
+      return svg;
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+
+  private getElement() {
+    try {
+      const node = this.getNode() as Node;
+      const element = convert(node);
+
+      if (!element || !React.isValidElement(element)) {
+        throw new InlineSVGError('Could not convert the src to a React element');
+      }
+
+      this.setState({
+        element,
+        status: STATUS.READY,
+      });
+    } catch (error) {
+      this.handleError(new InlineSVGError(error.message));
+    }
+  }
+
+  private load() {
+    /* istanbul ignore else */
+    if (this._isMounted) {
+      this.setState(
+        {
+          content: '',
+          element: null,
+          status: STATUS.LOADING,
+        },
+        () => {
+          const { cacheRequests, src } = this.props;
+          const cache = cacheRequests && cacheStore[src];
+
+          if (cache) {
+            /* istanbul ignore else */
+            if (cache.status === STATUS.LOADING) {
+              cache.queue.push(this.handleLoad);
+            } else if (cache.status === STATUS.LOADED) {
+              this.handleLoad(cache.content);
+            }
+            return;
+          }
+
+          const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+          let 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();
+        },
+      );
+    }
+  }
+
+  private handleLoad = (content: string) => {
+    /* istanbul ignore else */
+    if (this._isMounted) {
+      this.setState(
+        {
+          content,
+          status: STATUS.LOADED,
+        },
+        this.getElement,
+      );
+    }
+  };
+
+  private handleError = (error: InlineSVGError | IFetchError) => {
+    const { onError } = this.props;
+    const status =
+      error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
+
+    /* istanbul ignore else */
+    if (process.env.NODE_ENV !== 'production') {
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+
+    /* istanbul ignore else */
+    if (this._isMounted) {
+      this.setState({ status }, () => {
+        /* istanbul ignore else */
+        if (typeof onError === 'function') {
+          onError(error);
+        }
+      });
+    }
+  };
+
+  private request = () => {
+    const { cacheRequests, src } = this.props;
+
+    try {
+      if (cacheRequests) {
+        cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
+      }
+
+      return fetch(src)
+        .then(response => {
+          const contentType = response.headers.get('content-type');
+          const [fileType] = (contentType || '').split(/ ?; ?/);
+
+          if (response.status > 299) {
+            throw new InlineSVGError('Not Found');
+          }
+
+          if (!['image/svg+xml', 'text/plain'].some(d => fileType.indexOf(d) >= 0)) {
+            throw new InlineSVGError(`Content type isn't valid: ${fileType}`);
+          }
+
+          return response.text();
+        })
+        .then(content => {
+          this.handleLoad(content);
+
+          /* istanbul ignore else */
+          if (cacheRequests) {
+            const cache = cacheStore[src];
+
+            /* istanbul ignore else */
+            if (cache) {
+              cache.content = content;
+              cache.status = STATUS.LOADED;
+
+              cache.queue = cache.queue.filter((cb: (content: string) => void) => {
+                cb(content);
+
+                return false;
+              });
+            }
+          }
+        })
+        .catch(error => {
+          /* istanbul ignore else */
+          if (cacheRequests) {
+            delete cacheStore[src];
+          }
+          this.handleError(error);
+        });
+    } catch (error) {
+      this.handleError(new InlineSVGError(error.message));
+    }
+  };
+
+  public render() {
+    if (!canUseDOM()) {
+      return null;
+    }
+
+    const { element, status } = this.state;
+    const {
+      baseURL,
+      cacheRequests,
+      children = null,
+      description,
+      innerRef,
+      loader = null,
+      onError,
+      onLoad,
+      preProcessor,
+      src,
+      title,
+      uniqueHash,
+      uniquifyIDs,
+      ...rest
+    } = this.props;
+
+    if (element) {
+      return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...rest });
+    }
+
+    if ([STATUS.UNSUPPORTED, STATUS.FAILED].indexOf(status) > -1) {
+      return children;
+    }
+
+    return loader;
+  }
+}