Comments (5)
@Chucheen We solved this at Fueled by using the oneOf
functionality within Webpack:
{
test: /\.svg$/,
oneOf: [
{
resourceQuery: /inline/, // foo.svg?inline
loader: 'vue-svg-loader',
options: {
// optional [svgo](https://github.com/svg/svgo) options
svgo: {
plugins: [
{
removeViewBox: false
}
]
}
}
},
{
loader: 'file-loader',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
},
]
},
You then import them slightly differently for the different types
import imageSrc from 'path/to/image/example.svg';
import ImageComponent from 'path/to/image/example.svg?inline;
…
components: {
ImageComponent,
},
data() {
return {
src: imageSrc,
},
},
…
<img :src="src" />
<image-component />
from vue-svg-loader.
At this moment, i had to duplicate/change the extension for the files that i want to put inline from .svg to .inlinesvg and configure the loader as follows:
module.exports = {
test: /\.inlinesvg$/,
loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
options: {
// optional [svgo](https://github.com/svg/svgo) options
svgo: {
plugins: [
{removeDoctype: true},
{removeComments: true}
]
}
}
};
Is there any other way? It feels hacky
from vue-svg-loader.
Btw, i can't use 0.5.0 because of my vue version.
from vue-svg-loader.
Awesome! thanks @robsterlini! exactly what I was looking for!
from vue-svg-loader.
Thank you all! I added the section about this case in the docs:
https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs
from vue-svg-loader.
Related Issues (20)
- svgo options not working in webpack config
- [Question] Some objects in the SVG are being removed HOT 4
- Please create a new version to support svgo 2.x HOT 7
- SVG is missing parent's data-v attribute?
- Component is missing template or render function. HOT 1
- Syntax error on build HOT 4
- Relative module not found! HOT 4
- Module not found: Error: Can't resolve 'vue-loader-v16' HOT 1
- Security vulnerability - nth-check dependency HOT 1
- Syntax Error: NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag. HOT 1
- Nuxt 3 support HOT 9
- Vuecli 5.x support HOT 7
- Loading svgs from different packages
- vue3 error HOT 5
- Is this project still being maintained? HOT 5
- Vue packages version mismatch
- nuxt3 can use? HOT 1
- [Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'createElement' on 'Document' HOT 1
- Allow loading SVG images from HTML without breaking the current syntax (Nuxt) HOT 2
- Mark the component as Raw or use shallowRef
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-svg-loader.