How to Use SVG in VitePress
VitePress's Vue and Vite foundation gives you both Vue component imports and direct Markdown embedding options for SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Vue Component and Vite-Based Imports
Since VitePress runs on Vite, standard Vite SVG plugins (`vite-plugin-svg-icons` or similar) work for importing SVGs as Vue components within custom theme components or `.vue` files used in your documentation, following the same patterns as any Vite-powered Vue project.
- Standard Vite SVG plugins work within VitePress's build system
- Custom theme components can import and use SVG as Vue components
- Follows familiar Vite + Vue conventions VitePress builds upon
Inline SVG in Markdown Content
VitePress's Markdown supports embedded Vue components and raw HTML, so inline `<svg>` markup works directly within `.md` documentation files for simple diagrams, while more complex reusable icons are better handled as imported Vue components referenced via VitePress's Markdown-to-component bridge.
- Raw inline SVG markup works directly in VitePress Markdown files
- Complex reusable icons are better handled as imported Vue components
- VitePress bridges Markdown content with full Vue component usage
Frequently Asked Questions
Does VitePress require any extra config for SVG component imports?
Typically you'll add a Vite SVG plugin to vite.config.ts (or the VitePress-specific config location) the same way you would in any Vite project — VitePress doesn't require anything beyond standard Vite plugin setup.
Can I use custom icon components in my VitePress site's navbar?
Yes — VitePress's theme configuration supports custom Vue components in various UI slots, letting you use imported SVG icon components for navbar or sidebar customization.
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