Registry / http-networking / vue-svg-loader-2

vue-svg-loader-2

library0.17.1jsnpmunverified

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.

http-networking

npm install vue-svg-loader-2

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SVG-LOADER-2

vue-svg-loader-2

http-networkingjavascriptv0.17.1

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.

SvgComponent

✓ import MyIcon from './assets/my-icon.svg';

✗ import { MyIcon } from './assets/my-icon.svg';

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.

WebpackConfiguration

✓ module.exports = { module: { rules: [ { test: /\.svg$/, use: ['vue-loader', 'vue-svg-loader-2'], }, ], }, };

✗ const config = require('./webpack.config'); // CommonJS import of webpack config is fine, but misconfiguring rules is a pitfall

The loader itself is configured within your webpack setup. Ensure `vue-loader` precedes `vue-svg-loader-2` in the `use` array for correct processing.

NuxtConfiguration

✓ module.exports = { build: { extend: (config) => { const svgRule = config.module.rules.find(rule => rule.test.test('.svg')); svgRule.test = /\.(png|jpe?g|gif|webp)$/; config.module.rules.push({ test: /\.svg$/, use: ['vue-loader', 'vue-svg-loader-2'], }); }, }, };

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.

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.

<template> <nav> <a href="https://github.com/vuejs/vue"> <VueLogo /> Vue </a> <a href="https://github.com/svg/svgo"> <SVGOLogo /> SVGO </a> <a href="https://github.com/webpack/webpack"> <WebpackLogo /> webpack </a> </nav> </template> <script> import VueLogo from './public/vue.svg'; import SVGOLogo from './public/svgo.svg'; import WebpackLogo from './public/webpack.svg'; export default { name: 'Example', components: { VueLogo, SVGOLogo, WebpackLogo, }, }; </script>

Debug

Known issues

breakingMajor 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.

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.

affects: >=0.17.0-beta.4

gotchaWebpack 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.

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`.

affects: >=0.17.0

gotchaWhen 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.

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.

affects: *

gotchaThe 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.

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']`.

affects: *

Errors

Common errors & fixes

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.

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.

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.

Error: SVG content could not be parsed: [specific XML parsing error details]

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.

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.

[Vue warn]: Unknown custom element: `<MyIcon>` - did you register the component correctly? For recursive components, make sure to provide a 'name' option.

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.

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.

Upgrade

Version history

0.17.1latest on npm

Audit

Dependencies

vuerequiredRequired for the generated SVG components to function within a Vue application environment.

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/gammacommunications/vue-svg-loader-2 ↗

packagehttps://www.npmjs.com/package/vue-svg-loader-2 ↗