https://github.com/kuix/v-svg-directive

A simple Vue 2 directive to make referencing SVG symbol sprites easier.
https://github.com/kuix/v-svg-directive

directive svg svg-icons vue vue2 vuejs

Last synced: 3 months ago
JSON representation

A simple Vue 2 directive to make referencing SVG symbol sprites easier.

• Host: GitHub
• URL: https://github.com/kuix/v-svg-directive
• Owner: kuix
• License: mit
• Created: 2017-02-08T17:43:32.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-16T12:18:15.000Z (almost 8 years ago)
• Last Synced: 2024-10-04T19:32:26.276Z (4 months ago)
• Topics: directive, svg, svg-icons, vue, vue2, vuejs
• Language: JavaScript
• Size: 8.79 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-svg-directive

[![NPM version][npm-badge-image]][npm-badge-url]

A simple Vue 2 directive to make referencing SVG symbol sprites easier.

## Install

Install `v-svg-directive` as an NPM package:

```bash

npm install v-svg-directive --save

```

## Setup

To use `v-svg-directive` in your project, use the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method to initialize it.

```js

import VSvg from 'v-svg-directive';

Vue.use(VSvg, {

    path: '/images/icons.svg',

    prefix: 'icon-',

    class: 'icon'

});

```

### Options

`Vue.use()` accepts an `options` object as a second argument, and we are leveraging this to pass a few basic options to our directive:

##### `path` (required)

Path to your SVG sprite file. This is relative to the page the SVG icon appears on.

> **Example:**

>

> `{ path: '../images/my-svg-icons-bundle.svg' }`

>

> will become

>

> ``

##### `prefix` (optional)

A prefix to prepend before every icon name. In case all your SVG symbols are prefixed with the same prefix (most commonly `icon-`), use this option to set it, so you'd never have to type it again.

> **Example:**

>

> `{ prefix: 'myprefix-' }`

>

> will become

>

> ``

##### `class` (optional)

A single classname to be added to all your SVG icons.

> **Example:**

>

> `{ class: 'svg-icon' }`

>

> will become

>

> ``

## Usage

To include an SVG icon in your document, use the directive like this:

```html

```

**Note the single quotes inside double quotes! Starting from Vue.js 2.0 directives accept expressions, not literal strings.**

This means that if your icon is named `my-icon`, you will need to use single quotes inside double quotes to pass it along as a string (`v-svg="'my-icon'"`), otherwise Vue.js will look for a Vue property called `my-icon`. (Which is a perfectly fine usecase too, btw. 😉)

## Credit

This directive is highly inspired by [Phunky's `vue-svg-directive`](https://github.com/Phunky/vue-svg-directive). We started using it in our projects, but ran into a few issues with it. Then Vue 2 came along, and we decided to "lazy-fork" it, and create a version that could be used in almost all of our projects.

[npm-badge-image]: https://badge.fury.io/js/v-svg-directive.svg

[npm-badge-url]: https://npmjs.org/package/v-svg-directive