VECO

A toolchain for creating vector graphics from code for developers :)

This is an early proof of concept. Use at your own risk!

Why/how?

From a developer's perspective, large sets of svg icons are hard to create and maintain as even modern graphic software makes it hard to reuse parts or parametize things. Veco solves all these problems by allowing you to write svgs in typescript:

import { render, emit } from "veco";

emit(<svg viewBox="0 0 100 100">
    {[[20, "red"], [40, "blue"], [60, "green"]].map(([radius, fill]) => {
        return <circle cx="50" cy="50" r={radius} fill={fill} />
    })}
</svg>)

Getting started

Installation

npm i -D veco

Configuration

Create a configuration file for your project:

// veco.json5
{
    // Note, that all properties are optional and
    // the following values represent the defaults:

    // An object with typescript compiler options:
    compilerOptions: {
        target: "es2019",
        jsxFactory: "render"
    },

    // An array with globs to include:
    include: ["**"],

    // An array with globs to exclude:
    exclude: ["**/node_modules/**"],

    // The render target.
    //  - xml - Standalone xml svg files.
    //  - dom - Svg files for direct use in html documents.
    //  - png - PNG images.
    //  - jpeg - JPEG images.
    target: "xml",

    // Render quality used for jpeg images:
    quality: 1,

    // The pixel scale used for PNG and JPEG images:
    scale: 1,

    // An object with format options:
    format: {
        indent: "\t",
        newline: "\n"
    },

    // Settings for the preview server:
    preview: {
        port: 3000,
        address: "::1"
    },

    // Enable/disable optimization (currently uses svgo):
    optimize: true
}

Command line

# Render all svgs:
veco render

# Start the preview server:
veco preview

The following arguments can be used to overwrite the configuration:

| Argument | Description | Commands | |-|-|-| | --config ./foo.json5 | Optional config file path | render, preview | | --watch | Watch for changes | render | | --include ./src/foo/** | Specify one or more globs to include files | render, preview | | --exclude **/test* | Specify one or more globs to exclude files | render, preview | | --out-dir ./out | Specify a different output directory | render | | --target png | Specify a different render target | render | | --quality 0.84 | Specify a different JPEG render quality | render | | --scale 1.234 | Specify a different scale for PNG or JPEG images | render | | --preview-port 3000 | Use a different preview server port | preview | | --preview-address ::1 | Use a different preview server address | preview | | --verbose | Enable verbose logging | all |