Loading SVG as inline

[marvincaspar]

Hi,

it would be great if there is an option for svgs to load them inline instead of just loading it via the img tag. Then you have the option to set css stuff like fill color and you reduce the http requests. My current solution is to fetch the img src, get the response text and than output it into a span tag but it would be nice if this is part of the nuxt image.

[sevillaarvin]

Hello, I use the ?raw option of @nuxtjs/svg and v-html for inlining svg images. One disadvantage of this is that there is an extra div wrapper. I couldn't get the ?inline option to work for some reason.

I am using vue3/nuxt3, see partial implementation below:

#+name: ./components/MyComponent.vue

#+begin_src vue

  <script setup>
  import SomeIcon from "@/assets/images/some-icon.svg?raw"
  </script>

  <template>
    <div v-html="SomeIcon"></div>
  </template>

#+end_src

#+name: package.json

#+begin_src json

  {
    "dependencies": {
      "@nuxtjs/svg": "^0.4.0"
    }
  }

#+end_src

#+name: nuxt.config.js

#+begin_src js

  import { defineNuxtConfig } from "nuxt"

  export default defineNuxtConfig({
    // ...other options
    buildModules: [
      "@nuxtjs/svg"
    ]
    // ...other options
  })

#+end_src

[marvincaspar]

My issue is, that the svgs are stored in storyblok and I just receive the url

[awacode21]

i am dealing with the same issue where storyblok editors can provide svg illustrations but i need to be able to color them based on their context.