# nuxt3-svg-sprite-builder > Nitro plugin to inject SVG sprite from SVG files into your HTML Latest version **1.0.7** (published 2022-11-30) · MIT license · 0 weekly downloads ## Install ```sh npm install nuxt3-svg-sprite-builder pnpm add nuxt3-svg-sprite-builder yarn add nuxt3-svg-sprite-builder bun add nuxt3-svg-sprite-builder ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.7 | | Published | 2022-11-30 | | First published | 2022-11-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 5.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Nicolas Jesenberger | | Maintainers | njsen | | Keywords | nuxt, nuxt3, svg, sprite, builder, loader, icons | ## Links - npm: https://www.npmjs.com/package/nuxt3-svg-sprite-builder - Repository: https://github.com/njsen/nuxt3-svg-sprite-builder - Homepage: https://github.com/njsen/nuxt3-svg-sprite-builder#readme - Issues: https://github.com/njsen/nuxt3-svg-sprite-builder/issues - npm.io page: https://npm.io/package/nuxt3-svg-sprite-builder ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 1.0.7 (latest) — 2022-11-30 - 1.0.6 — 2022-11-30 - 1.0.5 — 2022-11-30 - 1.0.4 — 2022-11-30 - 1.0.3 — 2022-11-30 - 1.0.2 — 2022-11-30 - 1.0.1 — 2022-11-30 - 1.0.0 — 2022-11-30 ## README # nuxt3-svg-sprite-builder Nitro plugin to inject SVG sprite from SVG files into your HTML > ⚠️ This is experimental and currently only provided for testing and feedback. Use at your own risk! From ``` 📁 svg ├ 📁 icons │ └ 📄 user.svg ├ 📁 illustrations │ └ 📄 error.svg └ 📄 logo.svg ``` To ```html ... ``` ## Table of contents - [Why is was made](#why-it-was-made) - [Installation](#installation) - [Usage](#usage) - [Rendering an SVG](#rendering-an-svg) - [Creating a dynamic SVG component](#creating-a-dynamic-svg-component) - [Credits](#credits) - [License](#license) ## Why it was made - Popular modules like [JetBrains/svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader) do not support Vite as they are made for Webpack only. - Vite modules based on Vite's `transformIndexHtml` hook do not work as it is not supported in Nuxt 3 ([Issue #1711](https://github.com/nuxt/framework/pull/1711)) - Most of modules bake in unwanted global components and require you to use them in order to use their module. ## Installation Install module via npm: ```bash npm install nuxt3-svg-sprite-builder ``` Create `svgSpriteBuilder.js` into `/server/plugins` and add the following code: ```js import { svgSpriteBuilder } from 'nuxt3-svg-sprite-builder'; export default svgSpriteBuilder('./path/to/svg/folder'); ``` Edit `./path/to/svg/folder` to match your SVG folder, default is `./assets/svg` if omitted. ## Usage ### Rendering an SVG Render `/svgDirectory/logo.svg` ```vue ``` Render `/svgDirectory/icons/user.svg` ```vue ``` ### Creating a dynamic SVG component `/components/SvgComponent.vue` ```vue ``` Dynamic SVG component usage ```vue ``` ## Credits - [@Lstmxx](https://github.com/Lstmxx) for creating [vite-svg-plugin](https://github.com/Lstmxx/vite-svg-plugin) on which this module is based on ## License [MIt License](https://github.com/njsen/nuxt3-svg-sprite-builder/blob/main/LICENSE.md) --- _Source: https://npm.io/package/nuxt3-svg-sprite-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._