Merge pull request shubhamjain#42 from MonkeyDo/error-event

Fix shubhamjain#22 : throw custom error event on SVG load failure

Author: shubhamjain

README.md

@@ -211,8 +211,28 @@ When the SVG has been loaded an event `iconload` is triggered. This can be used
 </script>
 ```
 
+### Using the `iconloaderror` event
+When an error occurs during loading of the SVG file, an `iconloaderror` event is triggered, passing the error message as the event's `detail`.
+
+```html
+<svg data-src="https://unpkg.com/@mdi/[email protected]/svg/this-svg-does-not-exist.svg"></svg>
+
+<script>
+  window.addEventListener('iconloaderror', (e) => {
+    console.error('Failed to load SVG:', e.detail);
+  });
+</script>
+```
+
+Similarly to the `iconload` event, `iconloaderror` can also be used with an inline function, which will have access to an `error` argument (the `Error` object that was thrown):
+```html
+<svg
+  data-src="https://unpkg.com/@mdi/[email protected]/svg/cog.svg"
+  oniconloaderror="console.log('Error loading SVG:', error.toString())"></svg>
+```
+
 ### Using Events in React
-React doesn't support custom events out of the box. To circumvent this limitation, you can [refs](https://reactjs.org/docs/refs-and-the-dom.html).
+React doesn't support custom events out of the box. To circumvent this limitation, you can use [refs](https://reactjs.org/docs/refs-and-the-dom.html).
 
 ```jsx
 class MyApp extends React.Component {
@@ -226,7 +246,10 @@ class MyApp extends React.Component {
   componentDidMount() {
     this.ref.current.addEventListener('iconload', () => {
       console.log("Icon Loaded", this.ref.current)
-    })
+    });
+    this.ref.current.addEventListener('iconloaderror', (e) => {
+      console.error('Failed to load SVG:', e.detail);
+    });
   }
 }
 ```

svg-loader.js

@@ -196,7 +196,7 @@ const renderBody = (elem, options, body) => {
         // no way to specify the context for execution. So, `this` in the attribute
         // will point to `window` instead of the element itself. 
         //
-        // Here we are recycling a rarely used GlobalEventHandler 'onloadedmetadata'
+        // Here we are recycling a rarely used GlobalEventHandler 'onauxclick'
         // and offloading the execution to the browser. This is a hack, but because
         // the event doesn't bubble, it shouldn't affect anything else in the code. 
         elem.setAttribute('onauxclick', elem.getAttribute('oniconload'));
@@ -270,6 +270,16 @@ const renderIcon = async (elem) => {
             })
             .catch((e) => {
                 console.error(e);
+                const event = new CustomEvent('iconloaderror', {
+                    bubbles: true,
+                    detail: e.toString(),
+                });
+                elem.dispatchEvent(event);
+                if(elem.getAttribute('oniconloaderror')){
+                    // the oniconloaderror inline function will have access to an `error` argument
+                    const loadErrorFunction = Function("error", elem.getAttribute('oniconloaderror'));
+                    loadErrorFunction(e);
+                }
             })
             .finally(() => {
                 delete requestsInProgress[src];

test/index.html

@@ -46,6 +46,15 @@ <h1>
         });
     </script>
 
+    <div class="heading">Icon load error event (see console)</div>
+    <svg data-src="https://unpkg.com/@mdi/[email protected]/svg/this-svg-does-not-exist.svg"></svg>
+
+    <script>
+        window.addEventListener('iconloaderror', (e) => {
+            console.error('Error event fired:', e.detail);
+        });
+    </script>
+
     <div class="heading">Icon using doctype declaration</div>
     <svg data-src="/icons/cog-with-doctype.svg" fill="green"></svg>