CODEWITHSUNDEEP
javascriptsvgvue.js
stdnik
stdnik

Reputation: 143

How to load SVG from a server and insert them inline

Currently, I am using Webpack's svg-inline-loader plugin like this solution and it works well with static icons.

But now I need to load icons from an HTTP server. And when I try to write the icon's url to a vector's src, it doesn't work. I could just use an <img> tag, but I need to change fill color.

How do I load icons from the server and insert them as an inline SVG?

Upvotes: 3

Views: 2822

Answers (1)

Emile Bergeron
Emile Bergeron

Reputation: 17430

Stephen Thomas shared a valid solution with his link to loading inline svg.

Which would look like the following within Vue.

Say the backend returns the following SVG (notice the fill="currentColor"):

<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 384 512">
    <path fill="currentColor"
          d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path>
</svg>

You could create a super simple SVG image component:

<template>
    <span v-html="content" />
</template>
<script>
export default {
    props: {
        src: {
            type: String,
            required: true,
        }
    },
    data() {
        return {content: ''};
    },
    watch: {
        src: {
            immediate: true,
            handler(src) {
                axios(src).then((response) => this.content = response.data);
            }
        }
    },
}
</script>

Then use it whenever you need it:

<template>
    <svg-img :src="svgSrc" />
</template>
<script>
import SvgImg from './components/SvgImg.vue';

export default {
    components: {
        SvgImg
    },
    data: {
        svgSrc: 'url/to/backend/times.svg',
    },
}
</script>

Upvotes: 2

Related Questions