Vue.js how to import SVG logo

Question

I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?

<template>
    <header class="nav">
        <img src={Logo} alt="24G Logo">
    </header>
</template>

<script>
    import Logo from '../assets/76_logo.svg';

    export default {
        name: 'Header'
    }
</script>

<style lang="scss" scoped>

</style>

Could you try this answer? https://stackoverflow.com/a/45116994/12202716 — Göksel ÖZER, May 22 '20 at 20:39

n-smits · Answer 1 · 2020-05-22T21:08:09.820

5

Here are three options. The best in my opinion is the third:

Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.
Check out svg-vue-loader. Vue won't automatically import svg without a loader.
Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:

<template>
  <header class="nav">
    <svg ....
  </header>
</template>

If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.

No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.

// in MainLogo.vue

<template>
  <svg ....
</template>

// in MainHeader.vue

<template>
  <header class="nav">
    <MainLogo>
  </header>
</template>

<script>
  import MainLogo from '../path/to/file.vue'
  export default {
    components: { MainLogo }
  }
</script>

Cheers

edited May 22 '20 at 21:08

answered May 22 '20 at 20:42

n-smits

685
7
20

I found that this way made the error go away and the svg to show up: `

` – albert_anthony6 May 22 '20 at 20:45
Basically not importing anything and only specifying the path in the src attribute. Are there any downsides to doing it this simple way? – albert_anthony6 May 22 '20 at 20:46
Here's a larger overview: https://css-tricks.com/using-svg/ and in short (though not sure it mentions everything) https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-performance – n-smits May 22 '20 at 20:48
Thanks, this is for a take home test project for a job interview and I'm fairly new to Vue.js – albert_anthony6 May 22 '20 at 20:48
Best of luck :) – n-smits May 22 '20 at 20:48

score 2 · Accepted Answer · answered Jul 14 '21 at 15:23

After searching and searching, and seeing all the answers were old, I went ahead and tried the newish v-html prop.

The result, success! <div v-html="avatar" style="width: 100%"></div>

The avatar is a full element that I stored in the database. No loaders, no imports, just using the built in resources of Vue.js

If you leave out the style, then the svg will not show.

Also, loading the full element enables me to attach a ref prop to the element. Enabling me to access the svg through script.

Hope that helps someone!!
I used this with avataaar's random avatar generator and stored the resulting svg to the database (mongo)

score 1 · Answer 3 · answered Sep 11 '21 at 09:25

Here is another approach that I used:

<template>
  <a href="#"
    class="log-link-css-class">
    <!-- SVG Icon Start-->
    <img alt="alt message" class="your-logo-css-class"
          src="@/assets/images/logofilename.svg">
    <!-- <SVG Icon End /> -->
  </a>
</template>

No import required. Vue automatically converts it to the unique URL.

score 0 · Answer 4 · answered Oct 08 '21 at 03:44

0

edit your code

<script>
import Logo from '../assets/76_logo.svg';

export default {
    name: 'Header',
    data(){
      Logo: Logo
    }
}

answered Oct 08 '21 at 03:44

kian wigin

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 08 '21 at 05:19

Vue.js how to import SVG logo

4 Answers4

Linked