Neoclassical Philosophic Musings

    @wext/icons
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    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)

    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)

    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.

    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)

    Keywords

    none

    Install

    npm i @wext/icons

    DownloadsWeekly Downloads

    3

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    31.5 kB

    Total Files

    37

    Last publish

    Collaborators

    • linusu