Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.org/package/vue-inline-svg below:

vue-inline-svg - npm

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.

Check old version vue-inline-svg@2

• Install
  • NPM
  • CDN
• Usage
  • props
    • src
    • title
    • uniqueIds
    • uniqueIdsBase
    • keepDuringLoading
    • transformSource
  • SVG attributes
  • events
    • loaded
    • unloaded
    • error
• Security Considerations
  • SVGs from your project assets
  • SVGs from third-party sources
• Comparison
• Changelog
• Contributing
• License

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 Vue app

import { createApp } from 'vue'
import InlineSvg from 'vue-inline-svg';

const app = createApp({/*...*/});
app.component('inline-svg', InlineSvg);

<script src="https://unpkg.com/vue"></script>
<!-- Include the `vue-inline-svg` script on your page after Vue script -->
<script src="https://unpkg.com/vue-inline-svg"></script>

<script>
const app = Vue.createApp({/*...*/});
app.component('inline-svg', VueInlineSvg);
</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>

Example

Type: string Required

Path to SVG file

<inline-svg src="/my.svg"/>

ℹ️ Note: if you are using assets not from public directory, then you will need to import them with your bundler.

Webpack: vue-loader or vue-cli will not handle paths like '../assets/my.svg' by file-loader automatically (like vue-cli do for <img> tag), so you will need to use it with require():

Vite: You might like vite-plugin-require to enable require() in Vite.

<inline-svg :src="require('../assets/my.svg')"/>

Learn more about static assets handling:

• vite: https://vite.dev/guide/assets.html
• webpack's vue-loader: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
• vue-cli: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Type: string

Sets/overwrites the <title> of the SVG

<inline-svg src="image.svg" title="My Image"/>

Type: boolean | string

Add suffix to all IDs in SVG to eliminate conflicts for multiple SVGs with the same source. If true - suffix is random string, if string - suffix is this string.

<inline-svg src="image.svg" :uniqueIds="true"/>
<inline-svg src="image.svg" uniqueIds="my-unique-suffix"/>

Type: string

An URL to prefix each ID in case you use the <base> tag and uniqueIds.

<inline-svg src="image.svg" :uniqueIds="true" uniqueIdsBase="http://example.com""/>

Type: boolean; Default: true

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"/>

Type: (svg: SVGElement) => SVGElement

Function to transform SVG content

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>

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"/>

Called when src prop was changed and another SVG start loading.

<inline-svg @unloaded="handleUnloaded()"/>

Called when SVG failed to load. Error object passed as argument into the listener’s callback function.

<inline-svg @error="log($event)"/>

Inlining SVGs directly into the DOM provides flexibility for styling and interaction. However, it can pose risks of XSS (Cross-Site Scripting) attacks. SVGs can contain JavaScript (<script> tags), event handlers (onload, onclick, etc.), or external references (<use xlink:href="..."), which could be exploited.

To ensure security, follow these guidelines based on your SVG source:

Manually check they don't contain any harmful elements or attributes (scripts, event handlers, external references)

Always sanitize before inlining. Use DOMPurify

<inline-svg
    src="https://example.com/external.svg"
    :transformSource="sanitize"
/>

<script>
    import DOMPurify from 'dompurify';

    function sanitize(svg) {
        svg.innerHTML = DOMPurify.sanitize(svg.innerHTML, { USE_PROFILES: { svg: true } });
        return svg;
    }
</script>

CHANGELOG.md

CONTRIBUTING.md

MIT License

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4