@abi-software/svg-sprite
v1.0.1
Published
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.
Downloads
792
Keywords
Readme
svg-sprite
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.
View the a live demo and documentation at: https://abi-software.github.io/svg-sprite/
Using svg-sprite
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
Installation
npm install @abi-software/svg-sprite
Setup
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
In App.vue - (Options API)
<template>
<div ref="root">
<MapSvgSpriteColor />
... Rest of app ...
</div>
</template>
<script>
import { MapSvgSpriteColor } from '@abi-software/svg-sprite';
export default {
name: "App",
components: {
SvgSpriteColor,
},
...
}
When using an svg (this example is in a component)
<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";
Change the icon colours
<style>
.map-icon {
color: red;
}
</style>
Customize configuration
See Vite Configuration Reference.
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Create bundle for npm and publish
npm run build-bundle
npm publish
Lints and fixes files
npm run lint
API Documentation
The API documentation is developed with vitepress
and vuese
. Documentation pages are in the docs
folder.
To run in local development mode
npm run docs:watch
This will start the documentation server with vitepress
on port :5173
and watch the components' changes.