render clear svg icon nuxt

I need your help. i have taken the nuxt module nuxt-icons as my base module
I’m trying to customize it for me. Note that this module wraps SVG in span and other elements.
I want to get rid of it. But I am not so familiar with nuxt framework and I need your help. I don’t understand how, not to wrap SVG in a wrapper over svg. but to give a pure icon without div/span/i stuff.
I tried to use but it wraps the svg in <component> <svg..><component> I need to get a clean svg.
I’d actually like to add one rule here, to wrap svg or not to wrap svg and leave it clean. Note my code below.

<template>
  <component
    :is="wrapTag"
    class="nuxt-icon"
    :class="{ 'nuxt-icon--fill': !filled, 'nuxt-icon--stroke': hasStroke && !filled }"
    v-html="icon"
  />
</template>

<script setup lang="ts">
  import { ref, watchEffect } from '#imports'

  const props = withDefaults(defineProps<{
    name: string;
    filled?: boolean;
    wrapTag: string;
  }>(), { filled: false, wrapTag: '' })
  const icon = ref<string | Record<string, any>>('')
  let hasStroke = false

  async function getIcon () {
    try {
      const iconsImport = import.meta.glob('assets/icons/**/**.svg', {
        as: 'raw',
        eager: false
      })
      const rawIcon = await iconsImport[`/assets/icons/${props.name}.svg`]()
      if (rawIcon.includes('stroke')) { hasStroke = true }
      icon.value = rawIcon
    } catch {
      console.error(
        `[nuxt-icons] Icon '${props.name}' doesn't exist in 'assets/icons'`
      )
    }
  }

  await getIcon()

  watchEffect(getIcon)
</script>
<style>
  .nuxt-icon svg {
    width: 1em;
    height: 1em;
    margin-bottom: 0.125em;
    vertical-align: middle;
  }

  .nuxt-icon.nuxt-icon--fill,
  .nuxt-icon.nuxt-icon--fill * {
    fill: currentColor !important;
  }

  .nuxt-icon.nuxt-icon--stroke,
  .nuxt-icon.nuxt-icon--stroke * {
    stroke: currentColor !important;
  }
</style>

what I’m trying to accomplish:
If I don’t specify a wrapper tag in the module call then, I get a pure svg example: <NuxtIcon name="arrow" -- <svg>...</svg>
and if you did, then this: <NuxtIcon name="arrow" wrapTag="span" -- <span><svg>...</svg></span>

Leave a Comment