README

svg app icon

🎨 Create high-quality desktop app icons for Windows, MacOS, and Linux using an SVG source

📥 Install

npm install svg-app-icon

👨‍💻 API

const { promises: fs } = require('fs');
const icons = require('svg-app-icon');

(async () => {
  const svg = await fs.readFile('my-icon.svg');

  await icons(svg, {
    destination: './my-output-directory'
  });
})();

`icons(svg, options)` → `Promise`

The arguments for this method are:

svg String|Buffer - the SVG that you'd like to use as the icon
[options] Object - the options, everything is optional
- [destination = 'icons'] String - the directory to output all icons to. If this direcotry doesn't exist, it will be created
- [icns = true] Boolean - whether to generate an ICNS icon for MacOS
- [ico = true] Boolean - whether to generate an ICO icon for Windows
- [png = true] Boolean - whether to generate all PNG icon sizes for Linux
- [svg = true] Boolean - whether to generate output the original SVG to the output destination
- [pngSizes = [32, 256, 512]] Array<Integer> - the sizes to output for PNG icons, in case you need any additional sizes

This promise resolves with undefined.

💻 CLI

You can also generate icons from the command line, so you don't have to write anything.

npx svg-app-icon < input.svg

Here are all the options (spoiler: they are the same as the API):

Usage:
  svg-app-icon [options] < input.svg

Options:
  --help             Show help
  --version          Show the version
  --destination, -d  Directory to output icons    [string]   [default: icons]
  --include, -i      Which icons to create        [string[]] [default: icns, ico, png, svg]
  --png-size, -s     What size png images create  [number[]] [default: 32, 256, 512]

Note: all array arguments can be defined more than once

Examples:
  svg-app-icon < input.svg
  svg-app-icon --include icns --include ico < input.svg
  cat input.svg | svg-app-icon --destination build/assets

🤷‍♀️ But Why?

There are very many tools to help you generate desktop app icons. They all, however, take one large PNG file as input and scale it down to generate all the necessary sizes. However, I have two problems:

I generate all my icons as SVG and would prefer not to manually pre-process them. I just want to check out the repo and have everyhting else automated.
I noticed that all the PNG-scaling solutions end up creating poor quality PNG images, especially for the smaller sizes. This results in icons that look bad.

Since I use SVG, I actually don't need to scale PNG images. I can arbitrarily generate images of any size from the initial SVG. It just so happens that there are many solutions for that as well. However, for the most part, all have tradeoffs and quality issues as well. This module uses svg-render in order to create high-quality PNGs at any size. You can even use responsive PNGs, to render customized and optimized icons for every size. Try it, it's fun! 🎉

Usage no npm install needed!