Incorporate animated SVG directly into Vue templates without using any additional enclosures

Question

Incorporate animated SVG directly into Vue templates without using any additional enclosures

I need to incorporate dynamic SVG code into my <template> without using v-html or any wrapper around it.

The desired end result should look like the following, but template does not support v-html to achieve this. If there is a way to accomplish this result with v-html or any workaround, that would be perfect.

<template>
  <svg>
     
  </svg>
<template>

Here is my current code:

<template>
  <div>
    <span v-html="svgData"></span>
  </div>
</template>

<script setup lang="ts">
  import { computed } from "vue";
  import type { mainIcon } from "tester";
  import { completeDataSet } from "tester";

  const props = defineProps<{
    icon: mainIcon;
  }>();

  const iconPassed = completeDataSet.find((item) => item.name === props.icon);
  const svgData = computed(() => iconPassed?.data);
</script>

Note: The SVG data is returned as a string by a third-party library, so I cannot modify the SVG structure.

Thank you in advance.

javascript typescript vue.js vuejs3

Answer 1

Answer №1

The way in which svgs are stored and retrieved determines the answer to this question. Certain libraries, like @mdi/svg, do not provide the svg file itself but only the path value. In such cases, the path value can be used directly without the need for a wrapper.

<template>
  <svg viewBox="..">
    <path :d="path" />
  </svg>
</template>

On the other hand, if physical svg files are involved, such as when they are stored in src/assets as separate files, they can be loaded and used as components. Below is an example using webpack:

<template>
  <component :is="component" />
</template>

<script>
const iconComponents = {}
const req = require.context('@/assets/', true, /\.svg$/)
req.keys().forEach((filename) => {
  const nameParts = filename.split('/')
  const name = nameParts[nameParts.length - 1].replace(/\.svg$/, '')
  iconComponents[name] = req(filename)
})

export default defineComponent({
  props: {
    iconName: {
      type: String,
      required: true
    }
  }
  computed: {
    component() {
      return iconComponents[this.iconName]
    }
  }
})
</script>

Answer 2

The way in which svgs are stored and retrieved determines the answer to this question. Certain libraries, like @mdi/svg, do not provide the svg file itself but only the path value. In such cases, the path value can be used directly without the need for a wrapper.

<template>
  <svg viewBox="..">
    <path :d="path" />
  </svg>
</template>

On the other hand, if physical svg files are involved, such as when they are stored in src/assets as separate files, they can be loaded and used as components. Below is an example using webpack:

<template>
  <component :is="component" />
</template>

<script>
const iconComponents = {}
const req = require.context('@/assets/', true, /\.svg$/)
req.keys().forEach((filename) => {
  const nameParts = filename.split('/')
  const name = nameParts[nameParts.length - 1].replace(/\.svg$/, '')
  iconComponents[name] = req(filename)
})

export default defineComponent({
  props: {
    iconName: {
      type: String,
      required: true
    }
  }
  computed: {
    component() {
      return iconComponents[this.iconName]
    }
  }
})
</script>

Answer 3

Answer №2

Instead of using the v-html directive, the icon component has the ability to manually replace the contents of an <svg> element with the SVG markup imported from a file:

Start by assigning a template ref to an <svg> element within your component template:

<template>
  <div>
    <svg ref="svgRef"></svg>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const svgRef = ref(null)
</script>

Next, add a watcher that updates the inner HTML of the SVG ref with the corresponding SVG markup based on the value of the icon property. Be sure to await a nextTick to ensure the changes take effect in the DOM:

<script setup>
import { computed, nextTick, watchEffect, ref } from 'vue'
import * as icons from 'simple-icons/icons'

const props = defineProps({ icon: String })
const iconSet = Object.entries(icons)
const svgData = computed(() => iconSet.find(([iconName, icon]) => iconName === props.icon)?.[1].svg)
const svgRef = ref(null)

