
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
vue-cli-plugin-svg-vue3
Advanced tools
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)
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)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!
The usage examples are documented as:
<!-- Vue.js code -->
<!-- Outputted html -->
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 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 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>
<template>
<svg><use xlink:href="#vue-logo"></use></svg>
</template>
<script>
import "@/assets/vue-logo.svg?sprite";
</script>
<!-- Coming shortly -->
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/ },
},
},
};
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.
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 :)
FAQs
Super simple svg loading module for Vue.js
The npm package vue-cli-plugin-svg-vue3 receives a total of 134 weekly downloads. As such, vue-cli-plugin-svg-vue3 popularity was classified as not popular.
We found that vue-cli-plugin-svg-vue3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.