Skip to content
This repository has been archived by the owner on Jul 2, 2020. It is now read-only.
/ vue-svg-directive Public archive

VueJS directive to make using SVG sprites simpler

Notifications You must be signed in to change notification settings

Phunky/vue-svg-directive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-svg-directive

VueJS directive to make using SVG sprites much simpler to use.

Setup

import svg from 'vue-svg-directive'
// ...
Vue.use(svg, {
  sprites: '/static/sprites.svg', // Path to your svg sprite
  prefix: 'icon-',  // The prefix all your icons have in your sprite (optional)
  class: 'icon' // This class will be applied to your <svg> elements (optional)
});

Usage

The below will insert an <svg /> within it's parent element

<div v-svg="'home'"></div>
<!-- or, when the sprite name is a prop or a datum -->
<div v-svg="icon"></div>

While the below will just add the appropriate <use> into the <svg>

<svg v-svg="'home'"></svg>
<!-- or, when the sprite name is a prop or a datum -->
<svg v-svg="icon"></svg>

About

VueJS directive to make using SVG sprites simpler

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •