@wext/icons v0.1.2

Web Extensions polyfill: icons

Web Extensions polyfill for the icons API.

The goal with this package is to implmenet a subset of the Web Extensions API that works for Chrome, Firefox, Safari and Edge.

This module will help you generate all neccessary icons from a single SVG source.

Installation

npm install --save @wext/icons

Usage

const wextIcons = require('@wext/icons')

const source = '<svg viewBox="0 0 64 64"><rect fill="$PRIMARY_COLOR" x="10" ...'

console.log(wextIcons.extension(source, 'safari', { primaryColor: '#009' }))
//=> {
//   spec: {
//     '32': 'Icon-32.png',
//     '64': 'Icon-64.png',
//     ...
//   },
//   files: [
//     { name: 'Icon-32.png', data: Buffer < ... > },
//     { name: 'Icon-64.png', data: Buffer < ... > },
//     ...
//   ]
// }

console.log(wextIcons.extension(source, 'chrome', { shape: 'circle' }))
//=> {
//   spec: {
//     48: 'icon-48.png',
//     96: 'icon-96.png',
//     ...
//   },
//   files: [
//     { name: 'icon-48.png', data: Buffer < ... > },
//     { name: 'icon-96.png', data: Buffer < ... > },
//     ...
//   ]
// }

console.log(wextIcons.action(source, 'firefox'))
//=> {
//   spec: {
//     32: 'action.svg'
//   },
//   files: [
//     { name: 'action.svg', data: Buffer < ... > }
//   ]
// }

console.log(wextIcons.action(source, 'edge'))
//=> {
//   spec: {
//     20: 'action.svg',
//     25: 'action.svg',
//     ...
//   },
//   files: [
//     { name: 'action-20.png', data: Buffer < ... > },
//     { name: 'action-25.png', data: Buffer < ... > },
//     ...
//   ]
// }

API

Extension icon (icons)

Action icon (browser_action.default_icon)

If the source of the SVG contains $PRIMARY_COLOR it will be replaced by the color matching the specific user interface for that browser. This can be used to make icons that blend in with the native UI on every platform.