https://github.com/appsaeed/vite-svg

Vite SVG plugin: effortless SVG import with support for various formats (JSON, raw string, object, etc.).
https://github.com/appsaeed/vite-svg

extract-svg-viewbox npm-package svg svg-icons svg-to-json svg-to-raw svg-to-string vite-loader vite-plugin vite-svg

Last synced: 12 days ago
JSON representation

Vite SVG plugin: effortless SVG import with support for various formats (JSON, raw string, object, etc.).

• Host: GitHub
• URL: https://github.com/appsaeed/vite-svg
• Owner: appsaeed
• License: mit
• Created: 2024-04-29T18:17:27.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-22T15:06:18.000Z (8 months ago)
• Last Synced: 2024-11-12T09:13:04.119Z (2 months ago)
• Topics: extract-svg-viewbox, npm-package, svg, svg-icons, svg-to-json, svg-to-raw, svg-to-string, vite-loader, vite-plugin, vite-svg
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-svg
• Size: 15.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Intro

Vite SVG plugin: effortless SVG import with support for various formats JSON, raw string, object, etc.

## Installation

Install with [npm](https://www.npmjs.com/)

```sh

npm i -D vite-svg

```

or Install with [yarn](https://www.npmjs.com/package/yarn)

```sh

yarn add vite-svg

```

or Install with [pnpm](https://www.npmjs.com/package/pnpm)

```sh

pnpm install 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: 

````

## Author

**Saeed Hossen**

-   [Website](https://appsaeed.github.io)

-   [Linkden](https://www.linkedin.com/in/appsaeed)

-   [Email]([email protected])

## License

[MIT](LICENSE)