Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thierrymichel/vue-svg-sprite
Vue.js directive to simply use SVG sprite
https://github.com/thierrymichel/vue-svg-sprite
Last synced: 3 months ago
JSON representation
Vue.js directive to simply use SVG sprite
- Host: GitHub
- URL: https://github.com/thierrymichel/vue-svg-sprite
- Owner: thierrymichel
- License: unlicense
- Created: 2016-06-19T16:35:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-10-04T13:03:09.000Z (over 3 years ago)
- Last Synced: 2024-10-14T17:16:41.774Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 945 KB
- Stars: 59
- Watchers: 6
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-svg-sprite
[](https://www.npmjs.com/package/vue-svg-sprite)
[](https://coveralls.io/github/thierrymichel/vue-svg-sprite?branch=master)
[](http://commitizen.github.io/cz-cli/)
[](https://conventionalcommits.org)
[](https://github.com/thierrymichel/vue-svg-sprite/blob/master/UNLICENSE)
> 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](https://www.npmjs.com/package/vue-svg-sprite/v/1.4.3)
## 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 :)
### Overall usage
- 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
### Component (plugin + local)
```js
// File: main.ts
// Global registration with options
import Vue from 'vue'
import { svgSpritePlugin } from 'vue-svg-sprite'
Vue.use(svgSpritePlugin, {} /* options */)
```
```html
// File: Parent.vue
// Local use
import { SvgSprite } from 'vue-svg-sprite'
export default {
components: {
SvgSprite,
},
}
```
### Directive (plugin)
```js
// 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 |
```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
### Component
```html
```
### Directive
```html
```
> You can also use an expression (``).
### 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
```html
```
#### output
```html
```
> To generate the SVG sprite file, you can use [svg-sprite](https://www.npmjs.com/package/svg-sprite).
---
## Contributors
[@lovethebomb](https://github.com/lovethebomb)
[@eregnier](https://github.com/eregnier)
[@jpsc](https://github.com/jpsc)
[@valjar](https://github.com/valjar)
[@demiro](https://github.com/demiro)
[@Warin](https://github.com/Warin)
[@Warcot](https://github.com/Warcot)
[@zavsievich](https://github.com/zavsievich)
## License
See [UNLICENSE](https://github.com/thierrymichel/vue-svg-sprite/blob/master/UNLICENSE) for details.