Code Monkey home page Code Monkey logo

svgicon-transformer's Introduction

Icon Transformer

Clean up SVGs with one command. No compiling required, only pure Node.

Usage

  • THIS TOOL REQUIRES NODE 10.12+, PLEASE UPDATE YOUR VERSION
  • Install with NPM or Yarn npm i -D icon-transformer
  • Can be used standalone, as a dependency of your project or within other Node scripts
    • Standalone: npm start
    • As an NPM script: icon-transformer {path-to-icon-config.json}
    • Within other scripts: import iconTransformer from "icon-transformer";
  • Config can be passed in as a command line argument, icon-config.json shows a basic layout for this
    • All .svg files in config.input directory will be transformed
    • After transformation, icons will be piped to config.output directory
    • config.svgo will be passed directly to SVGO
    • Any icons with filename prefixes in config.cleanPrefixes will have those prefixes trimmed
  • This tool can be used standalone by adjusting icon-config.json and using npm start or it can be integrated into other repos and a local config can be passed in the command line

Example usage in scripts

import iconTransformer from "icon-transformer";
import iconConfig from "./icon-config";

iconTransformer(iconConfig).then(errors => {
  console.log("Icons Processed");
});

Features

  • Collapses and bakes transforms into paths (Sketch seems to export SVGs with a bunch of messy transform data that other SVG optimisers don't seem to fix)
  • Converts <use> tags into their source tags.
  • Can change extensions if your SVGs should be directly included (Shopify .liquid for instance)
  • Can convert SVG attributes into classes for a more centralised CSS control of attributes like fill and stroke.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.