https://github.com/mxjp/veco
A toolchain for svg generation
https://github.com/mxjp/veco
Last synced: 2 months ago
JSON representation
A toolchain for svg generation
- Host: GitHub
- URL: https://github.com/mxjp/veco
- Owner: mxjp
- License: mit
- Created: 2020-04-27T16:11:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-31T22:48:54.000Z (over 3 years ago)
- Last Synced: 2025-01-03T22:26:50.296Z (4 months ago)
- Language: TypeScript
- Size: 842 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VECO
A toolchain for creating **ve**ctor graphics from **co**de 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:
```tsx
import { render, emit } from "veco";
emit(
{[[20, "red"], [40, "blue"], [60, "green"]].map(([radius, fill]) => {
return
})}
)
```
# Getting started
## Installation
```shell
npm i -D veco
```
## Configuration
Create a configuration file for your project:
```js
// 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
```shell
# 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* |