# vite-plugin-svg-sprite-components-solid

> Create svg sprite sheets from imported svg files and get usable Solid.js components.

Latest version **1.0.0** (published 2023-12-13) · UNLICENSE license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-svg-sprite-components-solid
pnpm add vite-plugin-svg-sprite-components-solid
yarn add vite-plugin-svg-sprite-components-solid
bun add vite-plugin-svg-sprite-components-solid
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-12-13 |
| First published | 2023-12-13 |
| Weekly downloads | 0 |
| License | UNLICENSE |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 5.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ken Powers |
| Maintainers | knpwrs |
| Keywords | vite-plugin, svg, sprites |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-svg-sprite-components-solid
- Repository: https://github.com/knpwrs/vite-plugin-svg-sprite-components
- Homepage: https://github.com/knpwrs/vite-plugin-svg-sprite-components/
- Issues: https://github.com/knpwrs/vite-plugin-svg-sprite-components/issues
- npm.io page: https://npm.io/package/vite-plugin-svg-sprite-components-solid

## Dependencies (3)

- [solid-js](https://npm.io/package/solid-js.md) ^1.8.7
- [proper-tags](https://npm.io/package/proper-tags.md) ^2.0.2
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.3.1

## 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

- 1.0.0 (latest) — 2023-12-13

## README

# vite-plugin-sprite-components-solid

A vite plugin to generate sprite sheets from imported svg files. The imported svg files are transformed into Solid components. For example:

```tsx
import Icon from './icon.svg?sprite-solid';

export function App() {
  return (
    <nav>
      <Icon />
    </nav>
  );
}
```

`icon.svg` is packed into a sprite sheet in your build output, and the `Icon` component renders an inline svg that references said sprite sheet. The `Icon` component also has properly defined TypeScript types. See [`../../examples/solid`](../../examples/solid) for a complete working example.

## Quick Start:

`vite.config.ts`:

```ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import spritesPlugin from 'vite-plugin-svg-sprite-components-solid';

export default defineConfig({
  plugins: [solidPlugin(), spritesPlugin()],
});
```

`tsconfig.json`:

```json
{
  "compilerOptions": {
    "types": ["vite-plugin-svg-sprite-components-solid/client"]
  }
}
```

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