How to use @tanem/svg-injector - 4 common examples

// TODO: It'd be better to cleanly unsubscribe from SVGInjector
        // callbacks instead of tracking a property like this.
        if (this._isMounted) {
          this.setState(
            () => ({
              hasError: !!error,
              isLoading: false
            }),
            () => {
              afterInjection(error, svg)
            }
          )
        }
      }

      SVGInjector(this.svgWrapper.firstChild as WrapperType, {
        afterEach,
        beforeEach: beforeInjection,
        evalScripts,
        renumerateIRIElements
      })
    }
  }

import { SVGInjector } from '@tanem/svg-injector'

SVGInjector(document.getElementsByClassName('inject-me'), {
  afterAll(elementsLoaded) {
    console.log(`injected ${elementsLoaded} elements`)
  },
  afterEach(err, svg) {
    if (err) {
      throw err
    }
    console.log(`injected ${svg.outerHTML}`)
  },
  beforeEach(svg) {
    svg.setAttribute('stroke', 'red')
  },
  evalScripts: 'once',
  renumerateIRIElements: 'false'
})

import { SVGInjector } from '@tanem/svg-injector'

document.body.insertAdjacentHTML(
  'beforeend',
  `
  <div data-src="api-usage/icon-one.svg" class="api-usage"></div>
  <div data-src="api-usage/icon-two.svg" class="api-usage"></div>
  `
)

SVGInjector(document.getElementsByClassName('api-usage'), {
  afterAll(elementsLoaded) {
    console.log(`injected ${elementsLoaded} elements`)
  },
  afterEach(err, svg) {
    if (err) {
      throw err
    }
    console.log(`injected ${svg.outerHTML}`)
  },
  beforeEach(svg) {
    svg.setAttribute('stroke', 'red')
  },
  evalScripts: 'once',
  renumerateIRIElements: 'false'
})

import { SVGInjector } from '@tanem/svg-injector'

SVGInjector(document.getElementById('inject-me'))