{"id":14308,"library":"vue-svg-inline-loader","title":"Vue SVG Inline Loader","description":"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.","status":"maintenance","version":"2.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/oliverfindl/vue-svg-inline-loader","tags":["javascript","vue","vue-cli","laravel-mix","gridsome","nuxt","quasar","webpack","loader"],"install":[{"cmd":"npm install vue-svg-inline-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-svg-inline-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-svg-inline-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for any webpack loader.","package":"webpack","optional":false},{"reason":"Built-in dependency for SVG optimization.","package":"svgo","optional":true}],"imports":[{"note":"This is a Webpack loader, configured within `module.rules` in your Webpack or Vue CLI config, not imported as a JavaScript module.","wrong":"import { VueSvgInlineLoader } from 'vue-svg-inline-loader'","symbol":"Loader Configuration String","correct":"use: ['vue-svg-inline-loader']"},{"note":"All configuration for the loader is passed via the `options` object within the Webpack rule definition.","wrong":"options: svgoConfig: { ... }","symbol":"Loader Options","correct":"options: { svgo: { ... } }"},{"note":"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.","wrong":"test: /\\.svg(\\?inline)?$/","symbol":"SVG File Matching","correct":"test: /\\.svg$/"}],"quickstart":{"code":"/* vue.config.js */\nconst { defineConfig } = require('@vue/cli-service');\n\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n  chainWebpack: config => {\n    // Remove the default SVG loader so vue-svg-inline-loader can take over\n    config.module.rule('svg').uses.clear();\n\n    config.module\n      .rule('vue-svg-inline-loader')\n      .test(/\\.svg$/)\n      .use('vue-svg-inline-loader')\n      .loader('vue-svg-inline-loader')\n      .options({\n        svgo: {\n          plugins: [\n            { removeViewBox: false },\n            { removeDimensions: true }\n          ]\n        },\n        // Example: Add a custom attribute to the inlined SVG\n        addAttributes: {\n          'data-inline-status': 'processed'\n        },\n        // Example: Transform 'src' attribute to a Vue directive\n        transformImageAttributesToVueDirectives: ['src']\n      })\n      .end();\n  }\n});\n\n/* src/components/MyComponent.vue */\n<template>\n  <div>\n    <h1>Hello from MyComponent</h1>\n    <!-- The SVG will be inlined here -->\n    <img\n      src=\"@/assets/logo.svg\"\n      alt=\"Vue logo\"\n      data-svg-inline\n      class=\"my-icon\"\n      @click=\"logClick\"\n    />\n    <p>This is an example of an inlined SVG.</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'MyComponent',\n  methods: {\n    logClick() {\n      console.log('SVG clicked!');\n    }\n  }\n}\n</script>\n\n<style scoped>\n.my-icon {\n  width: 100px;\n  height: auto;\n  fill: #42b983; /* Example styling for the inlined SVG */\n  cursor: pointer;\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"Version 2.0.0 removed the transpiled version of the loader and the `core-js@2` dependency.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Review SVG attribute handling in non-template contexts and adjust if unexpected changes in attribute duplication or removal occur after updating.","message":"A hotfix in v1.3.1 for doubled attribute definitions may introduce breaking changes for developers who used image definitions outside of template tags.","severity":"breaking","affected_versions":">=1.3.1"},{"fix":"Verify that inlined SVGs correctly inherit attributes. If attributes are no longer inherited as expected, adjust your SVG definitions or loader options.","message":"Version 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.","severity":"breaking","affected_versions":">=1.2.11"},{"fix":"Ensure all image tags intended for SVG inlining are located within the `<template>` section of a Vue Single File Component.","message":"The loader only parses HTML template format. SVGs referenced outside of Vue SFC `<template>` blocks will not be processed or inlined.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize the sprite option exclusively within Vue SFCs for proper functionality.","message":"The sprite option for SVG optimization only works when used within the context of a Vue Single File Component (SFC).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'2':18 '2.1.5':72 '3':86 'actual':37 'ad':58 'allow':54 'attribut':56,138 'author':104 'build':120 'built':43 'built-in':42 'cli':91,143 'compat':83 'compon':126 'configur':53 'content':39 'control':134 'creat':88 'current':68 'deep':115 'design':15 'differenti':113 'direct':26,63 'enabl':20 'environ':94 'file':125 'fine':132 'fine-grain':131 'grain':133 'gridsom':147 'handl':61 'high':52 'html':28 'imag':25 'import':75 'includ':114 'inlin':3,9,22,65,109,136 'instead':97 'integr':116,129 'javascript':139 'laravel':145 'laravel-mix':144 'loader':4,10,14,50,80,151 'manipul':57 'mix':146 'note':77 'nuxt':148 'offer':41 'optim':48 'pars':31 'plugin':110 'primari':112 'process':121 'project':19,87 'quasar':149 'recommend':105 'replac':33 'robust':127 'setup':102 'singl':124 'stabl':69 'support':46 'svg':2,8,24,38,108,137 'svgo':45,128 'svgs':66 'tag':32 'templat':29 'titl':59 'util':95 'version':70 'via':89 'vite/rollup':96 'vue':1,7,17,62,85,90,107,123,140,142 'vue-c':141 'vue-svg-inline-load':6 'vue-svg-inline-plugin':106 'webpack':13,99,119,150","created_at":"2026-04-20T01:59:02.078112+00:00","updated_at":"2026-04-20T01:59:02.078112+00:00","problems":[{"fix":"For Vue 3 projects, switch to the `vue-svg-inline-plugin`. For Vue 2 projects, ensure your build system uses Webpack.","cause":"Attempting to use `vue-svg-inline-loader` in a Vue 3 project generated by Vue CLI, which uses Vite/Rollup instead of Webpack.","error":"This loader won't work."},{"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.","cause":"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.","error":"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"},{"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.","cause":"The `data-svg-inline` attribute is missing on the `<img>` tag, the loader configuration is incorrect, or the SVG path is unresolved by Webpack.","error":"SVG image not inlined, appearing as a broken image or a regular `<img>` tag in the browser."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/oliverfindl/vue-svg-inline-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-svg-inline-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}