Svgpipe

A flexible wrapper arround SVGO to postprocess optimized SVGs. Svgpipe comes with predefined handlers that can be used to create a typed icon-component or similar. But it is easy to create a custom handler.

Installation

 npm i --save-dev svgpipe
 pnpm add -D svgpipe
 yarn add -D svgpipe

Usage

Create a config file and a folder scaffold.

npx svgpipe init

Drop your SVGs in ./svgpipe/in/<yourFolder> and update the config.

// svgpipe.config.ts
import { defineConfig } from "svgpipe";

export Default defineConfig({
  modules: {
    // load SVGs from "./svgpipe/in/logo and process with 'css-mask' handler"
    logo: "css-mask",
    // load svg from "./svgpipe/in/icon" and apply custom handler
    icon: {
      handler: (conf) => ({})
    }
  },
});

Process SVGs and create files.

npx svgpipe run

Built-in Handlers

| Name | Output |  Note | | :------------- | :----------------------------------------------------------------------------------------------------------- | :---------------------------- | | css-mask | View  | | | vue-css-mask | View  | | | vue-inline | View  | Depends on vite-svg-loader. |

Options

| Property | Type | Default | Description | | :--------- | :---------------------------------- | :------------- | -------------------------------------------------------------------------- | | baseIn? | string   | ./svgpipe/in | Root folder to find the input SVGs. | | baseOut? | string | ./svgpipe/.out | Root folder for all output files. | | cleanup | boolean | true | Delete files in the output folders that where not part of the current run. | | modules | UserModuleConfig or HandlerName | | Config for one set of SVGs. See Handlers. |

Module

| Property | Type | Default |  Description | | :------------- | :------------------------- | :--------------------------- | :---------------------------------------------------------------------------------------------- | | in? | string   | {baseIn}/{objectKeyOfModule} | Folder where the SVGs for this module are. If undefined, the module key will be used. | | out? | string | {baseOut} | Folder for ouput. | | typePath? | string | {baseOut}/types | Folder for the TypeScript type file. This has a type with all the SVG names as string literals. | | tokenPath? | string | {baseOut}/token | Folder for the TypeScript token file. This has a variable with an array with all SVG names. | | ignoreBase? | boolean | false | Don't prepend the base path. | | prepareName? | (str: string) => string | | Modify the SVG file name. The name will be used for types, classes e.g. | | handler | CreateHandler | | The actual SVG handle. | | svgo? | UserModuleConfig["svgo"] | {} | SVGO Options. |

SVGO

| Property | Type | Default | Description | | :--------- | :----------- | :------ | :--------------------------------- | | config? | SvgoConfig | {} | SVGO Config. | | replace? | boolean | false | Opt out of default config merging. | | stdout? | boolean | false | Print the config to the console. |

Custom Handler

import { type CreateHandler, File } from "svgpipe"

const myHanlder: CreateHandler = (moduleConfig) => ({
  onFile: (svgFile) => {
    // Do what ever you want. Return the file to keep it.
    return svgFile
  },
  onEnd: (context) => {
    // Do cleanup work or create addtional files
    const myFile = new File()
    return [myFile]
  }
  config: {
    multipass: true
  },
})

Implement a CreateHandler. This is a function that recieves every processed module config and returns a ISvgHandler.

onFile

Will be called for every processed input svg file. Retrun the file if you want to keep it.

onEnd

Will be called with the Context after all SVGs are processed. Return nothing or IWriter[] with additional files that you want to write to disk. Context provides a type handler that creates a TypeScript type file for the module and a corresponding token handler.

config

The default SVGO config that should be used. This can be modified from the user config.

All built-in handlers are exported in case you want to extend one.