Rollup/Vite alternative to the package SVG sprite loader for Webpack from JetBrains.
npm install rollup-plugin-svg-symbols --save-dev
yarn add rollup-plugin-svg-symbols --dev
bun add rollup-plugin-svg-symbols --dev
// rollup.config.js or vite.config.js
import svgSymbols from 'rollup-plugin-svg-symbols';
export default {
plugins: [
// ...other plugins like vue() or react()
svgSymbols(),
],
};
// nuxt.config.ts
import svgSymbols from 'rollup-plugin-svg-symbols';
export default defineNuxtConfig({
vite: {
plugins: [
svgSymbols(),
],
},
});
svgSymbols({ baseUrl: 'src/icons' }) // defaults to 'assets/svg'
This configuration will recursively look for SVG files inside 'src/icons'
.
<template>
<svg :viewBox="MyIcon.viewBox" aria-hidden="true">
<use :href="MyIcon.id" />
</svg>
</template>
<script>
import MyIcon from '~/assets/icons/my-icon.svg';
</script>
<template>
<svg :viewBox="svg.viewBox" aria-hidden="true">
<use :href="svg.id" />
</svg>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const props = defineProps({
icon: String,
});
const svgImports = import.meta.glob('/**/*.svg');
const svg = ref({ id: '', viewBox: '0 0 0 0' });
const loadSvg = async () => {
const path = `../../assets/svg/icons/${props.icon}.svg`;
const importedSvg = await svgImports[path]();
svg.value = importedSvg.default;
};
watchEffect(() => {
loadSvg();
});
</script>
<template>
<SvgIcon icon="my-icon" />
<SvgIcon icon="nested-folder/my-other-icon" />
</template>
<script>
import SvgIcon from './SvgIcon.vue';
</script>
Usage with Nuxt is the same as with Vue, without the need to import components and Vue APIs.
import MyIcon from '~/assets/icons/my-icon.svg';
export default function App() {
return (
<>
<svg viewBox={MyIcon.viewBox} aria-hidden="true">
<use href={MyIcon.id} />
</svg>
</>
);
};
import { useState, useEffect } from 'react';
export default function SvgIcon({ icon }) {
const [svg, setSvg] = useState({ id: '', viewBox: '0 0 0 0' });
useEffect(() => {
const loadSvg = async () => {
const path = `../../assets/svg/icons/${icon}.svg`;
const importedSvg = await import(path);
setSvg(importedSvg.default);
};
loadSvg();
}, [icon]);
return (
<svg viewBox={svg.viewBox} aria-hidden="true">
<use href={`#${svg.id}`} />
</svg>
);
};
import SvgIcon from './SvgIcon.js';
export default function App() {
return (
<>
<SvgIcon icon="my-icon" />
<SvgIcon icon="nested-folder/my-other-icon" />
</>
);
};
We welcome contributions to improve rollup-plugin-svg-symbols
.
To contribute, please follow these guidelines:
- Reporting Issues: If you encounter any issues or have suggestions, please open an issue on the GitHub repository.
- Pull Requests: Feel free to submit pull requests. Ensure your code follows the project's coding standards.
rollup-plugin-svg-symbols
is licensed under MIT license. For more information, refer to the LICENSE file.