## Generate Vite spritemap plugin

This plugin is written based on the plugin svg-sprite (https://github.com/svg-sprite/svg-sprite).

## Features

* Quick sprite assembly.
* A large number of settings from the svg-sprite plugin
* Caching to speed up sprite assembly

## Installation

```sh
# with npm
npm install --save-dev vite-svg-spritemap

# with yarn
yarn add --dev vite-svg-spritemap

# with pnpm
pnpm add -D vite-svg-spritemap
```

## vite.config.ts (minimal options)

```ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteSvgSpritePlugin from 'vite-svg-spritemap'

export default defineConfig({
    plugins: [vue(), ViteSvgSpritePlugin({
        svgPath: 'src/svg/'
    })]
})

```

## main.ts (minimal)

add `import 'virtual:svg-icons-sprite-register'` into your main.ts file

```ts
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'

import 'virtual:svg-icons-sprite-register';

createApp(App).mount('#app')

```

All plugin settings are suitable from the webpack version, follow the link https://github.com/svg-sprite/svg-sprite (
shape, svg, variables)

```ts
interface SvgSpriteOptions {
    svgPath: string;
    shape?: sprite.Shape;
    svg?: sprite.Svg;
    variables?: any;
}
```

## Playground:

Examples of using the plugin are located in the "example" folder.

### Vite vue example

```sh
cd example
yarn install
yarn dev | yarn build
```
#### **Icons Directory Structure**

```bash
# src/svg
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
```
## Way to use

```html

<svg class="svg-1">
    <use :href="`spritemap.svg#stats-svgrepo-com`"></use>
</svg>

<svg class="svg-1">
    <use v-bind="{'xlink:href': `spritemap.svg#stats-svgrepo-com`}"></use>
</svg>

<svg class="svg-1">
    <use :href="symbolId"></use>
</svg>

<script>
    const symbolId = computed(() => `#${prefix}-${name}`)
</script>

- As a result, we will get:

<svg class="svg-1" data-v-fb1907ff="">
    <use href="spritemap.dee3b8.svg#stats-svgrepo-com"></use>
</svg>

- !!! If you include file direct like:

<svg class="svg-1">
    <use href="spritemap.svg#stats-svgrepo-com"></use>
</svg>

- you get error when build your app.
- as if vite can't find the created asset...
```

## Credits

I express my great gratitude to the author of the plugin svg-sprite (https://github.com/svg-sprite/svg-sprite).

## My other plugins

- [vite-esbuild-typescript-checker](https://www.npmjs.com/package/vite-esbuild-typescript-checker) - Type checker (
  TypeScript, Vue SFC, etc.) based on the webpack plugin.

## License

MIT License