Icons and Images
Nuxt Icon & NUxt UI
Nuxt OG Image supports both Nuxt Icon
<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
Image Resolution
Image paths must be either relative to the
Tips
Provide Width / Height
When no dimensions are set, the package
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.
Avoid Inlining SVGs
Prefer rendering SVGs instead of inlining them within
<!-- ❌ -->
<img src="data:image/svg+xml;base64,..." />
<!-- ✅ -->
<svg>
<rect width="24" height="24" />
</svg>