https://github.com/mcansh/vite-plugin-svg-sprite

this vite plugin will transform any imported svg files and combine them into a cachable svg sprite sheet
https://github.com/mcansh/vite-plugin-svg-sprite

svg-sprites vite vite-plugin vitejs

Last synced: 17 days ago
JSON representation

this vite plugin will transform any imported svg files and combine them into a cachable svg sprite sheet

• Host: GitHub
• URL: https://github.com/mcansh/vite-plugin-svg-sprite
• Owner: mcansh
• Created: 2024-04-02T03:29:21.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-20T18:58:05.000Z (7 months ago)
• Last Synced: 2024-05-02T05:56:52.719Z (6 months ago)
• Topics: svg-sprites, vite, vite-plugin, vitejs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@mcansh/vite-svg-sprite-plugin
• Size: 279 KB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - mcansh/vite-plugin-svg-sprite - this vite plugin will transform any imported svg files and combine them into a cachable svg sprite sheet (JavaScript)

README

        
# @mcansh/vite-plugin-svg-sprite

this vite plugin will transform any imported svg files and combine them into an svg sprite sheet

## installation and set up

```sh

npm i -D @mcansh/vite-svg-sprite-plugin

```

this is an example using Remix, but this plugin works with any vite configuration

```ts

import { svgSprite } from "@mcansh/vite-plugin-svg-sprite";

import { vitePlugin as remix } from "@remix-run/dev";

import { defineConfig } from "vite";

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({

  plugins: [remix(), tsconfigPaths(), svgSprite()],

});

```

you can configure the generated sprite file name as well as the generated symbol id pattern

```ts

import { DEFAULT_COPY_ATTRS, svgSprite } from "@mcansh/vite-plugin-svg-sprite";

svgSprite({

  spriteOutputName: "sprite.svg",

  symbolId: "icon-[name]-[hash]",

  svgstoreOptions: {

    copyAttrs: [

      ...DEFAULT_COPY_ATTRS,

      // any additional attributes you want to copy from the svg to the symbol

    ],

  },

});

```

## usage

```tsx

import spriteUrl from "virtual:@mcansh/vite-plugin-svg-sprite";

import linkIconHref from "@primer/octicons/build/svg/link-16.svg";

import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => {

  return [

    { rel: "preload", as: "image", href: spriteUrl, type: "image/svg+xml" },

  ];

};

export default function Component() {

  return (

    

      

    

  );

}

```