An npm package used to bundle svg icons into the a Vite-Vue3 build. This is opposed to loading svg's from the server at runtime, which can end up SVGs loading last on a site.

svg-sprite currently only works for SVGs included in the assets/icons directory

It can however be forked to include any set of SVGs, or in future we can modify svg-sprite to take a prop input that points to an svg folder

npm install @abi-software/svg-sprite

To use svg-sprite, we need to load it before any of the SVGs will be loaded in components. A method guaranteed to do this is loading it on the first line of app.py

<template>
    <div ref="root">
      <MapSvgSpriteColor />
      ... Rest of app ...
    </div>
</template>

<script>
import { MapSvgSpriteColor } from '@abi-software/svg-sprite';
export default {
  name: "App",
  components: {
    SvgSpriteColor,
  },
  ...
}

<template>
  <MapSvgIcon icon="close" @click="close"/>
</template>


<script>
/* eslint-disable no-alert, no-console */
import { MapSvgIcon } from '@abi-software/svg-sprite';
import "@abi-software/svg-sprite/dist/style.css";

<style>
.map-icon {
  color: red;
}
</style>

See Vite Configuration Reference.

npm install

npm run serve

npm run build-bundle
npm publish 

npm run lint