https://github.com/knpwrs/vite-plugin-svg-sprite-components

Create svg sprite sheets from imported svg files and get usable components for many popular frontend frameworks.
https://github.com/knpwrs/vite-plugin-svg-sprite-components

Last synced: 1 day ago
JSON representation

Create svg sprite sheets from imported svg files and get usable components for many popular frontend frameworks.

• Host: GitHub
• URL: https://github.com/knpwrs/vite-plugin-svg-sprite-components
• Owner: knpwrs
• License: unlicense
• Created: 2023-12-06T03:43:31.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-13T02:29:12.000Z (11 months ago)
• Last Synced: 2024-11-08T09:45:36.495Z (7 days ago)
• Language: TypeScript
• Size: 230 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite-plugin-sprite-components-{core,preact,react,solid}

A vite plugin to generate sprite sheets from imported svg files. The imported svg files are transformed into components which can be used in the frontend framework of your choice. For example:

```tsx

import Icon from './icon.svg?sprite-react';

export function App() {

  return (

    

      

    

  );

}

```

`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 the following examples for specific frameworks, all with TypeScript support:

- [`./examples/react`](./examples/react)

- [`./examples/preact`](./examples/preact)

- [`./examples/solid`](./examples/solid)

- [`./examples/html`](./examples/html)

If your build uses multiple frontend frameworks (e.g., an Astro project with multiple islands), you can set up this plugin to generate components for all of them, and they will all reference the same sprite sheet. See [./examples/multi](./examples/multi) for a working example.

# Release Process

- Run `pnpm changeset`

- Run `pnpm changeset version`

- Run `pnpm install`

- Commit the changes

- Run `pnpm publish -r`