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

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin