https://github.com/yisibell/nuxt-spritesmith
A Nuxt(3) module for generate sprite image icons via spritesmith
https://github.com/yisibell/nuxt-spritesmith
nuxt nuxt3 sprite-icon sprite-image spritesheet spritesmith
Last synced: 3 months ago
JSON representation
A Nuxt(3) module for generate sprite image icons via spritesmith
- Host: GitHub
- URL: https://github.com/yisibell/nuxt-spritesmith
- Owner: yisibell
- License: mit
- Created: 2025-03-25T11:20:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-25T10:05:36.000Z (about 1 year ago)
- Last Synced: 2025-04-25T10:43:04.899Z (about 1 year ago)
- Topics: nuxt, nuxt3, sprite-icon, sprite-image, spritesheet, spritesmith
- Language: TypeScript
- Homepage:
- Size: 2.61 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-spritesmith
> A Nuxt(3) module for generate sprite image icons via [spritesmith](https://github.com/twolfson/spritesmith)
- [✨ Release Notes](/CHANGELOG.md)
## Features
- Powered by [spritesmith](https://github.com/twolfson/spritesmith).
- Support Multi sprite sheet generation.
## Quick Setup
1. Add `nuxt-spritesmith` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-spritesmith
# Using yarn
yarn add --dev nuxt-spritesmith
# Using npm
npm install --save-dev nuxt-spritesmith
```
2. Add `nuxt-spritesmith` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-spritesmith'
],
// custom nuxt-spritesmith options
spritesmith: {
// ...
}
})
```
3. Put your icons in `~/assets/sprites` folder.
4. Using your sprite icon.
``` vue
```
That's it! You can now use **nuxt-spritesmith** in your Nuxt app ✨
## Options
| Key | Default value | Description |
| :---: | :---: | :---: |
| `srcDir`| `assets/sprites` | Sprite image source dir |
| `outputDir` | `public/sprites` | Sprite sheet output dir |
| `spriteConfig` | - | Spritesmith generate CSS options |
| `retina` | - | Config for retina |
| `prefix` | `'sprite-'` | Define sprite icon class name prefix |
| `cssTemplate` | - | Custom css template |
| `enableDevWatch` | - | Whether to enable watcher for the development env |
## Development
```bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
pnpm test:watch
# Release new version
npm run release
```