search

nuxt-community / svg-module

Super simple svg loading module for Nuxt.js
MIT License
340 stars 35 forks source link

Is it possible to load SVG's (raw) from external source (like a headless CMS)? #92

Closed Expanddigital closed 2 years ago

Expanddigital commented 2 years ago

I am trying to make all my SVG's in the website dynamic by fetching them from a headless CMS (Strapi), but it doesn't seem to work with external sources. Is there a way to fix this?

<div v-html="require('http://localhost:1337${item.attributes.svgicon.data.attributes.url}?raw')" />

Throws the following error:

in ./pages/index.vue?vue&type=template&id=2a183b29& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=template&id=2a183b29&) Module not found: Error: Can't resolve 'http://localhost:1337/uploads/zakelijk_icon_7a6a1902d3.svg?raw' in 'Route on local PC'

Going to that specific link in the error in the browser shows the SVG perfectly fine.

Any help would be appreciated.

manuelodelain commented 2 years ago

The ?raw resource query uses the raw-loader. I don't think it is possible to load an external file with raw-loader.

rchl commented 2 years ago

I suppose one can fetch the contents of the svg within asyncData first and then just use it within v-html. No relation to this module.

Expanddigital commented 2 years ago

I suppose one can fetch the contents of the svg within asyncData first and then just use it within v-html. No relation to this module.

Actually, no. The SVG is within a collection of items. The url gets given nested in the response, but then it's just a plain SVG, so it's not dynamically editable.

rchl commented 2 years ago

I don't understand fully what you are saying but you can trigger fetch at any time, doesn't have to be from asyncData. Once you have the plain content of the SVG you can insert it into the page in one way or another.

Expanddigital commented 2 years ago

I don't understand fully what you are saying but you can trigger fetch at any time, doesn't have to be from asyncData. Once you have the plain content of the SVG you can insert it into the page in one way or another.

I can't specifically fetch 1 SVG by URL, it's dynamic because of the CMS so it changes. If i use the URL in a foreach it's just a plain image, so I can't edit fills and paths with CSS.

rchl commented 2 years ago

You need to re-design how you do things. You can't expect an SVG from an external URL to be dynamically loaded like that. You can only require stuff that is physically in your app.

Expanddigital commented 2 years ago

You need to re-design how you do things. You can't expect an SVG from an external URL to be dynamically loaded like that. You can only require stuff that is physically in your app.

Understood! Going to think of something else. Thanks for the help!