1. svg-to-vue
Utility to convert SVG code into Vue component definition
svg-to-vue
Package: svg-to-vue
Created by: visualfanatic
Last modified: Thu, 19 May 2022 03:40:22 GMT
Version: 0.7.0
License: MIT
Downloads: 386,084
Repository: https://github.com/visualfanatic/svg-to-vue

Install

npm install svg-to-vue
yarn add svg-to-vue

svg-to-vue

Utility to convert SVG code into Vue component definition

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

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code