npmpackage.info

Gathering detailed insights and metrics for svg-sprite-plugin-vite

Other packages similar to svg-sprite-plugin-vite

vite-plugin-svg-icons

2.0.1

Vite Plugin for fast creating SVG sprites.

vite-plugin-svg-icons-ng

1.4.1

Vite plugin for easily creating an SVG sprite and injecting it for use, with a brand-new version.

vite-plugin-svg-sprite

0.6.2

SVG sprite plugin for Vite

vite-plugin-svg-sprite-component

1.0.10

vite plugin for creating SVG sprites and components

Gathering detailed insights and metrics for svg-sprite-plugin-vite

svg-sprite-plugin-vite - 0.1.12 | npmpackage.info

svg-sprite-plugin-vite

0.1.12

TypeScript

10.64 kB

Installations

npm install svg-sprite-plugin-vite

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.11.0

NPM Version

10.9.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Release 0.1.12

v0.1.12

Updated on May 11, 2025

View All 1 releases

Languages

TypeScript

HTML

TypeScript (89.09%)

HTML (10.91%)

Developer

maxim7478

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

11 Commits

1 Watchers

1 Branches

1 Contributors

Updated on May 11, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.1.12

Package Id

svg-sprite-plugin-vite@0.1.12

Unpacked Size

10.64 kB

Size

4.99 kB

File Count

NPM Version

10.9.0

Node Version

22.11.0

Published on

May 11, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

fast-glob

Dev Dependencies

typescript vite

SVG Sprite Plugin Vite

SVG Sprite Plugin Vite is a lightweight Vite plugin that automatically collects all SVG files from a specified directory, combines them into a single SVG sprite, and injects it directly into your HTML. It supports Hot Module Replacement (HMR) during development and ensures seamless integration with modern frameworks like Vue, React, or plain HTML projects.

Features

🌟 Automatic SVG Sprite Generation: Combines all SVG files into a single sprite using <symbol> tags.
🔧 HTML Injection: The generated sprite is automatically injected into the <body> of your application.
🔥 Hot Module Replacement (HMR): Automatically updates the sprite when SVG files change during development.
🛠️ Customizable: Configure the source directory for SVG files and XML namespace (xmlns).

Installation

Install the plugin via npm:

1npm install svg-sprite-plugin-vite

1yarn add svg-sprite-plugin-vite

Configure the Plugin in vite.config.ts Add the plugin to your Vite configuration:

1import { defineConfig } from 'vite';
2import svgSpritePlugin from 'svg-sprite-plugin-vite';
3
4export default defineConfig({
5    plugins: [
6        svgSpritePlugin( 
7            './src/assets/icons', // Directory containing SVG files
8            'http://www.w3.org/2000/svg', // XML namespace (default)
9        ),
10    ],
11});

Using Icons from the Sprite To display icons from the sprite, use the

1<svg>
2  <use href="#icon-name"></use>
3</svg>

Here, icon-name corresponds to the name of the SVG file without the .svg extension.

Example Project Structure

1my-project/
2├── src/
3│   ├── assets/
4│   │   └── icons/       # Source SVG files
5│   │       ├── home.svg
6│   │       ├── settings.svg
7│   │       └── user.svg
8│   └── components/
9│       └── KitIcon.vue  # Component for displaying icons
10├── vite.config.ts       # Vite configuration
11└── package.json         # Project dependencies

1<template>
2  <svg>
3    <use :xlink:href="computedIconHref" />
4  </svg>
5</template>
6
7<script setup lang="ts">
8import { computed } from 'vue';
9
10const props = defineProps<{
11  icon: string; // Icon name (without extension)
12}>();
13
14const computedIconHref = computed(() => {
15  return `#${props.icon}`;
16});
17</script>
18
19<style scoped>
20svg {
21  width: 24px;
22  height: 24px;
23  fill: currentColor;
24}
25</style>

Using the component:

1<template>
2  <div>
3    <KitIcon icon="home" />
4    <KitIcon icon="settings" />
5    <KitIcon icon="user" />
6  </div>
7</template>
8
9<script setup>
10import KitIcon from '@/components/KitIcon.vue';
11</script>

How It Works

Development Mode :

The plugin watches the specified directory for changes to SVG files.
When an SVG file is modified, the sprite is regenerated, and the page reloads automatically.

Production Mode :

During the build process, the plugin generates the sprite once and injects it into the HTML.

HTML Injection :

The sprite is added to the of your application, making it globally available.

License

This project is distributed under the MIT License .

Support

If you encounter any issues or have questions, feel free to open an issue in the repository:

Issues

You can also reach out to the author directly:

GitHub: @maxim7478

Acknowledgments

Thank you for using Vite Plugin SVG Sprite ! If you find this plugin helpful, please consider starring the repository:

No vulnerabilities found.

No security vulnerabilities found.