{"id":26622,"library":"vue-svg-component-runtime","title":"Vue SVG Component Runtime","description":"Runtime library for rendering SVG files as Vue.js components, typically used alongside vue-svg-component-builder. Current version is 1.0.1. This is a lightweight peer dependency that provides the runtime support for SVG components; it is extracted as a separate package from v2.0.0 of the builder. Release cadence is low as it is stable. Differentiator: minimal runtime overhead, designed for Vue 2.x (>=2.5.0). Includes TypeScript type definitions.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/wadetandy/vue-svg-component-builder","tags":["javascript","vue","vuejs","svg","svg-icons","typescript"],"install":[{"cmd":"npm install vue-svg-component-runtime","lang":"bash","label":"npm"},{"cmd":"yarn add vue-svg-component-runtime","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-svg-component-runtime","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required at runtime for component creation. Expects Vue >= 2.5.0","package":"vue","optional":false}],"imports":[{"note":"Default export is not available; named export only.","wrong":"import build from 'vue-svg-component-runtime'","symbol":"build","correct":"import { build } from 'vue-svg-component-runtime'"},{"note":"CommonJS require destructures the named export.","wrong":"const build = require('vue-svg-component-runtime')","symbol":"build","correct":"const { build } = require('vue-svg-component-runtime')"}],"quickstart":{"code":"import { build } from 'vue-svg-component-runtime';\nimport { compile } from 'vue-component-compiler';\nimport Vue from 'vue';\n\nconst svgString = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\"/></svg>';\nconst compiled = compile(svgString);\nconst SvgComponent = build(compiled.ast);\n\nnew Vue({\n  template: '<div><svg-component /></div>',\n  components: { 'svg-component': SvgComponent }\n}).$mount('#app');","lang":"typescript","description":"Shows how to compile an SVG string using vue-component-compiler and then build a Vue component using vue-svg-component-runtime."},"warnings":[{"fix":"Install vue-svg-component-runtime: npm install vue-svg-component-runtime","message":"In v2.0.0 of vue-svg-component-builder, the runtime was extracted into this separate package. If you upgrade the builder, you must install vue-svg-component-runtime as a dependency.","severity":"breaking","affected_versions":"vue-svg-component-builder >=2.0.0"},{"fix":"Use alternatives like vue-svg-loader or unplugin-vue-components for Vue 3.","message":"This package only supports Vue 2.x. Vue 3 is not supported. For Vue 3, use dedicated SVG component libraries.","severity":"deprecated","affected_versions":"all"},{"fix":"Use compile() from vue-component-compiler to transform SVG string to AST before calling build().","message":"The input to build() must be the AST output of vue-component-compiler, not raw SVG or other formats.","severity":"gotcha","affected_versions":"all"},{"fix":"Use import { build } from 'vue-svg-component-runtime'","message":"Default import does not exist; must use named import { build }.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure the compiled result has an 'ast' property. Use compile(svgString).ast or check the library's output structure.","cause":"compile() might return an object without an 'ast' property, or the SVG string is empty/invalid.","error":"TypeError: Cannot read property 'ast' of undefined"},{"fix":"Verify the SVG is valid and compile produces correct AST. Ensure Vue peer dependency is installed.","cause":"The build() function may return a component without a render function if the AST is malformed.","error":"Failed to mount component: template or render function not defined"},{"fix":"Run npm install vue-svg-component-runtime (or yarn add). This package is a peer dependency of vue-svg-component-builder for v2+.","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'vue-svg-component-runtime'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}