is this the recommended way to use heroicons in nuxt 3?

<template>
    <div>
        <HeadlessTransitionRoot as="template" :show="sidebarOpen">
            <HeadlessDialog as="div" class="relative z-50 lg:hidden" @close="sidebarOpen = false">
                <HeadlessTransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
                    enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
                    leave-to="opacity-0">
                    <div class="fixed inset-0 bg-gray-900/80" />
                </HeadlessTransitionChild>

                <div class="fixed inset-0 flex">
                    <HeadlessTransitionChild as="template" enter="transition ease-in-out duration-300 transform"
                        enter-from="-translate-x-full" enter-to="translate-x-0"
                        leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
                        leave-to="-translate-x-full">
                        <HeadlessDialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
                            <HeadlessTransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
                                enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
                                leave-to="opacity-0">
                                <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
                                    <button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
                                        <span class="sr-only">Close sidebar</span>
                                        <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
                                    </button>
                                </div>
                            </HeadlessTransitionChild>
                            <div
                                class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
                                <div class="flex h-16 shrink-0 items-center">
                                    <img class="h-8 w-auto" src="/img/logo.png" alt="Your Company" />
                                    <span class="ml-2 text-white font-semibold text-lg tracking-wider">qtxr</span>
                                </div>
                                <nav class="flex flex-1 flex-col">
                                 