react-inlinesvg 2.2.2 → 3.0.1

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`
@@ -20,7 +22,7 @@ npm i react-inlinesvg
 
 And import it into your code:
 
-```typescript
+```tsx
 import React, { useRef } from 'react';
 import SVG, { Props as SVGProps } from 'react-inlinesvg';
 
@@ -34,8 +36,8 @@ export 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`} />
-		</main>
+      <Logo ref={logo} src={`${process.env.PUBLIC_URL}/logo.svg`} />
+    </main>
   );
 }
 ```
@@ -64,6 +66,9 @@ Cache remote SVGs.
 **description** {string}  
 A description for your SVG. It will override an existing `<desc>` tag.
 
+**fetchOptions** {RequestInit}  
+Custom options for the [request](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request).
+
 **innerRef** {React.Ref}  
 Set a ref in SVGElement.
 
@@ -76,7 +81,7 @@ This will receive a single argument with:
 
 - a `FetchError` with:
 
-```js
+```typescript
 {
   message: string;
   type: string;
@@ -87,11 +92,11 @@ This will receive a single argument with:
 
 - or an `InlineSVGError`, which has the following properties:
 
-```js
+```typescript
 {
-    name: 'InlineSVGError',
-    data?: object,
-    message: string
+  name: 'InlineSVGError';
+  data: object; // optional
+  message: string;
 }
 ```
 
@@ -111,7 +116,7 @@ A string to use with `uniquifyIDs`.
 **uniquifyIDs** {boolean} ▶︎ `false`  
 Create unique IDs for each icon.
 
-> Any additional props will be passed down to the SVG element. 
+> Any additional props will be passed down to the SVG element.
 
 ### Example
 
@@ -121,9 +126,9 @@ Create unique IDs for each icon.
   cacheRequests={true}
   description="The React logo"
   loader={<span>Loading...</span>}
-  onError={error => console.log(error.message)}
+  onError={(error) => console.log(error.message)}
   onLoad={(src, hasCache) => console.log(src, hasCache)}
-  preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
+  preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
   src="https://cdn.svgporn.com/logos/react.svg"
   title="React"
   uniqueHash="a1f8d1"
@@ -131,6 +136,11 @@ Create unique IDs for each icon.
 />
 ```
 
+## Caching
+
+The internal cache is exported as `cacheStore` if you need to debug or pre-cache some files.  
+⚠️ Use it at your own risk.
+
 ## 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.
@@ -165,7 +175,7 @@ But there's an alternative that sidesteps these issues: load the SVG with a GET
 
 ### Note
 
-The SVG [`<use>`][svg-use-external-source] element can be used to achieve something similar to this component. See [this article][use-article] for more information and [this table][use-support] for browser support and caveats.
+The SVG [`<use>`](http://css-tricks.com/svg-use-external-source) element can be used to achieve something similar to this component. See [this article](http://taye.me/blog/svg/a-guide-to-svg-use-elements/) for more information and [this table](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#Browser_compatibility) for browser support and caveats.
 
 ## Credits
 

package/esm/helpers.d.ts

@@ -14,4 +14,4 @@ export declare function randomString(length: number): string;
 /**
  *  Remove properties from an object
  */
-export declare function removeProperties<T extends PlainObject, K extends keyof T>(input: T, ...filter: K[]): Omit<T, K>;
+export declare function omit<T extends PlainObject, K extends keyof T>(input: T, ...filter: K[]): Omit<T, K>;

package/esm/helpers.js

@@ -20,17 +20,18 @@ export function supportsInlineSVG() {
     }
     var div = document.createElement('div');
     div.innerHTML = '<svg />';
-    return !!div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+    var svg = div.firstChild;
+    return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';
+}
+function randomCharacter(character) {
+    return character[Math.floor(Math.random() * character.length)];
 }
 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 charset = "".concat(letters).concat(letters.toUpperCase()).concat(numbers);
     var R = '';
-    for (var i = 0; i < length; i++) {
+    for (var index = 0; index < length; index++) {
         R += randomCharacter(charset);
     }
     return R;
@@ -38,7 +39,7 @@ export function randomString(length) {
 /**
  *  Remove properties from an object
  */
-export function removeProperties(input) {
+export function omit(input) {
     var filter = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         filter[_i - 1] = arguments[_i];

package/esm/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAInD,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,sBAAsB;IACpC,OAAO,iBAAiB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC;AACjF,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,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;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAQ;IACR,gBAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,+BAAc;;IAEd,IAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;QACvB,0BAA0B;QAC1B,IAAI,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;YACtC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAE,GAAoB,CAAC,EAAE;gBAC3C,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAInD,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,sBAAsB;IACpC,OAAO,iBAAiB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC;AACjF,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;IAE1C,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1B,IAAM,GAAG,GAAG,GAAG,CAAC,UAA2B,CAAC;IAE5C,OAAO,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,YAAY,KAAK,4BAA4B,CAAC;AACpE,CAAC;AAED,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAM,OAAO,GAAG,4BAA4B,CAAC;IAC7C,IAAM,OAAO,GAAG,YAAY,CAAC;IAC7B,IAAM,OAAO,GAAG,UAAG,OAAO,SAAG,OAAO,CAAC,WAAW,EAAE,SAAG,OAAO,CAAE,CAAC;IAE/D,IAAI,CAAC,GAAG,EAAE,CAAC;IAEX,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE;QAC3C,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC;KAC/B;IAED,OAAO,CAAC,CAAC;AACX,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,IAAI,CAClB,KAAQ;IACR,gBAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,+BAAc;;IAEd,IAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;QACvB,0BAA0B;QAC1B,IAAI,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;YACtC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAmB,CAAC,EAAE;gBACzC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,MAAoB,CAAC;AAC9B,CAAC"}

package/esm/index.d.ts

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