Vite Plugin Heroicons

Vite plugin that collects Heroicons <use href="#heroicons-*/*"> references, injects a shared SVG sprite into HTML, and emits heroicons.svg at build time.

import heroicons from '@newlogic-digital/vite-plugin-heroicons'

export default {
  plugins: [
    heroicons()
  ]
}

Options

• fileName (string, default: "heroicons.svg"): emitted asset file name.
• className (string, default: "hidden"): class on generated sprite <svg>.
• content (string | string[]): additional build-only root-relative file paths or glob patterns scanned with ripgrep before heroicons.svg is emitted. This affects the emitted sprite only, not HTML injection.
• inject (boolean, default: true): inject sprite into transformed HTML via transformIndexHtml.
• injectExclude (string | RegExp | Array<string | RegExp>, default: /\.json\.[^.]+\.html$/i): skip sprite injection for matching HTML output paths. By default this targets JSON endpoints rendered through a template extension such as basic.json.latte.html, while still allowing normal HTML pages like basic.json.html.
• iconSets (Record<string, string | string[]>): icon prefix to directory mapping. When you pass an array, the plugin searches directories in order and uses the first matching icon.

heroicons({
  content: ['templates/**/*.{latte,twig}'],
  injectExclude: [/\.json\.[^.]+\.html$/i, /\.modal\./i],
  iconSets: {
    'simpleicons-solid': ['src/icons/simpleicons', 'other-path'],
    'icons-solid': 'src/icons/solid',
    'icons-outline': 'src/icons/outline',
  },
})

When using content, ripgrep must be installed and available as rg in your PATH.

Requirements

• Node.js LTS (20.x)
• Vite 8+

Breaking changes

• Plugin uses default export only.
• spriteClass was renamed to className.
• injectToHtml was renamed to inject.
• warnOnMissing was removed.