Registry / web-framework / unplugin-svg-vue-component

unplugin-svg-vue-component

library0.1.1jsnpmunverified

unplugin-svg-vue-component is a versatile utility that allows developers to import SVG files directly as functional Vue components, supporting both Vue 2.7 and Vue 3.x applications through a unified API. It leverages the `unplugin` architecture, enabling it to integrate seamlessly across various build tools like Vite. The current stable version, as of the provided metadata, is 0.1.1. Its release cadence follows a feature and bug-fix driven approach rather than a fixed schedule. A key differentiator is its dual Vue version compatibility and the optional integration with SVGO for robust SVG optimization, offering a consolidated solution compared to maintaining separate SVG loaders for different Vue versions or build environments.

web-framework serialization devops

npm install unplugin-svg-vue-component

github ↗package ↗

INSTALL

IMPORT

SIG · UNPLUGIN-SVG-VUE-C

unplugin-svg-vue-component

web-frameworkjavascriptv0.1.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.

svgPlugin

✓ import svgPlugin from 'unplugin-svg-vue-component/vite'

✗ import { svgPlugin } from 'unplugin-svg-vue-component/vite'

The Vite plugin is a default export from its specific entry point and should be imported without curly braces.

SVGComponent

✓ import IconName from './path/to/icon.svg'

✗ import IconName from './path/to/icon.svg?raw'

SVG files are imported directly as Vue components. For TypeScript users, appending `?component` (e.g., `./icon.svg?component`) is recommended for explicit type inference.

TypeScript Client Types

✓ /// <reference types="unplugin-svg-vue-component/client" />

✗ import type { SVGComponent } from 'unplugin-svg-vue-component/client'

Type declarations are typically added via the `types` array in `tsconfig.json` or a triple-slash directive, not as a direct `import type` statement.

Configures Vite with the plugin to import an SVG file as a typed Vue component, demonstrating setup for both configuration and in-component usage with optional optimization.

import svgPlugin from 'unplugin-svg-vue-component/vite' import vue from '@vitejs/plugin-vue' import { defineConfig } from 'vite' // vite.config.js export default defineConfig({ plugins: [ vue(), svgPlugin({ optimize: true }), // Enable SVGO optimization ], }) // tsconfig.json // { // "compilerOptions": { // "types": [ // "unplugin-svg-vue-component/client" // ] // } // } // src/components/MyIcon.vue <template> <SomeSvgIcon :style="{ width: '32px', height: '32px', color: 'currentColor' }" /> </template> <script setup lang="ts"> import SomeSvgIcon from '../assets/my-icon.svg?component' // Ensure you have assets/my-icon.svg // You can pass props and bind styles/classes like any Vue component </script>

Debug

Known issues

gotchaFor correct TypeScript type inference and to avoid errors, you must explicitly add `unplugin-svg-vue-component/client` to the `compilerOptions.types` array in your `tsconfig.json`.

fix

Add `"unplugin-svg-vue-component/client"` to the `types` array in your `tsconfig.json`.

affects: >=0.1.0

gotchaWhen importing SVG files in TypeScript, it is highly recommended to append the `?component` suffix to the import path (e.g., `import MyIcon from './my-icon.svg?component'`) to ensure proper type resolution.

fix

Modify SVG imports in `.ts` or `<script setup lang="ts">` files to include `?component`.

affects: >=0.1.0

gotchaSVG optimization using SVGO is disabled by default. If you require smaller bundle sizes or cleaner SVG output for production, you need to explicitly enable the `optimize` option in the plugin configuration.

fix

Set `optimize: true` in the plugin options: `svgPlugin({ optimize: true })`.

affects: >=0.1.0

gotchaThe plugin is designed to work with specific build tool integrations (e.g., `/vite`, `/webpack`). Ensure you are importing and configuring the correct entry point for your chosen bundler.

fix

Verify that your `vite.config.js` (or equivalent) correctly imports `svgPlugin from 'unplugin-svg-vue-component/vite'` and registers it in the plugins array.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module './my-icon.svg' or its corresponding type declarations.

TypeScript is unable to recognize SVG file imports as valid modules, typically due to missing type declarations or an incorrect import suffix.

fix

Add `"unplugin-svg-vue-component/client"` to `compilerOptions.types` in `tsconfig.json`, and ensure SVG imports use `?component` suffix (e.g., `import Icon from './my-icon.svg?component'`).

Failed to resolve import "./my-icon.svg" from "src/App.vue". Does the file exist?

The SVG file path is incorrect, or the unplugin-svg-vue-component Vite plugin (or equivalent for your bundler) is not correctly installed or configured.

fix

Double-check the relative path to your SVG file. Verify `unplugin-svg-vue-component` is installed (`npm i -D unplugin-svg-vue-component`) and correctly added to your `vite.config.js` `plugins` array.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jaw52/unplugin-svg-vue-component ↗

packagehttps://www.npmjs.com/package/unplugin-svg-vue-component ↗