Iconify.renderSVG is not a function

[dnldsht]

The first time I start a nuxt project I get this error, after one or more hot reloads it get fixed.

import Iconify from '@purge-icons/generated'

When the error occurs Iconify is an empty object.

This is my Icon component:

<template>
  <div ref="el" :class="$attrs.class" style="vertical-align: text-bottom" />
</template>

<script lang="js">
import Iconify from '@purge-icons/generated'

export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
  watch: {
    icon: {
      handler() {
        this.update()
      },
      immediate: true,
    },
  },
  methods: {
    update() {
      this.$nextTick(async() => {
        const el = this.$refs.el
        if (el) {
          // console.log(Iconify);
          const svg = Iconify.renderSVG(this.icon, {})
          if (svg) {
            el.textContent = ''
            el.appendChild(svg)
          }
          else {
            const span = document.createElement('span')
            span.className = 'iconify'
            span.dataset.icon = this.icon
            el.textContent = ''
            el.appendChild(span)
          }
        }
      })
    },
  },
}
</script>

I've only added this to nuxt.config.js

buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    'nuxt-purge-icons-module'
  ],

Here you can find a repo with the issue that only has nuxt, vuetify and purge icons

[antfu]

I am not very sure why but as a workaround, you can do this and it will work the same:

<script lang="js">
import Iconify from '@iconify/iconify'
import '@purge-icons/generated'