nuxt-spritesmith

A Nuxt(3) module for generate sprite image icons via spritesmith

• ✨  Release Notes

Features

• Powered by spritesmith.
• Support Multi sprite sheet generation.

Quick Setup

1. Add nuxt-spritesmith dependency to your project

# 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

export default defineNuxtConfig({
  modules: [
    'nuxt-spritesmith'
  ],
  // custom nuxt-spritesmith options
  spritesmith: {
    // ...
  }
})

3. Put your icons in ~/assets/sprites folder.

4. Using your sprite icon.

<template>
  <div>
     <span class="sprite-some sprite-some--your-icon-name"></span>
  </div>
</template>

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

# 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