npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nodejs-icon

v1.0.2

Published

[![Version](https://img.shields.io/npm/v/nodejs-icon.svg)](https://www.npmjs.org/package/nodejs-icon)

Downloads

1

Readme

nodejs-icon

Version

CLI tool for generating all the necessary iOS and Android application launcher icons for projects from a single SVG source file. Features include:

  • iOS PNG icon generation
  • Desktop ICO icon generation
  • Web PNG icon generation
  • Android 8.0, and higher, vector drawable adaptive icon generation with PNG fallback
  • Android 7.1 legacy circular icon generation
  • Android 7.0, and lower, legacy square icon generation

Installation

npm install --save-dev nodejs-icon

SVG rendering handled by the splendid sharp library, meaning no dependencies outside of npm is required.

Requires node version 12, or later.

Usage

Place your square 108x108 SVG app icon file named icon.svg in the project root and run

npx nodejs-icon

This will generate all the required icons under the android/ and ios/ directories.

Icon background

If you want to use a separate background layer for Android adaptive icons, or because your source icon file doesn't contain a background, you can create an icon-background.svg file which will be used as the background layer for the generated icons.

In case you want to produce both foreground and background layers from a single SVG file, you can use svg-deconstruct to split layers to separate files. See configuration section below on how to specify input file paths.

Configuration

Supported configuration values are

| Field | Default | Description | | ---------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | foregroundPath | "./icon.svg" | Input file path for the foreground layer. File needs to exist, and may contain transparency. | | backgroundPath | "./icon-background.svg" | Input file path for the background layer. File doesn't need to exist, and will default to a fully white background. If file exist, it needs to be fully opaque. | | platforms | ["android", "ios"] | Array of platforms for which application launcher icons should be generated. Possible values are android and ios. |

Icon format

The input icon should be a SVG file adhering to the Android adaptive icon specification. Specifically, the image should:

  • Be a valid SVG image
  • have a 1:1 aspect ratio
  • Have a size of 108x108dp

of which the:

  • Center 72x72dp square is the normally visible area
  • Center 66dp diameter circle is the safe area which will always be visible

With the various icons cropped according to the following image

Icon copping anatomy

For an example icon file, see example/layered.svg.

Troubleshooting

Supported SVG features

Most common SVG features are supported, including masks and styles. The underlying SVG rendering library is librsvg which claims to support most SVG 1.1 features, excluding scripts, animations and SVG fonts.

Future improvements

  • Add generation of Android notification icons
  • Add generation of Android TV banner