CODEWITHSUNDEEP
vue.jsnuxt.js
HenrijsS
HenrijsS

Reputation: 674

Serving SVG content from static/assets folder in Nuxt

I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.

In PHP there's a magic function called file_get_contents('path')

Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.

Upvotes: 0

Views: 3083

Answers (1)

Florian Pallas
Florian Pallas

Reputation: 582

Check out the @nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.

<template>
  <NuxtLogo class="logo" />
</template>
 
<script>
  import NuxtLogo from "~/assets/nuxt.svg?inline";
 
  export default {
    components: { NuxtLogo },
  };
</script>

<style scoped>
.logo {
  fill: #fff;
}
</style>

Upvotes: 2

Related Questions