watchEffect(async () => {
  if (svgRef.value) {
    svgRef.value.innerHTML = svgData.value
    await nextTick()

    ⋮
})
</script>

It is important to retain the existing SVG ref element in the virtual DOM for proper tracking by Vue. If the first child of the SVG ref is another <svg>, replace the contents of that inner <svg> with its children, as the SVG ref itself is already an <svg>. Make sure to copy the inner <svg>'s attributes to the SVG ref before performing the replacement:

<script setup>
⋮

const removeAttributes = (el) => {
  ;[...el.attributes].forEach((attr) => el.removeAttribute(attr.name))
}
const copyAttributes = (fromEl, toEl) => {
  ;[...fromEl.attributes].forEach((attr) => toEl.setAttribute(attr.name, attr.value))
}

watchEffect(async () => {
  if (svgRef.value) {
    ⋮

    const firstChild = svgRef.value.firstChild
    if (firstChild.tagName.toLowerCase() === 'svg') {
      removeAttributes(svgRef.value)
      copyAttributes(firstChild, svgRef.value)

      // swap inner SVG with its children, as the container is already an SVG
      firstChild.replaceWith(...firstChild.children)
    }
  }
})
</script>

check out the demo

Answer 4

Instead of using the v-html directive, the icon component has the ability to manually replace the contents of an <svg> element with the SVG markup imported from a file:

Start by assigning a template ref to an <svg> element within your component template:

<template>
  <div>
    <svg ref="svgRef"></svg>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const svgRef = ref(null)
</script>

Next, add a watcher that updates the inner HTML of the SVG ref with the corresponding SVG markup based on the value of the icon property. Be sure to await a nextTick to ensure the changes take effect in the DOM:

<script setup>
import { computed, nextTick, watchEffect, ref } from 'vue'
import * as icons from 'simple-icons/icons'

const props = defineProps({ icon: String })
const iconSet = Object.entries(icons)
const svgData = computed(() => iconSet.find(([iconName, icon]) => iconName === props.icon)?.[1].svg)
const svgRef = ref(null)

watchEffect(async () => {
  if (svgRef.value) {
    svgRef.value.innerHTML = svgData.value
    await nextTick()

    ⋮
})
</script>

It is important to retain the existing SVG ref element in the virtual DOM for proper tracking by Vue. If the first child of the SVG ref is another <svg>, replace the contents of that inner <svg> with its children, as the SVG ref itself is already an <svg>. Make sure to copy the inner <svg>'s attributes to the SVG ref before performing the replacement:

<script setup>
⋮

const removeAttributes = (el) => {
  ;[...el.attributes].forEach((attr) => el.removeAttribute(attr.name))
}
const copyAttributes = (fromEl, toEl) => {
  ;[...fromEl.attributes].forEach((attr) => toEl.setAttribute(attr.name, attr.value))
}

watchEffect(async () => {
  if (svgRef.value) {
    ⋮

    const firstChild = svgRef.value.firstChild
    if (firstChild.tagName.toLowerCase() === 'svg') {
      removeAttributes(svgRef.value)
      copyAttributes(firstChild, svgRef.value)

      // swap inner SVG with its children, as the container is already an SVG
      firstChild.replaceWith(...firstChild.children)
    }
  }
})
</script>

check out the demo

Incorporate animated SVG directly into Vue templates without using any additional enclosures

Answer №1

Answer №2

Similar questions

Attempting to establish a connection with Redis through the combination of TypeScript and Node.js

The ion-slide-box does not update after the active-slide has been changed using $index

Steps for converting a tsx file into a js file in React

How can I make a div blur as I scroll through the page

Is there a way to adjust the dimensions of Google charts within a Bootstrap tab for a more customized appearance?

The error `Error occurred when rendering: Users' data cannot be mapped` indicates a problem with the rendering process

What could be causing the remove attribute API to not function properly only for the "is" attribute?

Is there a way to activate the final form when submitted?

Executing synchronous animations in Jquery with callback logic

Data loss from AngularJS multipartForm directive when redirecting to different routes

Generate a custom website using React to display multiple copies of a single item dynamically

How can an Angular directive effectively serve as a front-facing interface for interacting with other elements?

A guide on incorporating oAuth 2.0 into Tizen

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Choosing particular contenteditable divisions using jQuery

Troubleshooting TypeScript errors in a personalized Material UI 5 theme

Utilizing Angular 2 for Integration of Google Calendar API

Utilizing web components in React by solely relying on a CDN for integration

I am experiencing issues with my buttons not functioning properly after implementing the fetch API in conjunction with express.js

experimenting with implementing CSS transitions in VueJS