Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svgpipe

Package Overview
Dependencies
Maintainers
0
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svgpipe

A flexible CLI tool around svgo for further postprocessing.

  • 0.0.16
  • npm
  • Socket score

Version published
Weekly downloads
277
Maintainers
0
Weekly downloads
 
Created
Source

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

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

export default defineConfig({
  baseOutputDir: "svgpipe", // that's the default
  // You can process multiple folders with svgs (modules) each with its own config
  modules: {
    // Create a module with a predefined handler
    inputFolderName: "css-mask",
    // Or pass options to the predefined handler
    anotherInput: {
      handler: "css-mask"
      svgo: {
        // custom config
        config: {},
        // opt out of the default merge behaviour
        replace: true,
        // print the config to the terminal
        stdout: true
      }
    },
    // Create your own handler
    oneMoreInput: {
      handler: (conf) => ({})
    }
  },
});

Handlers

Built in

nameoutput note
css-maskview 
vue-css-maskview 
vue-inlineview 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 => []
})

Keywords

FAQs

Package last updated on 28 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc