Vue.js plugin, component and directive to simply use SVG sprite
npm install 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
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 :)
- 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…
---
``js
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpritePlugin } from 'vue-svg-sprite'
Vue.use(svgSpritePlugin, {} / options /)
`
`html`
`js
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpriteDirectivePlugin } from 'vue-svg-sprite'
Vue.use(svgSpriteDirectivePlugin, {} / options /)
`
| 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 ''.url
> If your spritesheet is "processed" (vue-cli, webpack, …) set to require('./processed/path/to/svg/sprite.svg').
---
`html`
`html`
> You can also use an expression ().
| Attribute | Required | Default | Description |
| --------- | -------- | ------------- | ---------------------------------------- |
| symbol | \* | - | symbol id |
| size | | - | generate viewBox, width and height |options.url
| url | | | href domain or '' for inline SVG |
> size attributes gives the same output with 24, 24 24 or 0 0 24 24.
`html`
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.
---
@lovethebomb
@eregnier
@jpsc
@valjar
@demiro
@Warin
@Warcot
@zavsievich
See UNLICENSE for details.