Introduction

The vite-svg plugin extracts SVG files into multiple formats — JSON, string, and object — for easier integration within Vite projects.

Installation

``sh
npm i -D vite-svg
`

Usage

Vite plugin configuration
vite.config.js
``js
import { defineConfig } from 'vite';
import viteSVG from 'vite-svg';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
viteSVG({default: 'raw'})
],
});
``
Extract default options in box and now pass JSON
``js
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
viteSVG({
default: 'json'
})
],
});
``

SVG to object

Extract SVG to a simple object with id attribute
`js
import javascript from './javascript.svg?box'

console.log(javascript)
//output example
{
"id": "",
"viewBox": "0 0 256 256",
"url": "javascript.svg#"
}
`


SVG to json


Extract svg to json with all properties
``js
import javascript from './javascript.svg?json'

console.log(javascript)
//output example
{
"xmlns": "...",
"xmlns:xlink": "...",
"aria-hidden": "true",
"role": "img",
"class": "iconify iconify--logos",
"width": "32",
"height": "32",
"preserveAspectRatio": "xMidYMid meet",
"viewBox": "0 0 256 256",
"fill": "#F7DF1E",
"d": "...."
...
}
``

SVG to raw


Extract SVG to raw as string
``js
import javascript from './javascript.svg?raw'

console.log(javascript)

//output example:
```

License

MIT