https://github.com/forge42dev/vite-plugin-icons-spritesheet

Vite plugin that listens to an icon folder and outputs a spritesheet with optional types to specified location
https://github.com/forge42dev/vite-plugin-icons-spritesheet

angular icon icons plugin react spritesheet vite vitejs vue

Last synced: about 1 month ago
JSON representation

Vite plugin that listens to an icon folder and outputs a spritesheet with optional types to specified location

• Host: GitHub
• URL: https://github.com/forge42dev/vite-plugin-icons-spritesheet
• Owner: forge42dev
• License: mit
• Created: 2024-04-27T17:02:41.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-05-12T10:53:54.000Z (about 1 month ago)
• Last Synced: 2024-05-13T10:58:03.610Z (about 1 month ago)
• Topics: angular, icon, icons, plugin, react, spritesheet, vite, vitejs, vue
• Language: TypeScript
• Homepage:
• Size: 258 KB
• Stars: 30
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.MD

Lists

• awesome-vite - vite-plugin-icons-spritesheet - Generate a spritesheet and TypeScript types from SVG icons by listening to the icons folder changes. (Plugins / Framework-agnostic Plugins)

README

        
# vite-plugin-icons-spritesheet

A Vite plugin to generate a spritesheet with icons from a directory, re-runs on every edit/delete/add to the directory that is being watched.

Optionally generates TypeScript types for the icon names that it outputs.

If you want to learn more about this approach and it's benefits 

check it out here:

https://www.jacobparis.com/content/svg-icons

## Installation

```bash

npm install -D vite-plugin-icons-spritesheet

```

## Usage

```javascript

// vite.config.js

import { iconSpritesheet } from 'vite-plugin-icons-spritesheet';

export default {

  plugins: [

     iconSpritesheet({

      // Defaults to false, should it generate TS types for you

      withTypes: true,

      // The path to the icon directory

      inputDir: "icons",

      // Output path for the generated spritesheet and types

      outputDir: "public/icons",

      // The name of the generated spritesheet, defaults to sprite.svg

      fileName: "icon.svg",

      // The cwd, defaults to process.cwd()

      cwd: process.cwd(),

    }),

  ],

};

```

Example component file:

```jsx

import spriteHref from "~/path/sprite.svg"

import type { SVGProps } from "react"

import type { IconName } from "~/path/types.ts"

export function Icon({

  name,

  ...props

}: SVGProps & {

  name: IconName

}) {

  return (

    

      

    

  )

}

```

Component usage:

```jsx

```