Add fetchOptions prop

README.md

@@ -20,7 +20,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 +34,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 +64,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 +79,7 @@ This will receive a single argument with:
 
 - a `FetchError` with:
 
-```js
+```typescript
 {
   message: string;
   type: string;
@@ -87,11 +90,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 +114,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 +124,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"

src/index.tsx

@@ -292,14 +292,14 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
   };
 
   private request = () => {
-    const { cacheRequests, src } = this.props;
+    const { cacheRequests, fetchOptions, src } = this.props;
 
     try {
       if (cacheRequests) {
         cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
       }
 
-      return fetch(src)
+      return fetch(src, fetchOptions)
         .then((response) => {
           const contentType = response.headers.get('content-type');
           const [fileType] = (contentType || '').split(/ ?; ?/);
@@ -365,6 +365,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
       'cacheRequests',
       'children',
       'description',
+      'fetchOptions',
       'innerRef',
       'loader',
       'onError',

src/types.ts

@@ -12,6 +12,7 @@ export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onEr
   cacheRequests?: boolean;
   children?: React.ReactNode;
   description?: string;
+  fetchOptions?: RequestInit;
   innerRef?: React.Ref<SVGElement>;
   loader?: React.ReactNode;
   onError?: ErrorCallback;

test/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`react-inlinesvg basic functionality should handle fetchOptions 1`] = `
+<svg width="256px"
+     height="228px"
+     viewbox="0 0 256 228"
+     version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     preserveaspectratio="xMidYMid"
+>
+  <g>
+    <path d="M210.483381,73.8990629 C207.827698,72.9840419 205.075867,72.1182841 202.24247,71.2995091 C202.708172,69.3969402 203.135596,67.5190031 203.515631,65.6729959 C209.753843,35.3609836 205.675082,10.9414152 191.747328,2.90145422 C178.392359,-4.80780372 156.551327,3.23033273 134.492936,22.4466879 C132.371761,24.2945196 130.244662,26.2509132 128.118477,28.301272 C126.701777,26.9447053 125.287358,25.6337529 123.876584,24.3798182 C100.758745,3.83244023 77.5866802,-4.82650557 63.6725966,3.23671873 C50.3303869,10.9683277 46.3792156,33.9250482 51.9945178,62.6519667 C52.5367729,65.4266792 53.1706189,68.2602341 53.8873982,71.1412277 C50.6078941,72.073126 47.4418534,73.0666036 44.4125156,74.1234849 C17.3093297,83.582504 0,98.4071226 0,113.784129 C0,129.665631 18.5815786,145.595025 46.8116526,155.253834 C49.0394553,156.016048 51.3511025,156.736752 53.7333796,157.420966 C52.9600965,160.536873 52.2875179,163.590287 51.7229345,166.56844 C46.3687351,194.796796 50.5500231,217.211162 63.8566899,224.893964 C77.6012619,232.828101 100.66852,224.672736 123.130185,205.018484 C124.905501,203.464864 126.687196,201.817279 128.472081,200.090325 C130.785552,202.320404 133.095375,204.430973 135.392897,206.410629 C157.14963,225.152141 178.637969,232.719996 191.932332,225.015756 C205.663234,217.05881 210.125675,192.980437 204.332202,163.685166 C203.88974,161.447789 203.374826,159.16206 202.796573,156.835736 C204.416503,156.356329 206.006814,155.861416 207.557482,155.346888 C236.905331,145.613271 256,129.877735 256,113.784129 C256,98.3514736 238.132466,83.4269595 210.483381,73.8990629 Z M204.118035,144.955515 C202.718197,145.41941 201.281904,145.867799 199.818271,146.302502 C196.578411,136.035199 192.205739,125.117437 186.854729,113.837499 C191.961041,102.826227 196.164656,92.0480457 199.313837,81.8473394 C201.93261,82.6059037 204.474374,83.4059771 206.923636,84.2502962 C230.613348,92.4138716 245.063763,104.483848 245.063763,113.784129 C245.063763,123.690625 229.457753,136.550639 204.118035,144.955515 Z M193.603754,165.811243 C196.165567,178.765224 196.531475,190.477129 194.834536,199.632813 C193.309843,207.859793 190.243595,213.344902 186.452366,215.541683 C178.384612,220.216227 161.131788,214.139958 142.525146,198.112036 C140.392124,196.274695 138.243609,194.312829 136.088259,192.236468 C143.301619,184.33928 150.510878,175.158509 157.54698,164.962363 C169.922699,163.863062 181.614905,162.06586 192.218042,159.612272 C192.740247,161.721018 193.204126,163.789165 193.603754,165.811243 Z M87.2761866,214.733855 C79.3938934,217.520428 73.1160375,217.600252 69.3211631,215.409857 C61.2461189,210.747629 57.8891498,192.750997 62.4682434,168.610132 C62.9927272,165.845454 63.6170041,163.005515 64.3365173,160.102626 C74.8234575,162.423933 86.4299951,164.094325 98.8353334,165.10103 C105.918826,175.078229 113.336329,184.248965 120.811247,192.278891 C119.178102,193.857141 117.551336,195.359675 115.933685,196.775539 C106.001303,205.466416 96.0479605,211.632544 87.2761866,214.733855 Z M50.3486141,144.894847 C37.8658105,140.623989 27.5570398,135.073195 20.4908634,129.016084 C14.1414664,123.57294 10.9357817,118.169025 10.9357817,113.784129 C10.9357817,104.45283 24.8334611,92.5507141 48.0123604,84.4610338 C50.8247961,83.4794159 53.7689223,82.5543597 56.8242337,81.685409 C60.0276398,92.1164669 64.229889,103.022368 69.3011135,114.050516 C64.1642716,125.242419 59.9023288,136.322113 56.6674809,146.875415 C54.489347,146.248677 52.3791089,145.589095 50.3486141,144.894847 Z M62.7270678,60.5496076 C57.9160346,35.9370912 61.1112387,17.3702823 69.1516515,12.7112467 C77.7160924,7.74796425 96.6544653,14.824553 116.614922,32.5662008 C117.890816,33.7001702 119.171723,34.8870519 120.456275,36.1149866 C113.018267,44.1097895 105.66866,53.2116494 98.6480514,63.1300035 C86.6081646,64.2470957 75.0831931,66.0415588 64.4868907,68.4445154 C63.8206914,65.7619436 63.2305903,63.1263545 62.7270678,60.5496076 Z M173.153901,87.8446959 C170.620796,83.4648193 168.020249,79.1884869 165.369124,75.028927 C173.537126,76.062545 181.362914,77.4346205 188.712066,79.1136797 C186.505679,86.1920931 183.755673,93.592999 180.518546,101.180011 C178.196419,96.7668358 175.740322,92.3171695 173.153901,87.8446959 Z M128.122121,43.9387362 C133.166461,49.4092487 138.218091,55.5169916 143.186789,62.1438243 C138.179814,61.9070865 133.110868,61.7839281 128.000001,61.7839281 C122.937434,61.7839281 117.905854,61.9043497 112.929865,62.1369822 C117.903575,55.5717286 122.99895,49.4721962 128.122121,43.9387362 Z M82.8018984,87.9204155 C80.2715265,92.312608 77.8609975,96.738099 75.5753239,101.171801 C72.3906004,93.6112447 69.6661103,86.1765842 67.440586,78.9978195 C74.7446255,77.3616377 82.5335049,76.023773 90.6495601,75.0097691 C87.9610684,79.2076449 85.3391054,83.5154511 82.8018984,87.9195033 L82.8018984,87.9204155 Z M90.8833221,153.339406 C82.4979621,152.402946 74.5919739,151.13396 67.289757,149.542935 C69.5508242,142.235994 72.3354636,134.642597 75.5876271,126.919198 C77.8792246,131.349707 80.2993228,135.777023 82.8451877,140.178794 L82.8456433,140.178794 C85.4388987,144.663127 88.1255676,149.055775 90.8833221,153.339406 Z M128.424691,184.401315 C123.24137,178.803083 118.071264,172.610499 113.021912,165.949455 C117.923624,166.141947 122.921029,166.240474 128.000001,166.240474 C133.217953,166.240474 138.376211,166.122789 143.45336,165.896542 C138.468257,172.677552 133.434855,178.879716 128.424691,184.401315 Z M180.622896,126.525548 C184.044571,134.33242 186.929004,141.886134 189.219234,149.068548 C181.796719,150.763571 173.782736,152.128805 165.339049,153.143266 C167.996555,148.927599 170.619884,144.577827 173.197646,140.103529 C175.805484,135.576776 178.28163,131.04318 180.622896,126.525548 Z M163.724586,134.634386 C159.722835,141.580062 155.614455,148.210543 151.443648,154.469271 C143.847063,155.012991 135.998946,155.293063 128.000001,155.293063 C120.033408,155.293063 112.284171,155.045377 104.822013,154.560498 C100.48306,148.219667 96.285368,141.569572 92.3091341,134.69414 L92.3100455,134.69414 C88.3442923,127.837413 84.6943232,120.922754 81.3870228,114.046869 C84.6934118,107.155016 88.3338117,100.232604 92.276781,93.3881912 L92.2758697,93.3895596 C96.2293193,86.5269014 100.390102,79.9091915 104.688954,73.6080442 C112.302398,73.0319369 120.109505,72.7313392 127.999545,72.7313392 L128.000001,72.7313392 C135.925583,72.7313392 143.742714,73.0342174 151.353879,73.6153426 C155.587114,79.8704195 159.719645,86.4666905 163.688588,93.3302612 C167.702644,100.27092 171.389978,107.147261 174.724618,113.891324 C171.400003,120.751244 167.720871,127.696922 163.724586,134.634386 Z M186.284677,12.3855612 C194.857321,17.3342471 198.191049,37.2922894 192.804953,63.4634435 C192.461372,65.1333799 192.074504,66.8343338 191.654369,68.5580948 C181.03346,66.1049625 169.500286,64.2794818 157.425315,63.1455124 C150.391035,53.1181402 143.101577,44.0021399 135.784778,36.1099689 C137.751934,34.2156109 139.716356,32.4092879 141.672575,30.7046849 C160.572216,14.2402351 178.236518,7.73975369 186.284677,12.3855612 Z M128.000001,90.9008481 C140.624975,90.9008481 150.859926,101.1458 150.859926,113.784129 C150.859926,126.422002 140.624975,136.667412 128.000001,136.667412 C115.375026,136.667412 105.140075,126.422002 105.140075,113.784129 C105.140075,101.1458 115.375026,90.9008481 128.000001,90.9008481 Z"
+          fill="#00D8FF"
+          fill-rule="nonzero"
+    >
+    </path>
+  </g>
+</svg>
+`;
+
 exports[`react-inlinesvg basic functionality should handle innerRef 1`] = `
 <svg
   height="32px"

test/index.spec.tsx

@@ -251,6 +251,20 @@ describe('react-inlinesvg', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
 
+    it('should handle fetchOptions', async () => {
+      const wrapper = await setup({
+        src: fixtures.react,
+        fetchOptions: {
+          headers: {
+            Authorization: 'Bearer ad99d8d5-419d-434e-97c2-3ce52e116d52',
+          },
+        },
+      });
+      wrapper.update();
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
     it('should handle unmount', async () => {
       const wrapper = await setup({
         src: fixtures.play,