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
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0;" aria-hidden="true">
<symbol id="icons/user" ...>...</symbol>
<symbol id="illustrations/error" ...>...</symbol>
<symbol id="logo" ...>...</symbol>
</svg>
...
</body>- Popular modules like JetBrains/svg-sprite-loader do not support Vite as they are made for Webpack only.
- Vite modules based on Vite's
transformIndexHtmlhook do not work as it is not supported in Nuxt 3 (Issue #1711) - Most of modules bake in unwanted global components and require you to use them in order to use their module.
Install module via npm or yarn:
# npm
npm install nuxt3-svg-sprite-builder
# yarn
yarn add nuxt3-svg-sprite-builderCreate svgSpriteBuilder.js into /server/plugins and add the following code:
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.
Render /svgDirectory/logo.svg
<svg>
<use href="#logo" />
</svg>Render /svgDirectory/icons/user.svg
<svg>
<use href="#icons/user" />
</svg>/components/SvgComponent.vue
<template>
<svg>
<use :href="`#{href}`" />
</svg>
</template>
<script setup>
defineProps({
href: {
type: String,
required: true,
},
});
</script>Dynamic SVG component usage
<SvgComponent :href="dynamicValue" />- @Lstmxx for creating vite-svg-plugin on which this module is based.