vue-svg-inline-loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Loader parses only HTML template format.
Loader has built-in SVGO support for SVG optimization.
Sprite option works only with Vue Single File Component approach.
Vue CLI
Vue 3 projects created via Vue CLI aren't built on top of Webpack, they use Vite (which is build on top of Rollup) instead. In this case, this loader won't work. Please take a look at vue-svg-inline-plugin, which works similar to this loader.
Notable changes
- v2.1.0
- Added new option: cloneAttributes
- v2.0.0
- Removed transpiled version
- Removed core-js@2 dependency
- Recreated all examples (except vanilla Webpack one) with up-to-date CLIs
- v1.5.0
- Added new option: transformImageAttributesToVueDirectives
- Added new option: verbose
- v1.4.4
- Updated order of attributes operations
- v1.4.0
- Added new option: addTitle
- Fixed issue with lowercase-ing attribute values
- v1.3.1
- Hotfixed issue with doubled attribute definitions on SVG node. This may introduce breaking changes for developers who used image definitions outside of template tag.
- v1.3.0
- Added new option: addAttributes
- v1.2.17
- Add example usage configuration for laravel-mix based projects
- v1.2.16
- Added example for quasar based projects
- v1.2.14
- Added example for gridsome based projects
- v1.2.11
- Fixed a bug where original svg attributes were used by referencing svg rather than symbol itself. This may introduce breaking changes for developers who rely on this bugged behavior.
- v1.2.6
- Modified default value of svgo option to preserve viewBox attribute
- Modified svgo option to accept
truevalue as alias for default configuration
- v1.2.5
- Modified svgo option to accept
nullorfalsevalue for disabling SVG optimization
- Modified svgo option to accept
- v1.2.3
- v1.2.0
- Upgraded Babel to version 7
- Refactored code to ES6 syntax
- Added new option: dataAttributes
- Options are now deep-merged
- v1.1.3
- Added transpiled version of loader
- v1.1.0
- Added new option: md5
- v1.0.8
- Options structure changed, deprecated options still get parsed to new ones
- v1.0.0
- Initial release based on my img-svg-inline-loader project
Install
$ npm install vue-svg-inline-loader --save-dev
$ yarn add vue-svg-inline-loader --dev
Usage
With webpack - webpack.config.js (recommended):
// webpack
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader",
options: { /* ... */ }
},
{
loader: "vue-svg-inline-loader",
options: { /* ... */ }
}
]
}
]
}
};
With vue-cli - vue.config.js:
With gridsome - gridsome.config.js:
With quasar - quasar.conf.js:
// vue-cli, gridsome, quasar
module.exports = {
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-svg-inline-loader")
.loader("vue-svg-inline-loader")
.options({ /* ... */ });
}
};
With nuxt - nuxt.config.js:
// nuxt
module.exports = {
build: {
extend(config) {
const vueRule = config.module.rules.find(({ test }) => test.toString() === /\.vue$/i.toString());
vueRule.use = [
{
loader: vueRule.loader,
options: vueRule.options
}, {
loader: "vue-svg-inline-loader",
options: { /* ... */ }
}
];
delete vueRule.loader;
delete vueRule.options;
}
}
};
With quasar - quasar.conf.js:
// quasar
module.exports = {
build: {
extendWebpack(config) {
const vueRule = config.module.rules.find(({ test }) => test.toString() === /\.vue$/.toString());
vueRule.use.push({
loader: "vue-svg-inline-loader",
options: { /* ... */ }
});
}
}
};
With laravel-mix - webpack.mix.js:
// laravel-mix
const mix = require("laravel-mix");
mix.override(config => {
config.module.rules.push({
test: /\.vue$/,
use: [{
loader: "vue-svg-inline-loader",
options: { /* ... */ }
}]
})
});
Basic inline SVG usage with svg-inline keyword directive:
<img svg-inline class="icon" src="./images/example.svg" alt="example" />
3 Dec 28, 2021
46 Oct 13, 2022
267 Dec 18, 2022
28 Oct 16, 2022
18 Jun 21, 2022
0 Dec 2, 2019
808 Jan 5, 2023
5 Jan 31, 2022
4 Aug 25, 2022
5 Mar 29, 2022
60 Dec 7, 2022
57 Jul 19, 2022
24 Sep 9, 2022
65 Dec 22, 2022
84 Dec 19, 2022
3 Nov 11, 2022
25 Dec 5, 2020
327 Jan 1, 2023
7 Dec 12, 2022