svgpipe
A flexible wrapper arround svgo for furher SVG processing or to add addtional files. Svgpipe comes with predefined handlers, but it is easy to create your own. For example, build an icon component based on your SVG files.
Installation
npm i --save-dev svgpipe
pnpm i -D svgpipe
yarn add -D svgpipe
Usage
npx svgpipe init
npx svgpipe run
Help
npx svgpipe --help
Config
import { defineConfig } from "svgpipe";
export default defineConfig({
baseOutputDir: "svgpipe",
modules: {
inputFolderName: "css-mask",
anotherInput: {
handler: "css-mask"
svgo: {
config: {},
replace: true,
stdout: true
}
},
oneMoreInput: {
handler: (conf) => ({})
}
},
});
Handlers
Built in
name | output | note |
---|
css-mask | view | |
vue-css-mask | view | |
vue-inline | view | depends on vite-svg-loader |
Create custom handler
Implement a CreateHandler
. This is a function that recieves ervery processed module config and returns a ISvgHandler
. This has three properties. 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. The Context
provides a type handler that creates a TypeScript type for the module and a corresponding token handler. The last property is the SvgoConfig
. This can be modified from the user config.
import type { CreateHandler } from "svgpipe"
const myHanlder: CreateHandler = (conf) => ({
config: {
multipass: true
},
onFile: (svgFile) => svgFile,
onEnd: ctx => []
})