Icon field

The icon field is used to display an icon component from the icons directory in the project's root.

Examples

First, add some SVG icons to the icons directory:

# icons/Moon.vue

<template>
  <svg
    fill="none"
    height="24"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    width="24"
    xmlns="http://www.w3.org/2000/svg"
    class="icon icon-tabler icon-tabler-moon"
  >
    <path d="M0 0h24v24H0z" fill="none" stroke="none" />
    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
  </svg>
</template>

Here's an example of using the icon field in a block:

# blocks/IconBox.vue

<template>
  <div>
    <PruviousIcon :icon="icon" class="h-6 w-6 text-blue-700" />
    ...
  </div>
</template>

<script lang="ts" setup>
import { iconField } from '#pruvious'

defineProps({
  icon: iconField({
    required: true,
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    icon: {
      type: 'icon',
      options: {
        required: true,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the icon field: