vue-svg-sprite

Vue.js directive to simply use SVG sprite

Draft (wip)

This Vue.js plugin will add some attributes (viewBox, width and height) and the appropriate <use> to <svg> elements.

• Use an external SVG file
• Use expression or symbol attribute to link the correct <symbol>
• Use size attribute for viewBox, width and height (<svg>)
  • Comma or space separated values
  • 1, 2 or 4 values accepted
  • 1 value: x/y = 0, width = height (e.g.: 24)
  • 2 values: x/y = 0, width, height (e.g.: 24 24)
  • 4 values: x, y, width, height (e.g.: 0 0 24 24)
• Options:
  • url: path to external SVG file (default: /assets/svg/sprite.svg)
  • class: class for the SVG element (default: icon)

NB: If the className is already used (eg: via a modifier like icon--inline), the class option is not added…

Setup

import Vue from 'vue';
import SvgSprite from 'vue-svg-sprite';

Vue.use(SvgSprite, {
  url: '/path/to/svg-sprite-file.svg',
  class: 'icon'
});

Basic usage

<svg v-svg="icons-dashboard"></svg>

output:

<svg class="icon">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#icons-dashboard"></use>
</svg>

Advanced usage

<svg role="presentation" class="icon--inline" v-svg symbol="icons-dashboard" size="0 0 24 24"></svg>

output:

<svg role="presentation" class="icon--inline" viewBox="0 0 24 24" width="24" height="24">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/sprite.svg#icons-companies"></use>
</svg>

---

To generate the SVG sprite file, you can use gulp-svgstore or grunt-svgstore.

---

License

MIT, see LICENSE.md for details.