From 6543e3d1a731c8dfef10f7cdf2718edbd18f8f5d Mon Sep 17 00:00:00 2001
From: Thierry Michel <thmichel@gmail.com>
Date: Mon, 16 Nov 2020 08:59:51 +0100
Subject: [PATCH] fix: :recycle: use render function

to avoid runtime template compilation
---
 src/component.ts | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/component.ts b/src/component.ts
index 2daeeb5..17dfa95 100644
--- a/src/component.ts
+++ b/src/component.ts
@@ -1,4 +1,4 @@
-import { App, defineComponent, computed } from 'vue'
+import { App, computed, defineComponent, h } from 'vue'
 import { SvgSpriteOptions, SvgSpritePluginOptions } from './defs'
 import { getAttributes, getHref } from './utils'
 
@@ -6,19 +6,6 @@ const name = 'SvgSprite'
 const options: SvgSpriteOptions = {} as SvgSpriteOptions
 export const SvgSprite = defineComponent({
   name,
-  template: `
-  <svg
-    :class="cssClass"
-    :viewBox="attrs.viewBox"
-    :width="attrs.width"
-    :height="attrs.height"
-    role="presentation"
-  >
-    <use xmlns:xlink="http://www.w3.org/1999/xlink"
-      :xlink:href="href"
-      :href="href"
-    ></use>
-  </svg>`,
   props: {
     symbol: {
       type: String,
@@ -50,11 +37,23 @@ export const SvgSprite = defineComponent({
     // SVG attributes
     const attrs = computed(() => getAttributes(props.size))
 
-    return {
-      cssClass: options.class,
-      href,
-      attrs,
-    }
+    return () =>
+      h(
+        'svg',
+        {
+          role: 'presentation',
+          class: options.class,
+          width: attrs.value.width,
+          height: attrs.value.height,
+          viewBox: attrs.value.viewBox,
+        },
+        h('use', {
+          'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+          // eslint-disable-next-line quote-props
+          href: href.value,
+          'xlink-href': href.value,
+        })
+      )
   },
 })