Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

vue-cli-plugin-svg-vue3

Package Overview
Dependencies
5
Maintainers
1
Versions
1
Issues
File Explorer

Advanced tools

vue-cli-plugin-svg-vue3

Super simple svg loading module for Vue.js

    0.0.1latest

Version published
Maintainers
1
Yearly downloads
9,175
increased by1110.42%

Weekly downloads

Readme

Source

vue-svg npm version code style: prettier

this is temp fork! original: https://github.com/FedorSherbakov/vue-svg

Super simple svg loading module for Vue.js

(actual npm package is vue-cli-plugin-svg)

Introduction

vue-svg allows you to import .svg files in multiple ways depending on the resource query you provide. Currently, this allows you to do the following:

  • file.svg - normal import using file-loader
  • file.svg?data - base64 data url import using url-loader
  • file.svg?inline - inline import using vue-svg-loader
  • file.svg?sprite - import using svg-sprite-loader (alpha implementation)

Installation

Using the new Vue CLI 3, it's as simple as navigating to your project and running:

$ vue add svg

That's it! You're ready to go!

Usage

The usage examples are documented as:

<!-- Vue.js code --> <!-- Outputted html -->

Standard external import

Import normally as an external resource using file-loader

<template> <img src="@/assets/vue-logo.svg" /> </template> <img src="/img/vue-logo.938241fe.svg" />

Inline base64 url

Inline as a URL (no external requests) using url-loader

<template> <img src="@/assets/vue-logo.svg?data" /> </template> <img src="data:image/svg+xml;base64,P...2h913j1g18h98hr" />

Inline svg element

Inline as an actual svg element using vue-svg-loader

<template> <VueLogo /> </template> <script> import VueLogo from "@/assets/vue-logo.svg?inline"; export default { components: { VueLogo, }, }; </script> <svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>

Sprite import

<template> <svg><use xlink:href="#vue-logo"></use></svg> </template> <script> import "@/assets/vue-logo.svg?sprite"; </script> <!-- Coming shortly -->

Configuration

You can provide options to all of the loaders used in using the vue.config.js pluginOptions field:

// vue.config.js module.exports = { pluginOptions: { svg: { inline: {}, // Pass options to vue-svg-loader data: {}, // Pass options to url-loader sprite: {}, // Pass options to svg-sprite-loader external: {}, // Pass options to file-loader }, }, };

You can provide as many options as you like, or nothing at all. You don't have to configure options, it will use some standard defaults.

You can also customise the resource queries for each type that doesn't get passed as a loader options (other than external, which doesn't use a resourceQuery):

// vue.config.js module.exports = { pluginOptions: { svg: { // You can change this inline: { resourceQuery: /inline/ }, }, }, };

Standard defaults

By default, file-loader will inherit the standard configuration from vue-cli so that behaves exactly the same.

vue-svg-loader by default will not use svgo. This is because it can cause more problems than it solves generally, though this can be easily re-enabled. Check the vue-svg-loader documentation for more info.

Contributing

As this loader attempts to abstract webpack configuration from the process and make it easier to use multiple svg loaders, any contributions that add more svg loader methods to the configuration will be accepted wholeheartedly!

Also I'll be actively maintaining this project so if you'd rather just make a request for a loader or a feature; I'd be happy to take a look and see what I can do myself :)

Keywords

FAQs

What is vue-cli-plugin-svg-vue3?

Super simple svg loading module for Vue.js

Is vue-cli-plugin-svg-vue3 popular?

The npm package vue-cli-plugin-svg-vue3 receives a total of 183 weekly downloads. As such, vue-cli-plugin-svg-vue3 popularity was classified as not popular.

Is vue-cli-plugin-svg-vue3 well maintained?

We found that vue-cli-plugin-svg-vue3 demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 12 Apr 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc