vite-plugin-svg-sprite
vite-plugin-svg-sprite copied to clipboard
meowtec
Usage with app in body
Our app is mounted directly into the document <body>.
Unfortunately, the <svg> spritesheet is already created at this point and gets wiped out by Vue, so icons don't work.
I can't change the app mounting point and put it into a child of <body>, do you have any advice how to make that setup work?
I was thinking maybe the runtime could be a Vue plugin that injects itself in the body after the app is mounted?
For backward compatibility, this mode of runtime initialization could be optional and only needed when mounting in body directly.
Maybe we could have a global variable called __VITE_SVG_SPRITE_TARGET_EL__ which the user could register to window.
If __VITE_SVG_SPRITE_TARGET_EL__ existed, <svg> will be inserted here.
Then you could:
// register before all codes, make sure that `vite-plugin-svg-sprite` can always visit it.
window.__VITE_SVG_SPRITE_TARGET_EL__ = document.createElement('div')
// in app mounted:
mounted() {
this.$refs.svgRoot.appendChild(window.__VITE_SVG_SPRITE_TARGET_EL__)
}
template: `...<div ref="svgRoot"></div>...`,
If we go in this direction, maybe just export getSvgRoot() from runtime?
That way, one could do:
import { getSvgRoot } from "vite-plugin-svg-sprite";
createApp(APP).mount(document.body);
document.body.append(getSvgRoot()); // Put back the SVG sprites inside body
If we go in this direction, maybe just export
getSvgRoot()from runtime?That way, one could do:
import { getSvgRoot } from "vite-plugin-svg-sprite"; createApp(APP).mount(document.body); document.body.append(getSvgRoot()); // Put back the SVG sprites inside body
You are right.