{"id":12589,"library":"vue-svg-loader-2","title":"vue-svg-loader-2: SVG as Vue Components","description":"The `vue-svg-loader-2` package is a webpack loader designed to enable the direct import and usage of SVG files as Vue components within web applications. It serves as a actively maintained fork of the original `vue-svg-loader`, ensuring continued compatibility with modern build environments and addressing dependency updates. The current stable version is 0.17.1. While there isn't a strict, predictable release cadence, the project demonstrates ongoing activity through consistent dependency updates and minor fixes, indicating active maintenance. Its primary utility lies in simplifying the integration of SVGs into Vue applications, allowing developers to leverage Vue's component system for features like props, slots, and reactivity. It integrates seamlessly with popular webpack-based setups such as Vue CLI and Nuxt.js, and includes internal SVG optimization capabilities via SVGO.","status":"active","version":"0.17.1","language":"javascript","source_language":"en","source_url":"https://github.com/gammacommunications/vue-svg-loader-2","tags":["javascript","vue-svg-loader-2","vue-svg-loader","svg","svgo","loader","webpack","vue"],"install":[{"cmd":"npm install vue-svg-loader-2","lang":"bash","label":"npm"},{"cmd":"yarn add vue-svg-loader-2","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-svg-loader-2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the generated SVG components to function within a Vue application environment.","package":"vue","optional":false}],"imports":[{"note":"After webpack configuration with `vue-svg-loader-2`, importing an `.svg` file directly makes it available as a Vue component, which is exposed as a default export from the generated module.","wrong":"import { MyIcon } from './assets/my-icon.svg';","symbol":"SvgComponent","correct":"import MyIcon from './assets/my-icon.svg';"},{"note":"The loader itself is configured within your webpack setup. Ensure `vue-loader` precedes `vue-svg-loader-2` in the `use` array for correct processing.","wrong":"const config = require('./webpack.config'); // CommonJS import of webpack config is fine, but misconfiguring rules is a pitfall","symbol":"WebpackConfiguration","correct":"module.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        use: ['vue-loader', 'vue-svg-loader-2'],\n      },\n    ],\n  },\n};"},{"note":"For Nuxt.js, the existing SVG rule must be modified to exclude `.svg` files before adding the `vue-svg-loader-2` rule to prevent conflicts.","symbol":"NuxtConfiguration","correct":"module.exports = {\n  build: {\n    extend: (config) => {\n      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));\n      svgRule.test = /\\.(png|jpe?g|gif|webp)$/;\n      config.module.rules.push({\n        test: /\\.svg$/,\n        use: ['vue-loader', 'vue-svg-loader-2'],\n      });\n    },\n  },\n};"}],"quickstart":{"code":"<template>\n  <nav>\n    <a href=\"https://github.com/vuejs/vue\">\n      <VueLogo />\n      Vue\n    </a>\n    <a href=\"https://github.com/svg/svgo\">\n      <SVGOLogo />\n      SVGO\n    </a>\n    <a href=\"https://github.com/webpack/webpack\">\n      <WebpackLogo />\n      webpack\n    </a>\n  </nav>\n</template>\n<script>\nimport VueLogo from './public/vue.svg';\nimport SVGOLogo from './public/svgo.svg';\nimport WebpackLogo from './public/webpack.svg';\n\nexport default {\n  name: 'Example',\n  components: {\n    VueLogo,\n    SVGOLogo,\n    WebpackLogo,\n  },\n};\n</script>","lang":"vue","description":"This example demonstrates how to import local SVG files and use them directly as Vue components within a template after `vue-svg-loader-2` has been configured in the build process."},"warnings":[{"fix":"Review the SVGO changelogs for new configuration syntax or changes in default behavior. Thoroughly test all SVG assets after upgrading `vue-svg-loader-2` to ensure visual fidelity.","message":"Major version updates of the underlying SVGO library (e.g., from v2 to v3 as seen in `0.17.0-beta.4`) can introduce breaking changes in SVG optimization behavior, potentially altering rendered output or requiring updates to SVGO configuration options.","severity":"breaking","affected_versions":">=0.17.0-beta.4"},{"fix":"When using Vue CLI (which typically uses Webpack 5), you must explicitly clear and delete webpack's default SVG `type` and `generator` rules within your `vue.config.js`'s `chainWebpack` configuration before applying `vue-svg-loader-2`.","message":"Webpack 5's built-in asset modules can conflict with `vue-svg-loader-2` when processing SVG files. This often results in SVGs being handled incorrectly or not at all.","severity":"gotcha","affected_versions":">=0.17.0"},{"fix":"In your `nuxt.config.js`, locate the existing SVG rule in `build.extend` and modify its `test` regex to specifically exclude `.svg` files. Afterward, push a new rule for `vue-svg-loader-2` that targets only `.svg` files.","message":"When integrating with Nuxt.js, the default internal webpack rule for handling SVG files must be modified to exclude `.svg` extensions before adding the `vue-svg-loader-2` rule. Failure to do so can lead to conflicts where two rules attempt to process the same file type.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure your webpack configuration's `module.rules` for SVG files lists `vue-loader` as the first loader, followed by `vue-svg-loader-2`, e.g., `use: ['vue-loader', 'vue-svg-loader-2']`.","message":"The order of loaders in the webpack `use` array is critical. `vue-loader` must be applied *before* `vue-svg-loader-2` to ensure that the SVG content is first processed into a format recognizable by Vue.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that your `webpack.config.js`, `vue.config.js` (for Vue CLI), or `nuxt.config.js` includes a rule to apply `vue-loader` and `vue-svg-loader-2` to `.svg` files.","cause":"Webpack is encountering an SVG file but lacks the necessary configuration for `vue-svg-loader-2`, or the existing configuration for `.svg` files is incorrect or incomplete.","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."},{"fix":"First, check the SVG file for any syntax errors or corruption. If the SVG is valid, review any custom SVGO options being passed to `vue-svg-loader-2` and try simplifying them or disabling problematic plugins.","cause":"The SVG file being processed might be malformed or contain invalid XML. Alternatively, the internal SVGO optimization configuration might be too aggressive or incompatible with the SVG's structure.","error":"Error: SVG content could not be parsed: [specific XML parsing error details]"},{"fix":"Ensure that the imported SVG component (e.g., `import MyIcon from './assets/my-icon.svg'`) is explicitly added to the `components` object of the Vue component where it's being rendered, like `components: { MyIcon }`. Also, double-check the import path for accuracy.","cause":"The imported SVG file, which is treated as a Vue component by the loader, has not been correctly registered within the `components` option of the parent Vue component where it is being used, or the import path to the SVG is incorrect.","error":"[Vue warn]: Unknown custom element: `<MyIcon>` - did you register the component correctly? For recursive components, make sure to provide a 'name' option."}],"ecosystem":"npm"}