svg-to-vue

Utility to convert SVG code into Vue component definition
2,667,077 31
vue svg svgo
Install
npm install svg-to-vue
Latest Version:0.7.0
License:MIT
Last Updated:Jan 7, 2023
Links: GitHub  ·  npm
Maintainer: visualfanatic

Instalation

npm i svg-to-vue vue-template-compiler

yarn add svg-to-vue vue-template-compiler

Usage

const svgToVue = require('svg-to-vue');

const code = `
  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="red" />
  </svg>
`;

svgToVue(code)
  .then((component) => {
    // `component` contains Vue component definition
    console.log(component);
  });

API

svgToVue(code, {
  svgoConfig: {
    plugins: [
      {
        prefixIds: true,
      },
    ],
  },
  svgoPath: 'some/path/to.svg',
});
Name Type Default value Description
svgoConfig Object/Boolean {} Configuration object passed to SVGO or false to disable optimization
svgoPath String null Path to SVG file which is used by SVGO prefixIds plugin to generate unique IDs

Related Packages

laravel-mix-svg-vue

A Laravel Mix extension to inline SVG files with Vue.js and automatically optimi...

76,655 38
svg svgo vue laravel mix
nuxt-svgo-loader

Nuxt module to load SVG files as Vue components, using SVGO for optimization.

222,835 27
svg svgo module nuxt nuxt-module
vue-svg-loader

Use SVG files as Vue Components

3,476,564 645
svg svgo vue loader vue-svg-loader webpack
nuxt-svgo

Nuxt module to load optimized SVG files as Vue components

2,699,974 181
svg svgo vue nuxt nuxt-module nuxtjs
vite-plugin-svg

Use SVG files as Vue Components

36,058 104
svg svgo vue vite vite-plugin-svg vue3

Version History

Version Released License
0.7.0 MIT
0.6.0 MIT
0.5.0 MIT
0.4.0 MIT
0.3.0 MIT
Pre-releases (1)
Version Released License
0.4.0-alpha.1 MIT