vite-plugin-magical-svg/runtime/vue-vapor.js

An all-in-one Vite plugin that magically makes working with SVGs and bundling them a breeze

import { markRaw, template } from "vue";

export var createSvg = /*#__NO_SIDE_EFFECTS__*/ (viewBox, width, height, symbol) =>
	// <svg viewBox="{{viewBox}}" width="{{width}}" height="{{height}}"><use href="{{symbol}}" /></svg>
	markRaw({
		render: template(
			`<svg${viewBox ? ` viewBox="${viewBox}"` : ''}${width ? ` width=${width}` : ''}${height ? ` height=${height}` : ''}><use href=${symbol}>`,
			true,
		)
	});

export var createSvgDEV = /*#__NO_SIDE_EFFECTS__*/ (viewBox, width, height, xml) =>
	// <svg viewBox="{{viewBox}}" width="{{width}}" height="{{height}}" innerHTML="{{xml}}"></svg>
	markRaw({
		render: template(
			`<svg${viewBox ? ` viewBox="${viewBox}` : ''}${width ? ` width=${width}` : ''}${height ? ` height=${height}` : ''}>${xml}`,
			true,
		)
	});