Registry / web-framework / vue-svg-inline-loader

vue-svg-inline-loader

JSON →
library2.1.5jsnpmunverified

The `vue-svg-inline-loader` is a Webpack loader designed for Vue 2 projects, enabling the inlining of SVG images directly into HTML templates. It parses `<img>` tags, replaces them with the actual SVG content, and offers built-in SVGO support for optimization. The loader is highly configurable, allowing for attribute manipulation, adding titles, and handling Vue directives on inlined SVGs. The current stable version is 2.1.5. It's important to note that this loader is *not compatible* with Vue 3 projects created via Vue CLI, as those environments utilize Vite/Rollup instead of Webpack; for such setups, the author recommends `vue-svg-inline-plugin`. Its primary differentiators include deep integration with the Webpack build process for Vue Single File Components, robust SVGO integration, and fine-grained control over inlined SVG attributes.

web-framework
npm install vue-svg-inline-loader
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-SVG-INLINE-LOA
V
vue-svg-inline-loader
web-frameworkjavascriptv2.1.5
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Loader Configuration String
✓ use: ['vue-svg-inline-loader']
✗ import { VueSvgInlineLoader } from 'vue-svg-inline-loader'
This is a Webpack loader, configured within `module.rules` in your Webpack or Vue CLI config, not imported as a JavaScript module.
Loader Options
✓ options: { svgo: { ... } }
✗ options: svgoConfig: { ... }
All configuration for the loader is passed via the `options` object within the Webpack rule definition.
SVG File Matching
✓ test: /\.svg$/
✗ test: /\.svg(\?inline)?$/
While `test: /\.svg(\?inline)?$/` was previously common to target specific inline requests, the loader typically processes all `.svg` files within its configured rule, assuming an `<img>` tag with the appropriate `data-svg-inline` attribute.

Demonstrates configuring `vue-svg-inline-loader` in a Vue CLI (Webpack-based) project to inline SVG assets, applying SVGO optimizations, and showing a basic Vue component usage with an `<img>` tag that will be replaced.

/* vue.config.js */ const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, chainWebpack: config => { // Remove the default SVG loader so vue-svg-inline-loader can take over config.module.rule('svg').uses.clear(); config.module .rule('vue-svg-inline-loader') .test(/\.svg$/) .use('vue-svg-inline-loader') .loader('vue-svg-inline-loader') .options({ svgo: { plugins: [ { removeViewBox: false }, { removeDimensions: true } ] }, // Example: Add a custom attribute to the inlined SVG addAttributes: { 'data-inline-status': 'processed' }, // Example: Transform 'src' attribute to a Vue directive transformImageAttributesToVueDirectives: ['src'] }) .end(); } }); /* src/components/MyComponent.vue */ <template> <div> <h1>Hello from MyComponent</h1> <!-- The SVG will be inlined here --> <img src="@/assets/logo.svg" alt="Vue logo" data-svg-inline class="my-icon" @click="logClick" /> <p>This is an example of an inlined SVG.</p> </div> </template> <script> export default { name: 'MyComponent', methods: { logClick() { console.log('SVG clicked!'); } } } </script> <style scoped> .my-icon { width: 100px; height: auto; fill: #42b983; /* Example styling for the inlined SVG */ cursor: pointer; } </style>
Debug
Known issues
gotchaThis loader is incompatible with Vue 3 projects created via Vue CLI as they use Vite (Rollup) instead of Webpack. It only supports Webpack-based Vue projects.
fix
For Vue 3 projects, switch to the `vue-svg-inline-plugin` which is designed for Vite environments. For existing Vue 2 projects, ensure your build environment uses Webpack.
affects: >=2.0.0
breakingVersion 2.0.0 removed the transpiled version of the loader and the `core-js@2` dependency.
fix
No direct consumer fix needed if your environment supports ES6. If you were relying on the loader's transpiled output or `core-js@2`, update your own build process or `core-js` dependency.
affects: >=2.0.0
breakingA hotfix in v1.3.1 for doubled attribute definitions may introduce breaking changes for developers who used image definitions outside of template tags.
fix
Review SVG attribute handling in non-template contexts and adjust if unexpected changes in attribute duplication or removal occur after updating.
affects: >=1.3.1
breakingVersion 1.2.11 fixed a bug where original SVG attributes were incorrectly used by referencing the SVG rather than the symbol itself. This may introduce breaking changes for developers who relied on this buggy behavior.
fix
Verify that inlined SVGs correctly inherit attributes. If attributes are no longer inherited as expected, adjust your SVG definitions or loader options.
affects: >=1.2.11
gotchaThe loader only parses HTML template format. SVGs referenced outside of Vue SFC `<template>` blocks will not be processed or inlined.
fix
Ensure all image tags intended for SVG inlining are located within the `<template>` section of a Vue Single File Component.
affects: >=1.0.0
gotchaThe sprite option for SVG optimization only works when used within the context of a Vue Single File Component (SFC).
fix
Utilize the sprite option exclusively within Vue SFCs for proper functionality.
affects: >=1.0.0
Errors
Common errors & fixes
This loader won't work.
Attempting to use `vue-svg-inline-loader` in a Vue 3 project generated by Vue CLI, which uses Vite/Rollup instead of Webpack.
fix
For Vue 3 projects, switch to the `vue-svg-inline-plugin`. For Vue 2 projects, ensure your build system uses Webpack.
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Webpack is not configured to process SVG files with `vue-svg-inline-loader`, or a conflicting loader (e.g., `file-loader`, `url-loader`) is still active for `.svg` files.
fix
Ensure your webpack configuration (e.g., `vue.config.js`) explicitly includes a rule for `.svg` files that uses `vue-svg-inline-loader`, and that any default or other SVG loaders are properly excluded or cleared for those files.
SVG image not inlined, appearing as a broken image or a regular `<img>` tag in the browser.
The `data-svg-inline` attribute is missing on the `<img>` tag, the loader configuration is incorrect, or the SVG path is unresolved by Webpack.
fix
Add the `data-svg-inline` attribute to the `<img>` tag (or configure the loader to use a different attribute via `transformImageAttributesToVueDirectives`). Verify the loader is correctly applied in `vue.config.js` and the SVG path is resolvable by Webpack.
Upgrade
Version history
2.1.5latest on npm
Audit
Dependencies
webpackrequiredRequired as a peer dependency for any webpack loader.
svgooptionalBuilt-in dependency for SVG optimization.
Agent activity
13 hits · last 30 days
node
12
OpenAI (training)
1
Resources
githubhttps://github.com/oliverfindl/vue-svg-inline-loader ↗
packagehttps://www.npmjs.com/package/vue-svg-inline-loader ↗
vue-svg-inline-loader — npm install vue-svg-inline-loader · libregistry