CODEWITHSUNDEEP
vue.jsimportnuxt.js
drake035
drake035

Reputation: 2877

Dynamically importing SVGs with nuxtjs/svg

Using nuxtjs/svg package, I'm conditionally rendering inline SVGs thus:

<ArrowRight v-if="condition" />
<ExternalLink v-else />

Script:

import ArrowRight from '~/assets/img/arrow-right.svg?inline'
import ExternalLink from '~/assets/img/external-link.svg?inline'

export default {
  components: {
    ArrowRight,
    ExternalLink
  }
}

I'd like to make these imports dynamically, but I don't know how in this case partly because of the necessity of the "?inline" part when importing the SVG.

Any idea as to how I can import the SVGs dynamically?

Upvotes: 0

Views: 2062

Answers (3)

melihperveli
melihperveli

Reputation: 11

try doing this, watch out for the "/_nuxt/assets" extension.

 <td v-if="actions" class="px-4 flex flex-row py-2 justify-end">
              <span v-for="action in actions" :key="action.key">
                <NuxtLink :to="action.to + '/' + item['actions']">
                  <a>
                    <img class="pl-2 pr-2" 
           :src="`/_nuxt/assets/images/dataTableIcons/${action.value}.svg`"
                      :alt="action.value">
                  </a>
                </NuxtLink>
              </span>
            </td>

Upvotes: 0

TeNNoX
TeNNoX

Reputation: 2075

(copied from nuxt svg module readme)

To dynamically import an SVG, you can use the inline require() syntax.

<template>
  <div v-html="require(`../assets/${name}.svg?raw`)" />
</template>

<script>
  export default {
    props: {
      name: { type: String, default: "image" },
    },
  };
</script>

To render an SVG without wrapper element and the use of v-html, a combination of dynamic components and ?inline can be used.

<template>
  <component :is="require(`../assets/${name}.svg?inline`)" />
</template>

<script>
  export default {
    props: {
      name: { type: String, default: "image" },
    },
  };
</script>

Upvotes: 1

chrs
chrs

Reputation: 199

<template>
  <div v-html="require(`~/assets/img/${image}.svg?raw`)"/>
</template>
<script>
export default {
  computed: {
    image() {
      return condition ? 'arrow-right' : 'external-link'
    }
  }
}
</script>

That's one way by using SVGs as raw. But the idea should be clear ;-)

Upvotes: 2

Related Questions