vite-svg 1.5.0
Install from the command line:
Learn more about npm packages
$ npm install @appsaeed/vite-svg@1.5.0
Install via package.json:
"@appsaeed/vite-svg": "1.5.0"
About this version
Vite SVG plugin: effortless SVG import with support for various formats JSON, raw string, object, etc.
Install with npm
npm i -D vite-svgor Install with yarn
yarn add vite-svgor Install with pnpm
pnpm install vite-svgVite plugin configuration vite.config.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
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
viteSVG({
default: 'json'
})
],
});Extract SVG to a simple object with id attribute
import javascript from './javascript.svg?box'
console.log(javascript)
//output example
{
"id": "",
"viewBox": "0 0 256 256",
"url": "javascript.svg#"
}Extract svg to json with all properties
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": "...."
...
}Extract SVG to raw as string
import javascript from './javascript.svg?raw'
console.log(javascript)
//output example: <svg xmlns="..." xmlns:xlink="..." aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" viewBox="0 0 256 256"><path fill="#F7DF1E" d="..."></path><path d="....."></path></svg>Saeed Hossen
