Skip to content

Commit

Permalink
fix: ♻️ use render function
Browse files Browse the repository at this point in the history
to avoid runtime template compilation
  • Loading branch information
thierrymichel committed Nov 16, 2020
1 parent 3f6b0c2 commit 6543e3d
Showing 1 changed file with 18 additions and 19 deletions.
37 changes: 18 additions & 19 deletions src/component.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
import { App, defineComponent, computed } from 'vue'
import { App, computed, defineComponent, h } from 'vue'
import { SvgSpriteOptions, SvgSpritePluginOptions } from './defs'
import { getAttributes, getHref } from './utils'

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,
Expand Down Expand Up @@ -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,
})
)
},
})

Expand Down

0 comments on commit 6543e3d

Please sign in to comment.