oliverfindl / vue-svg-inline-plugin Goto Github PK

View Code? Open in Web Editor NEW

32.0 2.0 3.0 248 KB

Vue plugin for inline replacement of SVG images with actual content of SVG files.

License: MIT License

JavaScript 100.00%

vue vuejs plugin vue-plugin svg inline sprites symbols vue-svg-inline-plugin javascript

vue-svg-inline-plugin's People

Contributors

Stargazers

Watchers

Forkers

christian-nils ilya-chernyshev lgc2333

vue-svg-inline-plugin's Issues

Reduce bundle size

I'm not an expert, I'm sorry if I'm wrong with my assumptions. Vue instance is injected in install method and Axios instance is passed in options object or taken from global scope. Would setting Vue and Axios as peerDependencies help reduce the size of the bundle?

Webpack 5 compatibility?

Warning:

Should not import the named export 'name' (imported as 'name') from default-exporting module (only default export is available soon)

Trying to use vue-svg-inline-plugin in Quasar app

Hi, I would like load an SVG file in an image, . Is this possible with this vue-svg-inline-plugin?

My app is based on Vue 3 and Quasar. Can you provide some hints how I would have to register this plugin to be able to use it ?

Crashes in incognito when iframed

Hi there,

My application which uses vue-svg-inline-plugin is being served via an iframe. Unfortunately, this crashes the app when the user's browser is running in incognito/private mode.

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Object.install (webpack-internal:///./node_modules/vue-svg-inline-plugin/src/index.js:222:71)
    at Object.use (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3957:28)
[...]

Unfortunately, setting cache.persistent to false does not help. Is there another way to completely disable the use of localstorage?

Error: Required property is missing! [node.parentNode]

Hello everyone!

I have next composition:

   <img v-svg-inline src="@/assets/widget/expand.svg" v-if="!expanded" />
   <img v-svg-inline src="@/assets/widget/collapse.svg" v-else />

After toggle v-if value I have next error in console.

Who can tell me what is the problem?

Support for Nuxt 3?

Hi, thanks for this plugin.

On nuxt 3, I setup the loader as a plugin this way in the nuxt plugins folder:

import VueSvgInlinePlugin from "vue-svg-inline-plugin"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSvgInlinePlugin)
})

But I get this error in my console:

(node:13568) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Support variable src

Thanks for this plugin.

I was wondering how we could make it work with variable paths?

I made an Icon component like this:

<img
  v-svg-inline
  :src="`/@/assets/icons/${style}/${icon}.svg`"
  class="svg-icon"
/>

It works while in development (yarn dev) but once building for production it fails.

There is an error in the console:

[vue-svg-inline-plugin] TypeError: [vue-svg-inline-plugin] Argument property is not valid! [file.content="<!DOCTYPE html>
.. content of my index.html

Can this be done? If not, what approach would you recommend instead?

Cheers

Image cached?

It looks that the plugin caches the SVG file before importing. So if the file is changed, I still see old file inline. As a workaround I had to add "?.." in the URL.

So does the cache really exist? And how to flush it on source image change?

Custom directive not working

During the migration of my Vue 3 app from Webpack to Vite, I decided to switch from https://github.com/oliverfindl/vue-svg-inline-loader to this plugin, as it was recommended in README. Unfortunately, I had to rename all directive usages from svg-inline to v-svg-inline, because the custom directive simply doesn't work.

Reproduction link: https://codesandbox.io/s/relaxed-mendel-98zk3y

Am I missing something or this is a bug?

Static building loads SVGs as data/image, not inline

Hi, everything was working as expected until I built the project to host it in netlify.
Once it was uploaded, the svgs stopped working inline and instead they were loaded through data/image base64.

Any way to configure this the right way? I'm using Nuxt, Vite and Tailwind JIT.

Changelog for new versions

It would be nice to have a changelog of what's changing in each version.

Potentially even autogenerated changelogs based off commit messages?

inlining at build time?

On my vue2 projects, I used https://github.com/oliverfindl/vue-svg-inline-loader that performed the inlining at build time and thus reducing the amount of HTTP request when visiting the page.

Is there a way to setup this plugin to perform the inlining at build time?

Typescript support for CLI projects

Hi, is there a plan to add type declaration files for this project?

This allows for full compatibility with typescript projects.

Question

Hi, this is more of a question than an "issue".
First of all thank you for your work on both this and on vue-svg-inline-loader.

I found a thread on vue-svg-inline-loader that mentioned that this new plugin supports the first dynamic value in the :src attribute, but I don't see any examples of how that should work.

I am trying to use it but it doesn't work, so I assume I am doing something wrong so an example of what you meant would be great.

e.g. from what you wrote I would expect something like: <img v-svg-inline :src="`./assets/icons/${icon}.svg`" /> to work, but I've probably misunderstood what you meant.

Thanks in advance!

SVG Sprites doesn't work since the viewBox attribute is missing

Hey there, first of all, thank you very much for this plugin! Currently, I believe it's the only one for vue3, which is great. But what's really a pain is that I can't use the sprite mode. The reason I want to use it is since every icon ever needed will make a http request to it. So it's not cached or anything, which leads in thousands of HTTP requests for a relatively simple list of cards.

To avoid this, I wanted to use the sprite mode with <img v-svg-inline.sprite .... But then, the viewBox attribute is not applied to the tag where the icon is finally used. This results in unusable behaviour, since a viewBox attribute is absolutely needed on both sites (both on in sprite & on in the UI). It leads to icons not properly resizing.

Here is an example of how it behaves

A fix (for me) is to add the viewBox property manually:

Is there a way you could fix this? Or is there a reason why viewBox is not getting applied to the in UI?

add event handlers

it drops event handlers right now, for instance, @click="onClick" not triggering

"Argument is not valid" for items without v-svg-inline directive

We noticed some random JS exceptions in Sentry logs which made us a bit confused.

For example:
TypeError: [vue-svg-inline-plugin] Argument is not valid! [path="/image/i.702/w.400:h.400:f.0/image.png"]

The confusion is because this element does not contain SVG and should not be affected at all:

<img v-lazy="getImageUrl(item.image_id)">

The same Vue component contains other elements using vue-svg-inline-plugin, for example:

<img v-svg-inline src="/customer/images/challenge-success.svg" alt="">
<img v-svg-inline src="/customer/images/challenge-failed.svg" alt="">

Any ideas?

Usage configuration

@oliverfindl Hi Oliver, may I know where should I place the Webpack configuration in, if i am building a vue2 with quasar project? should I create a new boot file and name it as any name?

oliverfindl / vue-svg-inline-plugin Goto Github PK

vue-svg-inline-plugin's People

Contributors

Stargazers

Watchers

Forkers

vue-svg-inline-plugin's Issues

Here is an example of how it behaves

A fix (for me) is to add the viewBox property manually:

Recommend Projects

Recommend Topics

Recommend Org

Jobs