How to Use SVG in Nuxt — Import, Inline, and Component SVG
Use SVG in Nuxt.js — import as Vue components with nuxt-svgo, inline in templates, optimize with SVGO, and serve crisp icons in your Nuxt application.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Import in Nuxt with nuxt-svgo
The `nuxt-svgo` module (Nuxt 3+) transforms SVG files into Vue components on import. Install with `npm install nuxt-svgo`, add to modules in nuxt.config.ts, then import SVG files directly in Vue components. Each SVG becomes a reactive Vue component that accepts props and emits events.
- Install: `npm install nuxt-svgo`
- Config: add 'nuxt-svgo' to modules in nuxt.config.ts
- Usage: `import IconCheck from '~/assets/icons/check.svg'` then `<IconCheck />`
Inline SVG in Nuxt Vue Templates
For maximum control, paste SVG code directly into Vue component templates. Wrap in a `<template>` or a container `<div>`. This approach allows binding Vue reactive data to SVG attributes — color fill from a prop, animation triggered by emits, or dynamic path data computed from store state.
- Paste SVG directly in `<template>` of a Vue SFC
- Bind props: `:fill="color"` on SVG path elements
- Dynamic animation: `:class` bindings on SVG elements for CSS transitions
Frequently Asked Questions
How do I use an SVG sprite in Nuxt for icon performance?
Create a sprite SVG file with all icons as `<symbol id='icon-name'>` elements. Place it in /public/icons.svg. In Vue components, reference icons with `<use href='/icons.svg#icon-name' />`. This loads one file, caches it, and renders any icon without re-fetching.
What's the best way to type SVG component props in Nuxt with TypeScript?
Define SVG component props with TypeScript interfaces: `const props = defineProps<{ color?: string; size?: number }>()`. Bind size as `:width='props.size' :height='props.size'` on the SVG root element. This gives full TypeScript type checking for SVG component usage across the Nuxt app.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG