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>