SVG to Vue Component Converter

About

Small CLI tool to convert SVG files to Vue components for easier use in VueJs applications. Replaces values of stroke/fill properties that are not 'none' with 'currentColor' (inside style and standalone), so the icons can be used with the 'color' CSS property.

Uses prettier to auto format the components. Currently uses 4 spaces identation.

Installation

This package is intended to be used on the cli, to use it without any project, run
npm i -g svg-to-vue-converter

For usage see svg-to-vue-converter -h or help text below

man

NAME
    svg-to-vue-converter

SYNOPSIS
    svg-to-vue-converter [OPTIONS]...

DESCRIPTION:
    Converts SVGs' to vue components and replaces 'fill' and 'stroke' porperties
    with 'currentColor' for an easier use in vue projects. Does not work well with
    multicolor SVGs'! By Default it takes the SVGs' in the current folder and replaces
    them with its' generated Vue counterparts -> SVGs' will be backed up.

    -h, --help
        display this help

    -i, --input-directory [PATH]
        directory to take the SVGs' from,
        defaults to the current directory '.'
    
    -o, --output-directory [PATH]
        directory to store the generated Vue components,
        defaults to the current directory '.',
        an 'svg' backup folder will be created inside the output folder

    -p, --print-as-is
        omits the formatting with prettier of the created component,
        still wraps the svg in a <template> tag and does some simple whitespace
        sanitization

    -t, --tab-size [NUMBER_OF_SPACES]
        sets the number of spaces used for the indentation of the component,
        defaults to 4

    -k, --keep-color
        disables fill/stroke property value replacements