# vite-plugin-svg-mix

> Vite SVG Sprite 插件，不限制语言，React/Vue都可使用

Latest version **0.3.1** (published 2022-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-svg-mix
pnpm add vite-plugin-svg-mix
yarn add vite-plugin-svg-mix
bun add vite-plugin-svg-mix
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2022-10-25 |
| First published | 2022-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^14.18.0 \|\| >=16.0.0 |
| Dependencies | 3 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Drex |
| Maintainers | idrex |
| Keywords | vite, vite-plugin, svg, sprite, svgo |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-svg-mix
- Homepage: https://github.com/idrex/vite-plugin-svg-mix
- npm.io page: https://npm.io/package/vite-plugin-svg-mix

## Dependencies (3)

- [svgo](https://npm.io/package/svgo.md) ^2.8.0
- [svg-parser](https://npm.io/package/svg-parser.md) ^2.0.4
- [svg-sprite](https://npm.io/package/svg-sprite.md) ^2.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2022-10-25
- 0.3.0 — 2022-10-25
- 0.2.0 — 2022-10-25
- 0.1.0 — 2022-10-24

## README

# Vite-Plugin-Svg-Mix

Vite SVG Sprite 插件，不限制语言，React/Vue都可使用

通过 `svgo` 进行优化，`svg-parser`调整结构，`svg-sprite` 进行生成

# 使用方法

- 安装依赖

```bash
$ pnpm add vite-plugin-svg-mix -D
```

- `vite.config.ts` 中的配置插件

```js
import svgMix from 'vite-plugin-svg-mix'
import { resolve } from 'path'

export default () => {
  return {
    ...,
    plugins: [
      ...,
      svgMix({
        include: resolve(process.cwd(), 'src/assets/icons'),
        injectTo: 'body',
        prefix: 'icon',
      }),
    ],
  }
}
```

- 代码中引用

```html
<style>
  .icon {
    display: inline-block;
    width: 4em;
    height: 4em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }
</style>
<svg class="icon" viewBox="0 0 32 32">
  <use xlink:href="#icon-close"></use>
</svg>
```

---
_Source: https://npm.io/package/vite-plugin-svg-mix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._