Fetch upstream

.github/workflows/npm-publish.yml

@@ -0,0 +1,30 @@
+name: Publish Package to npmjs
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+          # Defaults to the user or organization that owns the workflow file
+          scope: '@octocat'
+      - name: vars
+        id: vars
+        run: |
+          echo "latest_version=$(npm view external-svg-loader version)" >> $GITHUB_OUTPUT
+          echo "package_version=$(cat package.json | jq -r '.version')" >> $GITHUB_OUTPUT
+      - name: publish
+        run: |
+          yarn
+          yarn build
+          yarn publish
+        if: ${{ steps.vars.outputs.latest_version != steps.vars.outputs.package_version }}
+        env:
+            NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run build && git add -A .

.npmignore

@@ -0,0 +1,3 @@
+.github
+.husky
+test

README.md

@@ -2,11 +2,11 @@
 [![NPM](https://img.shields.io/npm/v/external-svg-loader.svg)](https://www.npmjs.com/package/external-svg-loader)
 ![minified size](http://img.badgesize.io/shubhamjain/svg-loader/master/svg-loader.min.js?label=minified%20size&v=10) ![gzip size](http://img.badgesize.io/shubhamjain/svg-loader/master/svg-loader.min.js?compression=gzip&v=10)
 
-SVGs from an external source can be rendered via `<img>` tags, but this has multiple drawbacks: you can't customize the fill, use CSS variables, or use focus/hover states.
+SVGs from an external source can be rendered with `<img>` tags, but this has multiple drawbacks: you can't customize the fill or stroke colors, use CSS variables, or use focus/hover states.
 
-SVG loader is a simple JS code you can include that fetches SVGs using XHR and injects the SVG code in the tag's place, giving you best of both worlds: externally stored SVGs (e.g, on CDN) and inline SVGs.
+SVG Loader is a simple JS library that fetches SVGs using XHR and injects the SVG code in the tag's place. This lets you use externally stored SVGs (e.g, on CDN) just like inline SVGs.
 
-It's super-tiny, works well with frameworks and has minimal to no impact on performance.
+It's super-tiny, works with all frameworks, requires no additional code except the initial script load, and has minimal to no impact on performance.
 
 [**Demo →**](https://codepen.io/shubhamjainco/pen/rNyBVmY)
 
@@ -90,14 +90,24 @@ ReactDOM.render(<App />, document.getElementById("container"));
 SVG loader can also be included via unpkg CDN. Example:
 
 ```html
-<script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
+<script
+    type="text/javascript"
+    src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js"
+    async></script>
 ```
 
 ## Configuration
 
 ### 1. Disable/Modify Caching
-By default, the XHR response is cached for 24 hours, so that any subsequent loads are instantenous. You can disable this behavior by passing `data-cache="disabled"`. You can also modify
-the caching period by passing number of seconds. Example:
+By default, the XHR response is cached for 30 days, so that any subsequent loads are instantenous. You can disable this behavior by passing `data-cache="disabled"`. 
+
+You can destroy the currently stored cache by calling:
+
+```js
+SVGLoader.destroyCache();
+```
+
+You can also modify the caching period by passing number of seconds. Example:
 
 #### Cache for a week
 ```html
@@ -201,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 {
@@ -216,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);
+    });
   }
 }
 ```