vue-svg-sprite

!stable

> Vue.js component or directive to simply use SVG sprites

🚨 This new version (2.x) is for Vue.js 3. For v2 compatibility, check previous version

Description

This Vue.js plugin will help you to manage SVG spritsheet with elements.
It provides a component / directive to make tu use of and elements easier.

This module is tree-shakable and exports the followings:

- SvgSprite, the component version (with a S)
- svgSpritePlugin, options and global registration for component
- svgSpriteDirective, the directive version
- svgSpriteDirectivePlugin, options and global registration for directive

> 820B gzipped for the component plugin…

It's also TypeScript friendly :)

$3

- Use inline SVG spritesheet or an external SVG file
- Use symbol attribute (or directive expression) to get the right
- Use size attribute for viewBox, width and height ()
- 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)
- Use url attribute to override global option value
- Options (with plugin use):
- url: path to external SVG file (default: /assets/svg/sprite.svg, use '' for inline)
- 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

$3

``js
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpritePlugin } from 'vue-svg-sprite'

Vue.use(svgSpritePlugin, {} / options /)
`

`html

`

$3

`js
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpriteDirectivePlugin } from 'vue-svg-sprite'

Vue.use(svgSpriteDirectivePlugin, {} / options /)
`

$3

| Option | Default | Description |
| ------ | ------------------------ | ------------------------- |
| url | '/assets/svg/sprite.svg' | path to external SVG file |
| class | 'icon' | CSS class name |

`js
Vue.use(svgSpritePlugin, {
url: 'path/to/svg/file.svg',
class: 'my-class',
})
`

> If you want to use an inline SVG, set url to ''.

> If your spritesheet is "processed" (vue-cli, webpack, …) set url to require('./processed/path/to/svg/sprite.svg').

---

Usage

$3

`html

`

$3

`html

`

> You can also use an expression ().

$3

| Attribute | Required | Default | Description |
| --------- | -------- | ------------- | ---------------------------------------- |
| symbol | \* | - | symbol id |
| size | | - | generate viewBox, width and height |
| url | | options.url | href domain or '' for inline SVG |

> size attributes gives the same output with 24, 24 24 or 0 0 24 24.

$3

`html
symbol="icons-dashboard"
size="0 0 24 24"
role="presentation"
class="icon--inline"
/>
`

#### output

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

``

> To generate the SVG sprite file, you can use svg-sprite.

---

Contributors

@lovethebomb
@eregnier
@jpsc
@valjar
@demiro
@Warin
@Warcot
@zavsievich

License

See UNLICENSE for details.