svgpipe

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/icon and process with 'css-mask' handler"
    icon: "css-mask",
    // load SVGs from "./svgpipe/in/logo" and apply custom handler
    logo: {
      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.
react-css-mask	View
react-inline	View	Needs something like @svgr/webpack.

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]
  }
  // Add svgo config (https://github.com/svg/svgo?tab=readme-ov-file#configuration). Can be overridden or extended from svgpipe.config.ts
  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.