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 2 months 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 (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-31T08:23:03.000Z (about 2 months ago)
• Last Synced: 2024-07-31T09:44:17.507Z (about 2 months ago)
• Topics: angular, icon, icons, plugin, react, spritesheet, vite, vitejs, vue
• Language: TypeScript
• Homepage:
• Size: 533 KB
• Stars: 76
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.MD

Awesome Lists containing this project

• fucking-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)
• 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

        
![GitHub Repo stars](https://img.shields.io/github/stars/forge42dev/vite-plugin-icons-spritesheet?style=social)

![npm](https://img.shields.io/npm/v/vite-plugin-icons-spritesheet?style=plastic)

![GitHub](https://img.shields.io/github/license/forge42dev/vite-plugin-icons-spritesheet?style=plastic)

![npm](https://img.shields.io/npm/dy/vite-plugin-icons-spritesheet?style=plastic) 

![npm](https://img.shields.io/npm/dw/vite-plugin-icons-spritesheet?style=plastic) 

![GitHub top language](https://img.shields.io/github/languages/top/forge42dev/vite-plugin-icons-spritesheet?style=plastic) 

# 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 { iconsSpritesheet } from 'vite-plugin-icons-spritesheet';

export default {

  plugins: [

     iconsSpritesheet({

      // 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",

      // Output path for the generated type file, defaults to types.ts in outputDir

      typesOutputFile: "app/icons.ts",

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

      fileName: "icon.svg",

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

      cwd: process.cwd(),

      // Callback function that is called when the script is generating the icon name

      // This is useful if you want to modify the icon name before it is written to the file

      iconNameTransformer: (iconName) => iconName

    }),

  ],

};

```

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

```