oliverfindl / vue-svg-inline-loader Goto Github PK
View Code? Open in Web Editor NEWWebpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
License: MIT License
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
License: MIT License
Hi there,
I just ran into this issue: while loading SVGs from relative paths "just works", it doesn't when using an alias path. This is my webpack config:
module: {
rules: [
// ..
{
test: /\.vue$/,
use: [
'vue-loader', {
loader: "vue-svg-inline-loader",
options: {}
}]
},
]
},
resolve: {
// ...
alias: {
// ...
"resources": path.resolve(__dirname, "src/resources"),
// ...
}
},
And in one VUE single file component I'm using the following two. The latter is not working.
<img svg-inline class="icon" src="../../../resources/icons/baseline-equalizer-24px.svg" alt="example" />
<img svg-inline class="icon" src="~resources/icons/baseline-equalizer-24px.svg" alt="example" />
Thank you making this amazing loader. But I met some issue on this loader.
Because async
syntax does not be handled by node.js 6, the build failed.
vue-svg-inline-loader/src/index.js
Line 132 in cba5907
I think it should be transpiler to es5 for older node version.
Any idea?
Thanks again.
Hi. I use your plugin and found next bug:
In component use <img svg-inline svg-sprite src="home-arrow-down.svg" alt="">
and this svg file https://prnt.sc/oz801c.
In output we get svg without defs area (and without linearGradient)
Hello there, I'm not sure if this is an issue with the loader or merely a lack of my understanding. It appears that when I attempt to dynamically load an SVG using the v-bind:src
approach on the image tag, the loader cannot find it.
Loading SVG from src path
<img svg-inline :src="`../../static/images/icon-${game.name}.svg`" />
If I write it in normally src="../../static/images/icon-basketball.svg"
it works.
Loading SVG from build path
I've also tried this:
<img svg-inline :src="`/images/icon-${game.name}.svg`" />
But it ends up just loading up an image tag with the SVG as it's src instead of inlining the SVG.
Any ideas?
When the SVG contains a 'class' attribute, the 'class' attribute got duplicated when we specify additional classes in the tag:
For example:
<img svg-inline class="svg-icon icon" src="eye.svg" alt="Watch" />
Generates:
<svg class="eye icon-eye" svg-inline="" class="svg-icon icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" focusable="false" tabindex="-1"><circle cx="12" cy="12" r="3"/>...
The classes 'eye' and 'icon-eye' are embedded in the SVG.
The compilation fails in this case
Hi,
I love this plugin, I currently use it in every Nuxt project I start.
But I have to use the extends
key inside nuxt.config.js
and copy/paster my config everytime.
I was wondering if it would be possible to add a Nuxt Module export (Something like: vue-svg-inline-loader/nuxt
) so it could work seamlessly with Nuxt.
Hello fellow developers, this is so lovely plugin for me.
I want to use in <temaplte lang="pug">
and img(svg-inline class="icon" src="@/assets/logo-default.svg" alt="alt")
, but it's not work.
Thanks.
Can you use this when loading an image in via a data return like below?
data() {
return {
lightSwitchTickIcon: require('../../images/svgs/toggle-switch-tick.svg'),
}
},
<span v-html="lightSwitchTickIcon"></span>
Right now when I implement it with the src being dynamic it wont work:
in vue:
<li
class="w-1/5 hover:opacity-50"
v-for="(item, index) in $store.state.socialMenu"
v-bind:key="index"
>
<a :href="item.link" class="mr-4 link" target="_blank">
<img
svg-inline
class="icon"
:src="require('~/assets/svg/'+item.icon+'.svg')"
:alt="item.name"
/>
</a>
</li>
What is rendered for the image:
<img svg-inline="" src="/_nuxt/assets/svg/facebook.svg" alt="Facebook" class="icon">
If I hard code in the src like src="~/assets/svg/facebook.svg"
it will work fine but I need to load the images in a loop.
@click.native is not working and thus @click.native.stop is also not working.
Added the following to vue.config.js:
config.module
.rule('vue')
.use('vue-svg-inline-loader')
.loader('vue-svg-inline-loader')
.options({
addAttributes: {
role: 'presentation',
},
});
Expected the resulting HTML to contain this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" svg-inline="" role="presentation">
Instead this was the resulting SVG element:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" svg-inline="" role="presentation" focusable="false" tabindex="-1">
The only way that I found to actually remove default attributes was to utilize removeAttributes
. If I supply an alternative value for a default attribute, then the attribute's value is updated, but the only way to remove is via removeAttributes
.
It is preferable for the default addAttributes
options not to be added if an alternative object is supplied.
I have a problem that when I use this plugin all the defs
variable id
s all get minified to things like a
, b
, c
, ... and this is the same for every svg on the page. This is causing problems that wrong variables are used since they all overlap now.
Is there any way to prevent this from happening?
I'm using Laravel Mix and merged the webpack config example with it... I got it to replace the img but it's a line of javascript that's commented out...
Logo.vue:
<template>
<img svg-inline src="imgs/logo-black.svg" class="fill-current text-red-500">
</template>
Laravel Mix Config:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('resources/imgs', 'public/imgs')
.options({
processCssUrls: false,
postCss : [
tailwindcss('resources/sass/tailwind.config.js'),
discardComments({removeAll: true}),
],
})
.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
},
{
loader: 'vue-svg-inline-loader',
}
]
}
]
}
});
What it's injecting into my HTML:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
Any ideas what I may have done wrong?
I'm passing an imported SVG as a prop to my component. However my component is just rendering the <img />
tag rather than converting to a SVG.
<template>
<div>
<child-component :svg="SVG" />
</div>
</template>
<script>
import SVG from '@/assets/svgs/my-svg.svg';
export default {
data: () => ({
SVG
})
}
</script>
<template>
<div>
<img svg-inline :src="parentSVG" />
</div>
</template>
<script>
export default {
props: {
type: String,
required: true,
}
}
</script>
<img svg-inline="" src="/_nuxt/assets/svgs/my-svg.svg">
I'm using the standard nuxt config.
I've recently released a query builder library and I'm using this package for inlining one svg file.
It works fine, however while preparing documentation and Travis CI, I've noticed that since I've added the package, all tests are failing with the error message:
● Test suite failed to run
Cannot find module '/home/rtucek/projects/query-builder/node_modules/@vue/babel-preset-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'QueryBuilder.vue'
I've been able to bisect the error to this commit (rtucek/vue-query-builder@bc037c1) - which is where I added this package.
Hi,
It would be nice if we could add our own custom attrs to the SVG that is replaced via the config.
For example, we have an issue in IE11 where we need to add tabindex ="-1" and focusable="false"
I'm trying to add new icons but these don't work
the old ones work normally
old SVG
<svg id="shopping-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M24.17 26.86a4.03 4.03 0 1 1 4.03-4.02 4.03 4.03 0 0 1-4.03 4.02zm0-5.37a1.34 1.34 0 1 0 1.35 1.35 1.34 1.34 0 0 0-1.35-1.35zM12.09 26.86a4.03 4.03 0 1 1 4.03-4.02 4.03 4.03 0 0 1-4.03 4.02zm0-5.37a1.34 1.34 0 1 0 1.34 1.35 1.34 1.34 0 0 0-1.34-1.35z"/><path d="M9.4 4.03l.67 2.68H28.4l-2.57 9.4H10.45L6.93 2.05A2.68 2.68 0 0 0 4.33 0H1.33a1.34 1.34 0 0 0 0 2.69h2.98l3.52 14.08a2.69 2.69 0 0 0 2.6 2.03h15.4a2.69 2.69 0 0 0 2.58-1.98l3.5-12.8z"/>
</svg>
new SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22"><defs><style>.a,.c{fill:none;}.a{stroke:#707070;}.b{clip-path:url(#a);}.c{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25px;}</style><clipPath id="a"><rect class="a" width="22" height="22" transform="translate(425 24)"/></clipPath></defs><g class="b" transform="translate(-425 -24)"><g transform="translate(425.75 25.06)"><path class="c" d="M5,15.937h8.267A1.25,1.25,0,0,0,14.5,14.9L16.7,1.98A1.25,1.25,0,0,1,17.93.94h.82"/><path class="c" d="M6.562,17.812a.312.312,0,1,1-.312.313.312.312,0,0,1,.312-.312"/><path class="c" d="M12.812,17.812a.312.312,0,1,1-.312.313.312.312,0,0,1,.312-.312"/><path class="c" d="M14.961,12.187H4.9a2.5,2.5,0,0,1-2.425-1.893L1.268,5.461a.625.625,0,0,1,.607-.777H16.237"/></g></g></svg>
error in build
ERROR in ./Assets/js/Components/Header/Menu/menuConversion.vue?vue&type=template&id=766d3104& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/src!./Assets/js/Components/Header/Menu/menuConversion.vue?vue&type=template&id=766d3104&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Errors compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
Prior to v1.3.0 you could use any atributes in the <img>
tag declaration and these would be preserved during the <svg>
transformation. 😢
Now all attributes are being removed in favor of the new addAttributes
option. This is a problem if you've had different attributes values and properties per icon.
There is also another breaking change that class values are being transformed to lowercase, and since CSS is case-sensitive this break any icon that use a style name such as class="fooBar"
.
config/webpack/loaders/vue.js:
module.exports = {
test: /\.vue(\.erb)?$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
whitespace: 'condense'
}
}
},
{
loader: 'vue-svg-inline-loader',
options: {
inline: {
keyword: 'svg-inline',
strict: true
}
}
}
]
}
Vue component:
<template>
<img svg-inline :src="path" />
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
},
computed: {
path() {
return require(`@images/icons/${this.name}.svg`)
}
}
}
</script>
Result:
<img svg-inline="" src="/packs/media/images/icons/dog-foe3f829e55a0c71152f203a9660dsb3.svg">
Why is embedding not working? I see the image, but this is not an inline svg.
Hi,
Any plan to support Vue 3 and Vite ?
I know you recommend using vue-svg-inline-plugin in the README, but that package is quite different.
With the recommended package, I have to import the SVG in the <script>
, define it as a component in the option API or use defineComponent
in setup and then use it as a Vue component in the <template>
.
I liked this plugin because it still used plain <img />
tag instead of Vue component, and I could use the SVG directly instead of have to do 2 prior step every time (import, define component).
all images even without 'svg-inline' attribute are replaced to inline svg because options.strict equals undefined, it should be options.inlineStrict in this condition:
if(options.strict && !PATTERN_INLINE_KEYWORD.test(image)) { return image; }
Get the error below:
│ Error: Cannot find module 'vue-svg-inline-loader/nuxt' │
I think its because in your packages.json you have not included the nuxt
folder in the files
so it doesn't come down when you install via npm.
As shown here.
alt
attribute should be translated into a <title>
tag into the SVG (support is very good)role="img"
should be addedI added inline svg file.
SVG source:
<svg width="33px" height="31px" viewBox="0 0 33 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Home</title>....
Add code
<img svg-inline class="icon" src="../assets/icons/home.svg" />
after render
<svg svg-inline="" role="presentation" focusable="false" width="33" height="31" xmlns="http://www.w3.org/2000/svg" class="icon">
I don't resize SVG with CSS due to remove viewbox attribute
I feel like I'm going insane but I can't figure out how to remove tabindex
etc.
also, src
is not being removed either
this is my config for gridsome:
chainWebpack(config) {
config.module
.rule('vue')
.use('vue-svg-inline-loader')
.loader('vue-svg-inline-loader')
.options({
removeAttributes: ['width', 'height', 'alt', 'src'],
addAttributes: {
focusable: false,
},
});
}
I'm having an issue running development mode. I have recently added Vue Styleguidist to my project and I use <docs>
tag in my .vue
components. Everything works as expected when I build a styleguide, but when I try running development then my build fails.
Now I have been poking at this and it seems that this loader is the issue, when I remove it then the build succeeds
in ./src/common/Forms/InputField.vue?vue&type=custom&index=0&blockType=docs
Module parse failed: Unexpected token (113:3)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
* ./node_modules/vue-svg-inline-loader/dist/index.min.js
You may need an additional loader to handle the result of these loaders.
|
|
> My docs
|
I really want to know how this plugin handles the style attribute in two SVG icons, including the class with the same name .
for example :
svg-1: { .class-one }
svg-2: { .class-one }
Thank for this cool package!
I just upgraded my gridsome app and it now fails to compile (using yarn
) with the following errors
ERROR Failed to compile with 67 errors 6:27:45 PM
These dependencies were not found:
* core-js/modules/es.array.concat in ./node_modules/gridsome/app/fetch.js, ./node_modules/gridsome/app/head.js and 2 others
* core-js/modules/es.array.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/es.array.from in ./node_modules/gridsome/app/directives/image.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.index-of in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.is-array in ./node_modules/gridsome/app/router.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.join in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.array.map in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/router.js and 2 others
* core-js/modules/es.array.reduce in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.slice in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js and 1 other
* core-js/modules/es.date.to-string in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/layouts/Default.vue?vue&type=script&lang=js&
* core-js/modules/es.function.name in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/fetch.js and 1 other
* core-js/modules/es.number.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.object.to-string in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 4 others
* core-js/modules/es.regexp.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.regexp.exec in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 2 others
* core-js/modules/es.regexp.to-string in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.string.ends-with in ./node_modules/gridsome/app/directives/image.js
* core-js/modules/es.string.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 2 others
* core-js/modules/es.string.link in ./node_modules/gridsome/app/head.js
* core-js/modules/es.string.replace in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.search in ./node_modules/gridsome/app/entry.client.js
* core-js/modules/es.string.split in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.starts-with in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 1 other
* core-js/modules/es.string.trim in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.symbol in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.description in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.iterator in ./node_modules/gridsome/app/app.js
* core-js/modules/web.dom-collections.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/web.dom-collections.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js
If I completely remove vue-svg-inline-loader
, everything works again.
yarn list --depth 0
:
yarn list v1.22.0
,,,
├─ @babel/[email protected]
├─ @babel/[email protected]
...
├─ @gridsome/[email protected]
...
├─ [email protected]
├─ [email protected]
├─ [email protected]
...
├─ [email protected]
...
├─ [email protected]
I feel that the issue is due to the usage of the 2.*
version of core-js
(wanted by this plugin) while gridsome 0.7 requires "@vue/babel-preset-app@^4.2.2
which expects core-js@^3.6.4
.
This is probably related to gridsome/gridsome#982...
Is there any way to make this plugin use core-js
3 ? (or any better way to fix this?)
Assume I have an svg sprite file with 100 icons in it. normally I use it like this:
<svg class="icon icon-arrow-bottom-icon ">
<use xlink:href="/static/app/images/icons/sprite-inline.svg#arrow-bottom-icon"></use>
</svg>
using absolute path and therefore loading it by separate load.
does your inline loader allow us to include this whole sprite inline? how?
Installing the latest version, npm shows that deprecated Babel libraries are being used:
-> % npm update
npm WARN deprecated @babel/[email protected]: 🚨 As of Babel 7.4.0, this
npm WARN deprecated package has been deprecated in favor of directly
npm WARN deprecated including core-js/stable (to polyfill ECMAScript
npm WARN deprecated features) and regenerator-runtime/runtime
npm WARN deprecated (needed to use transpiled generator functions):
npm WARN deprecated
npm WARN deprecated > import "core-js/stable";
npm WARN deprecated > import "regenerator-runtime/runtime";
+ [email protected]
when i yarn install, i got a warning
warning vue-svg-inline-loader > @babel/[email protected]: 🚨 As of Babel 7.4.0, this
package has been deprecated in favor of directly
including core-js/stable (to polyfill ECMAScript
features) and regenerator-runtime/runtime
(needed to use transpiled generator functions):
> import "core-js/stable";
> import "regenerator-runtime/runtime";
after that after build project i found all svgs as separate files in dist.
what am I doing wrong?
in vue.config.js
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-svg-inline-loader')
.loader('vue-svg-inline-loader')
.options({ /* ... */ });
},
yarn versions v1.12.3{ yarn: '1.12.3',
client_user:
'0.1.0',
node:
'11.5.0',
v8:
'7.0.276.38-node.13',
uv:
'1.24.0',
zlib:
'1.2.11',
ares:
'1.15.0',
modules:
'67',
nghttp2:
'1.34.0',
napi:
'3',
llhttp:
'1.0.1',
http_parser:
'2.8.0',
openssl:
'1.1.0j',
icu:
'63.1',
unicode:
'11.0',
cldr:
'34.0',
tz:
'2018e' }
Done in 0.10s.
Hi (again), sorry to bother you, but after I added your loader and put this code in my template
<img svg-inline svg-sprite class="icon icon-arrow-bottom-icon" src="@/assets/images/sale.svg" alt="svgicons"/>
I've got this warning in devtools console and my app stopped working (just plain whitescreen)
"vue.esm.js?efeb:591 [Vue warn]: Failed to mount component: template or render function not defined."
the loader was added right after vue-loader
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.vue$/,
use: [
"vue-loader",
{
loader: "vue-svg-inline-loader"
},
]
},
....
and the vueLoaderConfig is:
{
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
Hi there!
I has a few svgs with the same id attributes and different styles. So when I insert them inline - styles from one svg applies to other with the same id's (and its looks logically right), but do we have the way to incapsulate styles and id's inside the svg tag before converting them to inline? Can we add some "scoped: true" option to svg-inline directive or something like this?)
chainWebpack: config => {
config.resolve.modules.add(appSrc);
config.module
.rule('vue')
.use('vue-svg-inline-loader')
.loader('vue-svg-inline-loader')
.options({
inline: {
strict: false,
},
});
config.resolve.alias.set(
'ui.css',
pathResolve(appSrc, 'constants', 'ui.css'),
);
/* version */
config.plugin('define').tap(definitions => {
// eslint-disable-next-line no-param-reassign
definitions[0] = Object.assign(definitions[0], {
__VERSION__: JSON.stringify(appPackageJson.version),
});
return definitions;
});
const eslintRule = config.module.rule('eslint');
eslintRule.uses.clear();
config
.plugin('NormalModuleReplacementPlugin')
.use(webpack.NormalModuleReplacementPlugin, [
/element-ui[/\\]lib[/\\]locale[/\\]lang[/\\]zh-CN/,
'element-ui/lib/locale/lang/ru-RU',
]);
},
<li :class="$style.menuItem">
<div :class="[$style.icon, $style.menuIcon]">
<img
svg-inline
src="./img/profile.svg"
>
</div>
<div :class="$style.name">
<span>{{ userNameShort }}</span>
</div>
</li>
No errors, but doest not inline it
Hi!
I receive this notification when I ran npm audit
.
npm audit
# npm audit report
nth-check <2.0.1
Severity: moderate
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
No fix available
node_modules/vue-svg-inline-loader/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/vue-svg-inline-loader/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/vue-svg-inline-loader/node_modules/svgo
vue-svg-inline-loader *
Depends on vulnerable versions of svgo
node_modules/vue-svg-inline-loader
4 moderate severity vulnerabilities
Can you please update the svgo version this package is using?
Thanks!
I'm trying to put an example on how to use this loader into one of my Vue files comment, but build fails because inlining happens even inside comments (even inside script
and style
tags, actually).
Is there a way to limit inlining to template
tag and avoid it when inside comments?
Eg these will both break build process.
// Ex. <img svg-inline src="../path/to/icon.svg" alt="Title"/>
<!-- Ex. <img svg-inline src="../path/to/icon.svg" alt="Title"/> -->
/* Ex. <img svg-inline src="../path/to/icon.svg" alt="Title"/> */
Hello there, I have a problem when rendering svgs in my nuxt project. It always shows me the following warning in the browser console:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
I am using the default config from the Readme file.
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
});
const vueRule = config.module.rules.find(rule => {
return rule.test.test('.vue');
});
vueRule.use = [
{
loader: vueRule.loader,
options: vueRule.options,
},
{
loader: 'vue-svg-inline-loader',
},
];
delete vueRule.loader;
delete vueRule.options;
}
},
},
Is there anything wrong with the configuration or am I just missing anything or is it supposed to be like that?
Thanks in advance!
Not seeing a Contributing file or issue template so I'll do my best to be thorough.
OS: Windows 10
Browser: IE 11
Error: SyntaxError: Multiple definitions of a property not allowed in strict mode
Stack Trace:
SyntaxError: Multiple definitions of a property not allowed in strict mode
at ./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-svg-inline-loader/src/index.js?!./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:71:1)
at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
at eval code (eval code:2:22)
at ./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:201:1)
at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
at eval code (eval code:2:22)
at ./src/js/templates/component.vue (http://localhost:3000/components.min.js:177:1)
at __webpack_require__ (http://localhost:3000/app.min.js?0e8"
Steps to replicate:
svg-inline
attribute on multiple babel
and core-js
which inject use strict
automatically.The affected component does not render, but others do. This issue is not present in any other browser, but occurs in IE anytime the plugin is used more than once per chunk in Webpack. When SVGs are embedded manually into components, the issue goes away. We need to support IE so I had to remove the plugin for now, but obviously embedding SVGs manually isn't ideal so I'd appreciate if someone could look into this.
If I were to speculate this seems to create multiple instances (1 for each SVG) with the same identifier when compiled by Webpack, but I'm not 100% certain if I'm on the right track.
Hi,
There is an issue with parsing of math operator.
The plugin think that my ">" (greater than) symbol is the end of the opening tag of the root element and append the sprite to this location which break the whole page.
Greater than symbol inside string (v-if, v-show or ternary js operator) should be ignored.
Source code:
<template>
<div v-if="lastItem > 10">
<!-- more -->
</div>
</template>
Compiled code:
<template>
<div v-if="lastItem ><svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"><symbol id="sprite-6e59d10b0d068a69ed07029d53a15aef" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M0 5l6-5v10z" fill-rule="evenodd"/></symbol><symbol id="sprite-83def3b2274096294fe2023b84cc1ed6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M6 5l-6 5V0z" fill-rule="evenodd"/></symbol></svg> 10">
<!-- more -->
</div>
</template>
Expected result:
<template>
<div v-if="lastItem > 10">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"><symbol id="sprite-6e59d10b0d068a69ed07029d53a15aef" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M0 5l6-5v10z" fill-rule="evenodd"/></symbol><symbol id="sprite-83def3b2274096294fe2023b84cc1ed6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path data-name="Polygone 2 copie 4 copy 2 copie" d="M6 5l-6 5V0z" fill-rule="evenodd"/></symbol></svg>
<!-- more -->
</div>
</template>
it would be great if this could be updated to either svgo 2 or even remove svgo in the next major version. right now, there are unfixable vulnerabilities, even if you don't make use of the svgo feature:
npm audit fix
shows:
No fix available
node_modules/vue-svg-inline-loader/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/vue-svg-inline-loader/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/vue-svg-inline-loader/node_modules/svgo
vue-svg-inline-loader *
Depends on vulnerable versions of svgo
node_modules/vue-svg-inline-loader
4 high severity vulnerabilities
Hey there, we found out that there's a bug while using this loader with Quasar regarding async components CSS extraction
freddy38510/quasar-app-extension-ssg#162 (comment)
quasarframework/quasar#13169 (comment)
This only becomes evident when using SSR/SSG, as you experience a FOUC
The example to use this loader with Quasar should be updated as follows
extendWebpack(cfg) {
const vueRuleIdx = cfg.module.rules.findIndex(
({ test }) => test.toString() === /\.vue$/.toString(),
);
cfg.module.rules[vueRuleIdx].use.push({
loader: 'vue-svg-inline-loader',
options: { /* ... */ },
})
}
Not sure if the chainWebpack
version needs to be updated, but its usage is a bit buggy as that project hasn't been migrated to webpack 5 yet, so I'd just remove that one
This is not a direct issue but I struggle configuring this with laravel mix. I implemented this in the frontend, on Vue2, and I used the basic webpack config file. In the meantime, the dev team implemented the backend on Laravel along with Laravel-mix. Since then, vue-svg-inline-loader has stopped working. I think the culprit is the misconfiguration, as with laravel mix I do not have the "vue.config.js" file anymore, but I have "webpack.mix.js".
I tried this:
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader",
options: { /* ... */ }
},
{
loader: "vue-svg-inline-loader",
options: { /* ... */ }
}
]
},
]
},
});
and
mix.webpackConfig({
module : {
rules : [
{
use : [
'vue-svg-inline-loader',
{
loader: 'vue-svg-inline-loader',
options : {}
},
]
},
]
},
});
What am I missing?
Thank you
If my component has two root-nodes shown conditionally (this is valid as only one is shown at a time), my svg will always be in the v-else.
<template>
<div v-if="someCondition">
<img svg-inline src="...">
</div>
<div v-else>
<!-- Sprite will be inserted here -->
</div>
</template>
I upgraded my dependencies and I have some issues with the latest version (1.4.6).
By testing the older releases, it appears that the bug got introduced on version 1.3.0 (1.2.18 works fine).
My code:
<img
svg-inline
src="../../assets/icon.svg"
class="fill-current menu-icon"
:class="{ 'text-red-900': !active }"
/>
Expected output: <svg>
tag with at least the static classes (fill-current menu-icon
)
Instead I get: the static part is removed, only the :class
part is respected (
)
Interestingly, if I make a trivial modification to the class (add a whitespace for instance), the hot-reload injects the updated static classes and everything looks fine again.
Furthermore, if I replace :class
with v-bind:class
duplicate attribute: v-bind:class
Errors compiling template:
invalid expression: Unexpected identifier in
'key === 'accessible''
Raw expression: v-bind:v-if="'key === 'accessible''"
64 | />
65 | <label :for="`${key}-${value[0].values.value}`">
66 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:v-if="'key === 'accessible''" v-bind:class="'accessible-icon'" v-bind:inline="''" v-bind:width="'14'" v-bind:height="'18'" v-bind:role="'presentation'" v-bind:focusable="'false'" v-bind:tabindex="'-1'"><use xlink:href="#sprite-fea294286c726087cd11bc05970d5a88" href="#sprite-fea294286c726087cd11bc05970d5a88"></use></svg>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 | {{ $t(key) }} ({{ value[0].values.count }})
68 | </label>
data() {
return {
tabs: [
{
name: this.$t('device_models.tabs.hca'),
icon: '<img svg-inline src="assets/icons/hca.svg">',
categories: { meter_type_keys: 'heat_cost_allocator' },
},
};
},
<div class="device-models__tab">
{{ tab.icon }}
</div>
SyntaxError: /Users/gk/repos/mh-platform/app/javascript/manager/components/device-models.vue: Unexpected token, expected "," (47:132)
45 | name: this.$t('device_models.tabs.hca'),
46 | path: '/device-models/hca',
> 47 | icon: '<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind:svg-inline="''" v-bind:role="'presentation'" v-bind:focusable="'false'" v-bind:tabindex="'-1'"><path d="M0 0h42v42H0V0z" fill="#fff" fill-opacity=".01"/><path d="M0 0h42v42H0V0z" stroke="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 3a1 1 0 00-1 1v34a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1H15zm12 6H15v4h12V9zM15 7a1 1 0 112 0 1 1 0 01-2 0zm4-1a1 1 0 100 2 1 1 0 000-2z" fill="#4A4A4A"/><path d="M19 10h1v2h-1v-2zM20.478 10h1v2h-1v-2zM21.957 10h1v2h-1v-2zM23.435 10h1v2h-1v-2zM24.914 10h1v2h-1v-2z" fill="#4A4A4A"/></svg>',
| ^
48 | categories: { meter_type_keys: 'heat_cost_allocator' },
49 | },
50 | {
Hello fellow developers,
to make it short, there is no efficient way Webpack can handle this situation. Please use Vue plugin vue-svg-inline-plugin or vue-svg-inline-component instead.
Thanks.
默认的静态资源解析会对"~"开头的做npm包路径替换.
是不是需要加一下
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.