svg-sprite

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

Using svg-sprite

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

It can however be forked to inlcude 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 gauranteed to do this is loading it on the first line of app.py

In App.vue

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

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

When using an svg (this example is in a component)

<template>
  <svg-icon icon="close" @click.native="close"/>
</template>


<script>
/* eslint-disable no-alert, no-console */
import Vue from "vue";
import {SvgIcon} from '@abi-software/svg-sprite';
Vue.component('svg-icon', SvgIcon);

Change the icon colours

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

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