vue-svg-sprite
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 <symbol> elements.
It provides a component / directive to make tu use of <svg> and <use> elements easier.
This module is tree-shakable and exports the followings:
SvgSprite, the component version (with a S)svgSpritePlugin, options and global registration for componentsvgSpriteDirective, the directive versionsvgSpriteDirectivePlugin, options and global registration for directive
820B gzipped for the component plugin…
It's also TypeScript friendly :)
Overall usage
- Use inline SVG spritesheet or an external SVG file
- Use
symbol attribute (or directive expression) to get the right <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)
- 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
Component (plugin + local)
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpritePlugin } from 'vue-svg-sprite'
Vue.use(svgSpritePlugin, {} /* options */)
<script>
// File: Parent.vue
// Local use
import { SvgSprite } from 'vue-svg-sprite'
export default {
components: {
SvgSprite,
},
}
</script>
Directive (plugin)
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpriteDirectivePlugin } from 'vue-svg-sprite'
Vue.use(svgSpriteDirectivePlugin, {} /* options */)
Options
| Option | Default | Description |
|---|
| url | '/assets/svg/sprite.svg' | path to external SVG file |
| class | 'icon' | CSS class name |
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
Component
<SvgSprite symbol="icons-dashboard" size="24" />
Directive
<svg v-svg symbol="icons-dashboard" size="24"></svg>
You can also use an expression (<svg v-svg="'icons-dashboard'"></svg>).
Attributes (all)
| 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.
Example
<SvgSprite
symbol="icons-dashboard"
size="0 0 24 24"
role="presentation"
class="icon--inline"
/>
output
<svg
viewBox="0 0 24 24"
width="24"
height="24"
role="presentation"
class="icon--inline"
>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/assets/svg/sprite.svg#icons-dashboard"
href="/assets/svg/sprite.svg#icons-dashboard"
></use>
</svg>
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.
