icons
Web Extensions polyfill: 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
icons
)
Extension icon (Browser | Canvas Sizes | Content Size | Notes |
---|---|---|---|
Chrome |
48 , 96 , 128 , 256
|
87.5% |
(circle) |
Chrome |
48 , 96 , 128 , 256
|
75% |
(square) |
Edge |
44 , 48 , 50 , 128 , 150 , 176
|
||
Firefox | SVG |
||
Opera |
48 , 96 , 128 , 256
|
||
Safari |
32 , 48 , 64 , 96 , 128
|
(must be named Icon-SIZE.png ) |
browser_action.default_icon
)
Action 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.
Browser | Sizes | Color | Notes |
---|---|---|---|
Chrome |
16 , 32
|
#5A5A5A |
|
Edge |
20 , 25 , 30 , 40
|
#000000 |
|
Firefox | SVG |
#4A4A4B |
(#BEBEBE for dark themes) |
Opera |
16 , 32
|
#444748 |
|
Safari |
16 , 32
|
n/a | (only alpha is used) |