<template>
    <div>
        <Head>
            <Title>Vue Icon Library - PrimeVue</Title>
            <Meta name="description" content="PrimeVue components can be used with any icon library using the templating features." />
        </Head>

        <div class="doc">
            <div class="doc-main">
                <div class="doc-intro">
                    <h1>Custom Icons</h1>
                    <p>PrimeVue components can be used with any icon library using the templating features.</p>
                </div>
                <DocSections :docs="docs" />
            </div>
            <DocSectionNav :docs="docs" />
        </div>
    </div>
</template>

<script setup>
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
import ImageDoc from '@/doc/icons/ImageDoc.vue';
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
import SVGDoc from '@/doc/icons/SVGDoc.vue';
import VideoDoc from '@/doc/icons/VideoDoc.vue';
import { ref } from 'vue';

const docs = ref([
    {
        id: 'material',
        label: 'Material',
        component: MaterialDoc
    },
    {
        id: 'fontawesome',
        label: 'FontAwesome',
        component: FontAwesomeDoc
    },
    {
        id: 'svg',
        label: 'SVG',
        component: SVGDoc
    },
    {
        id: 'image',
        label: 'Image',
        component: ImageDoc
    },
    {
        id: 'video',
        label: 'Video Tutorial',
        component: VideoDoc
    }
]);
</script>
