Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-inline-svg
Advanced tools
Changelog
2.1.3 - 2023-02-07
Readme
Vue component loads an SVG source dynamically and inline <svg>
so you can manipulate the style of it with CSS or JS.
It looks like basic <img>
so you markup will not be bloated with SVG content.
Loaded SVGs are cached so it will not make network request twice.
npm install vue-inline-svg
Register locally in your component
import InlineSvg from 'vue-inline-svg';
// Your component
export default {
components: {
InlineSvg,
}
}
Or register globally in the root Vue instance
import Vue from 'vue';
// as a plugin
import {InlineSvgPlugin} from 'vue-inline-svg';
Vue.use(InlineSvgPlugin);
// or as a component
import InlineSvg from 'vue-inline-svg';
Vue.component('inline-svg', InlineSvg);
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Include the `vue-inline-svg` script on your page after Vue script -->
<script src="https://unpkg.com/vue-inline-svg"></script>
<script>
// Register as a plugin
Vue.use(VueInlineSvg.InlineSvgPlugin);
// or as a component
Vue.component('inline-svg', VueInlineSvg.InlineSvgComponent);
new Vue({
// ...
});
</script>
Version of vue-inline-svg
with support of Vue v3 is available under next
tag
from NPM
npm install vue-inline-svg@next
or from CDN
<script src="https://unpkg.com/vue-inline-svg@next"></script>
<inline-svg
src="image.svg"
transformSource="transformSvg"
@loaded="svgLoaded($event)"
@unloaded="svgUnloaded()"
@error="svgLoadError($event)"
width="150"
height="150"
fill="black"
aria-label="My image"
></inline-svg>
src
Path to SVG file
<inline-svg src="/my.svg"/>
Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for <img>
tag, so you will need to use it with require
:
<inline-svg :src="require('../assets/my.svg')"/>
Learn more:
title
Sets/overwrites the <title>
of the SVG
<inline-svg :src="image.svg" title="My Image"/>
keepDuringLoading
true
by default. It makes vue-inline-svg to preserve old image visible, when new image is being loaded. Pass false
to disable it and show nothing during loading.
<inline-svg :src="image.svg" :keepDuringLoading="false"/>
transformSource
Function to transform SVG source
This example create circle in svg:
<inline-svg :src="image.svg" :transformSource="transform"/>
<script>
const transform = (svg) => {
let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
point.setAttributeNS(null, 'cx', '20');
point.setAttributeNS(null, 'cy', '20');
point.setAttributeNS(null, 'r', '10');
point.setAttributeNS(null, 'fill', 'red');
svg.appendChild(point);
return svg;
}
// For cleaner syntax you could use https://github.com/svgdotjs/svg.js
</script>
Other SVG and HTML attributes will be passed to inlined <svg>
. Except attributes with false
or null
value.
<!-- input -->
<inline-svg
fill-opacity="0.25"
:stroke-opacity="myStrokeOpacity"
:color="false"
></inline-svg>
<!-- output -->
<svg fill-opacity="0.25" stroke-opacity="0.5"></svg>
loaded
Called when SVG image is loaded and inlined. Inlined SVG element passed as argument into the listener’s callback function.
<inline-svg @loaded="myInlinedSvg = $event"/>
unloaded
Called when src
prop was changed and another SVG start loading.
<inline-svg @unloaded="handleUnloaded()"/>
error
Called when SVG failed to load. Error object passed as argument into the listener’s callback function.
<inline-svg @error="log($event)"/>
<svg>
are limited, converts <style>
tag into style=""
attrMIT License
FAQs
Replace SVG images with inline SVG element
The npm package vue-inline-svg receives a total of 29,165 weekly downloads. As such, vue-inline-svg popularity was classified as popular.
We found that vue-inline-svg 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.