npmpackage.info

vue-svg-sprite-loader

Webpack loader that takes a sprite svg and return a Vue component with the svg inline as template that can be imported

1.2.1

JavaScript

102.80 kB

Installations

npm install vue-svg-sprite-loader

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

6.10.0

NPM Version

3.10.10 Score

59.6

Supply Chain

75.7

Quality

74.8

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

0

Total

5

Closed

1

Merged

4

Issues

Open

1

Total

6

Closed

5

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 3 contributors

Languages

JavaScript

JavaScript (100%)

Developer

monoguerin

Download Statistics

Total Downloads

24,949

Last Day

Last Week

Last Month

254

Last Year

5,509

GitHub Statistics

10 Stars

14 Commits

3 Forks

2 Watching

3 Branches

3 Contributors

Bundle Size

323.72 kB

Minified

102.80 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.2.1

Package Id

vue-svg-sprite-loader@1.2.1

Unpacked Size

5.14 kB

Size

2.28 kB

File Count

NPM Version

3.10.10

Node Version

6.10.0

Total Downloads

Cumulative downloads

Total Downloads

24,949

Last day

-22.2%

Compared to previous day

Last week

-15.6%

Compared to previous week

Last month

-40%

254

Compared to previous month

Last year

5,509

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

loader-utils vue-template-compiler xml2js

Versions

vue-svg-sprite-loader

Webpack loader that takes a sprite svg and return a Vue component with the svg inline as template that can be imported.

Installation

npm install --save-dev vue-svg-sprite-loader

Configuration

1// webpack.config.js
2{
3  test: /\.svg$/,
4  loader: 'vue-svg-sprite-loader',
5  options: {
6    // Removes svg title, default is false when not passing any options
7    removeTitle: true
8  }
9}

Example code

1<template>
2  <div id="my-component">
3    <h1>Be aware! <alert-icon></alert-icon></h1>
4    <span>Hey next to this text should be an heart icon <heart-icon></heart-icon></span>
5  </div>
6</template>
7
8<script>
9import HeartIcon from './assets/iconsSprite.svg?love';
10// render svg with a custom title
11import AlertIcon from './assets/iconsSprite.svg?alert&title=some-custom-text';
12
13export default {
14  name: 'my-component',
15  components: {
16    'heart-icon': HeartIcon,
17    'alert-icon': AlertIcon
18  }
19};
20</script>

The idea behind this was inspired by vue-svg-loader.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

2.3

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-svg-sprite-loader

vue-cli-plugin-svg-sprite-loader

2.0.1

vue cli3 plugin for svg-sprite-loader

vite-awesome-svg-loader

1.4.1

Imports SVGs as source code, base64 and data URI. Preserves stroke width, replaces colors with currentColor. Optimizes SVGs with SVGO. Creates SVG sprites.

vue-symbol-icon

3.0.2

A Vue SVG Symbol icon component for svg-sprite-loader, Easy to custom SVG icon 's color and size!!!

@aidol/svg-icon

2.1.4

A Vue SVG Symbol icon component for svg-sprite-loader, Easy to custom SVG icon 's color and size!!!