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

emoji-favicon-webpack-plugin

v1.5.0

Published

Let webpack generate an emoji favicon for you

Downloads

50

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

trevorbladestrevorblades

Keywords

emojifaviconwebpackpluginwebappfaviconshtml

Readme

Emoji Favicon Webpack Plugin

Generates a favicon based on an emoji for your webapp

Installation

$ npm install --save-dev emoji-favicon-webpack-plugin

Usage

Add the plugin to your webpack config and pass your emoji of choice to it as an argument. A favicon will be generated and outputted with your bundle.

const EmojiFaviconPlugin = require('emoji-favicon-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new EmojiFaviconPlugin('🦑'),
    new HtmlPlugin() // not required, but really handy
  ]
};

If you're using html-webpack-plugin, the HTML tags necessary to include your favicon will automatically be appended to the <head> of your document.

<head>
  <!-- other tags -->
  <link rel="shortcut icon" href="favicon.ico">
</head>

Options

By default, we use Twemoji for consistent results across all operating systems. If you would prefer to use your system's emoji font instead, specify the useSystem option in the constructor.

new EmojiFaviconPlugin({
  emoji: '🍣',
  useSystem: true,
  sizes: [16] // default is [16, 32, 48]
})

You can also specify a shortcode instead of an emoji! Check out this link for a complete listing of emojis and their shortcodes.

new EmojiFaviconPlugin(':bathtub:') // 🛁

A note about using system emoji

MacOS has a pretty awesome and extensive library of emoji built into its Apple Color Emoji typeface, but other operating systems aren't so lucky. If you normally develop on a Mac, you will see different results when you build your app on a Linux or Windows machine.

In order to get consistent results between development and production, you should make sure that you use the same operating system for building in each environment. The configuration required to make this happen varies between CI tools, but if you use TravisCI, you can add the following to your .travis.yml file depending on what OS you're trying to target:

MacOS

os: osx

Ubuntu

# the following is required to use Ubuntu system emoji
# https://github.com/travis-ci/travis-ci/issues/8836#issuecomment-348227535
sudo: required
addons:
  chrome: stable

Usage with Gatsby

To generate an emoji favicon with Gatsby, use the Gatsby plugin.

License

MIT