Icons and Images

Nuxt Icon & Nuxt UI

Nuxt OG Image supports both Nuxt Icon Icon's component and Nuxt UI's UIcon component.

<template>
  <div>
    <Icon name="carbon:bot" mode="svg" />
  </div>
</template>

<template>
  <div>
    <UIcon name="i-carbon-bot" mode="svg" />
  </div>
</template>

It's important that the mode is set to svg to ensure the module renders the icon correctly.

Tips

Image resolution: image paths must be either relative to the public directory or absolute. It's not possible to bundle images as part of your template.

Provide Width / Height

When you don't set dimensions, the module uses the package image-size to determine the best dimensions for your image.

However, this can be slow and provide incorrect results.

Therefore it's always recommended to provide a width and height when using images.

Likewise when using a background image, make sure the container has set dimensions.

Base64 images Are Quickest

If you're having issues with performance and images, it's recommended to use base64 images.

This will save render time as it won't need to fetch the image. See the Performance guide for more tips.

Avoid Inlining SVGs

Prefer rendering SVGs instead of inlining them within img tags.

<!-- ❌ -->
<img src="data:image/svg+xml;base64,..." />
<!-- ✅ -->
<svg>
  <rect width="24" height="24" />
</svg>