npmpackage.info

svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)

0.3.8

236

MIT

JavaScript

4,549,397 1.9

Installations

npm install svg-to-vue-component

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

11.14.0

NPM Version

6.5.0 Score

74.3

Supply Chain

90.3

Quality

71.5

Maintenance

Vulnerability

99.3

License

Pull Requests

Open

3

Total

9

Closed

1

Merged

5

Issues

Open

11

Total

30

Closed

19

Releases

v0.3.8

Updated on Apr 16, 2019

v0.3.7

Updated on Apr 03, 2019

v0.3.6

Updated on Mar 13, 2019

v0.3.5

Updated on Feb 28, 2019

v0.3.4

Updated on Jan 24, 2019

v0.3.3

Updated on Jan 24, 2019

View All 9 releases

Contributors

Unable to fetch Contributors

View All 6 Contributors

Languages

JavaScript

Vue

CSS

JavaScript (95.6%)

Vue (3.76%)

CSS (0.64%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

egoist

Download Statistics

Total Downloads

4,549,397

Last Day

219

Last Week

6,602

Last Month

26,786

Last Year

674,629

GitHub Statistics

MIT License

236 Stars

45 Commits

18 Forks

4 Watchers

3 Branches

6 Contributors

Updated on Dec 21, 2024

Maintainers

Package Meta Information

Latest Version

0.3.8

Package Id

svg-to-vue-component@0.3.8

Size

4.83 kB

NPM Version

6.5.0

Node Version

11.14.0

Published on

Apr 16, 2019

Total Downloads

Cumulative downloads

Total Downloads

4,549,397

Last Day

-10.2%

219

Compared to previous day

Last Week

9.7%

6,602

Compared to previous week

Last Month

27.1%

26,786

Compared to previous month

Last Year

-13.8%

674,629

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

joycon js-yaml loader-utils merge-deep posthtml svgo

Dev Dependencies

ava commitizen cz-conventional-changelog eslint-config-prettier eslint-config-rem eslint-plugin-prettier husky lint-staged poi prettier semantic-release vue vue-template-compiler xo

svg-to-vue-component

Why

When you import the .svg file as a Vue component instead of using the URL to the file, you can style it with CSS and add addtional DOM properties or event handlers to the component directly.

The differences between this project and vue-svg-loader are:

This one has built-in hot reloading support for webpack since the SVG code is compiled via vue-loader.
The latter only supports class and style attributes on the generated component while we support all DOM props and events.
This one supports project-wise and file-relative configuration for SVGO.

Install

1yarn add svg-to-vue-component --dev

Usage

With Webpack

1// webpack.config.js
2module.exports = {
3  module: {
4    rules: [
5      {
6        test: /\.svg$/,
7        // If you want to import svg in css files
8        // You need to configure another rule to use file-loader for that
9        issuer: /\.(vue|js|ts|svg)$/,
10        use: [
11          // This loader compiles .svg file to .vue file
12          // So we use `vue-loader` after it
13          'vue-loader',
14          'svg-to-vue-component/loader'
15        ]
16      }
17    ]
18  }
19  // ...other configurations
20}

Then you can import .svg files directly and use them as Vue components:

1<template>
2  <!-- Dom props and events are all available here -->
3  <CheckIcon width="20px" height="20px" @click="handleClick" />
4</template>
5
6<script>
7import CheckIcon from './check-icon.svg'
8
9export default {
10  components: {
11    CheckIcon
12  },
13
14  methods: {
15    handleClick() {
16      console.log('It works!')
17    }
18  }
19}
20</script>

With Vue CLI

In your vue.config.js:

1module.exports = {
2  chainWebpack(config) {
3    // Only convert .svg files that are imported by these files as Vue component
4    const FILE_RE = /\.(vue|js|ts|svg)$/
5
6    // Use vue-cli's default rule for svg in non .vue .js .ts files
7    config.module.rule('svg').issuer(file => !FILE_RE.test(file))
8
9    // Use our loader to handle svg imported by other files
10    config.module
11      .rule('svg-component')
12      .test(/\.svg$/)
13      .issuer(file => FILE_RE.test(file))
14      .use('vue')
15      .loader('vue-loader')
16      .end()
17      .use('svg-to-vue-component')
18      .loader('svg-to-vue-component/loader')
19  }
20}

With Poi

In your poi.config.js:

1module.exports = {
2  plugins: ['svg-to-vue-component/poi'],
3
4  // Or with options for the webpack loader
5  plugins: [
6    {
7      resolve: 'svg-to-vue-component/nuxt',
8      options: {}
9    }
10  ]
11}

Nuxt.js 2

In your nuxt.config.js:

1module.exports = {
2  modules: ['svg-to-vue-component/nuxt'],
3
4  // Or with options for the webpack loader
5  modules: [
6    ['svg-to-vue-component/nuxt',
7      {
8        // ...
9      }
10    ]
11  ]
12}

Loader Options

Pass loader options like this:

1// ...
2{
3  test: /\.svg$/,
4  use: [
5    'vue-loader',
6    {
7      loader: 'svg-to-vue-component/loader',
8      options: {
9        // ...Your options here
10      }
11    }
12  ]
13}

Option	Description
`svgoConfig`	Project-wise configuration for SVGO, if you want file-relative configuration, use the config file instead, supported format: `.svgo.{yml,js,json}`, see here for an example file. If you want to turn off SVGO entirely, pass `false` here.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

svg-to-vue-component © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily

No vulnerabilities found.

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

1

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

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

165 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-2mj8-pj3j-h362
Warn: Project is vulnerable to: GHSA-gqf6-75v8-vr26
Warn: Project is vulnerable to: GHSA-v45m-2wcp-gg98
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
Warn: Project is vulnerable to: GHSA-ch52-vgq2-943f
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-m6cx-g6qm-p2cx
Warn: Project is vulnerable to: GHSA-x8qc-rrcw-4r46
Warn: Project is vulnerable to: GHSA-4328-8hgf-7wjr
Warn: Project is vulnerable to: GHSA-93f3-23rq-pjfp
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc
Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-r2j6-p67h-q639
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg
Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8
Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2
Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.9

/10

Last Scanned on 2025-02-17

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 svg-to-vue-component

svg-to-vue

0.7.0

Utility to convert SVG code into Vue component definition

vue-svg-sprite

2.2.1

Vue.js plugin, component and directive to simply use SVG sprite

vue-simple-svg

2.0.2

A simple Vue.js plugin that allows you to use a component that loads a SVG image as an inline SVG so you can easily control its fill color from the parent component.

vue-svg-component

1.2.3

Transform svg to vue component, Suitable for vite and webpack.