Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/josephuspaye/emojicon
🔥 Easily use any emoji as favicon!
https://github.com/josephuspaye/emojicon
createweekly emoji favicon javascript
Last synced: about 2 months ago
JSON representation
🔥 Easily use any emoji as favicon!
- Host: GitHub
- URL: https://github.com/josephuspaye/emojicon
- Owner: JosephusPaye
- License: mit
- Created: 2020-02-04T09:06:00.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T23:14:37.000Z (about 2 years ago)
- Last Synced: 2023-03-06T10:21:11.651Z (almost 2 years ago)
- Topics: createweekly, emoji, favicon, javascript
- Language: Vue
- Homepage: https://emojicon.netlify.com
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Emojicon
Emojicon is a small JS library that allows you to dynamically change a page's favicon to any emoji.
This project is part of [#CreateWeekly](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), my attempt to create something new publicly every week in 2020.
## Features
With Emojicon you can:
- Dynamically change the favicon to any emoji
- Specify custom emoji color (for some older monochrome emojis)
- Render emoji to a data URL without changing page favicon
- Use a custom canvas for rendering (e.g. in Node, for SSR)
Emojicon is tiny and has no dependencies - weighing only 939 bytes (603 bytes g-zipped).
## Design
Emojicon has been designed to work as follows:
- Renders the given emoji to a 32x32 transparent canvas using the platform's emoji font
- Converts the canvas image to a data URL using [`canvas.toDataURL('image/png')`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
- Changes the page's favicon by setting the `href` attribute on the favicon `` element in the document head
## Installation
```
npm install emojicon --save
```
## Usage
Before using Emojicon, ensure that your favicon `` element in the document head has an id of `emojicon`, or pass `linkId` with the actual id when calling [`emojicon.set()`](#emojiconsetemoji-options).
```html
```
### Set the page emoji
```js
import emojicon from 'emojicon';
emojicon.set('🔥');
```
### Change the emoji color
This only works for some older monochrome emojis.
```js
import emojicon from 'emojicon';
emojicon.set('✷', { color: '#EA0' });
```
### Change the emoji color for dark mode
```js
import emojicon from 'emojicon';
function getEmojiColor() {
// Check for dark mode support
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
return window.matchMedia('(prefers-color-scheme: dark)').matches
? '#fff'
: '#000';
}
// Default to black
return '#000';
}
emojicon.set('🔥', { color: getEmojiColor() });
```
### Render the emoji to a data URL
```js
import emojicon from 'emojicon';
const faviconUrl = emojicon.render('🔥');
// Use `faviconUrl` anywhere you would use an image URL
```
### Use a custom canvas for rendering
A custom canvas is useful when running in an environment that doesn't have `` available natively (e.g. Node).
```js
const emojicon = require('emojicon');
const { createCanvas } = require('canvas'); // npm install canvas
const faviconUrl = emojicon.render('🔥', { canvas: createCanvas(32, 32) });
// Use `faviconUrl` to set the favicon element's `href` attribute
```
Note that Node Canvas's emoji support [is not that great](https://github.com/Automattic/node-canvas/issues/760). You are probably better off using a default favicon server-side and setting the emoji favicon client-side when the page loads.
### Use Emojicon from a CDN
Add Emojicon to your list of scripts:
```html
```
Then use it anywhere in JS via the global `emojicon` variable:
```js
emojicon.set('🔥');
```
## API
### `emojicon.set(emoji, [options])`
Set the page's favicon to the given emoji.
- `emoji`: String (required): the emoji (should contain one emoji only)
- `options`: Object (optional) with any of the following properties:
- `linkId`: String: id of the favicon `` element to set the emoji on, defaults to `emojicon`
- `color`: String: color of the emoji (any CSS color string)
- `canvas`: Object: a custom canvas implementation, must be compatible with the [standard canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
### `emojicon.render(emoji, [options])`
Render the given emoji to a data URL.
- `emoji`: String (required): the emoji (should contain one emoji only)
- `options`: Object (optional) with any of the following properties:
- `color`: String: color of the emoji (any valid CSS color string)
- `canvas`: Object: a custom canvas implementation, must be compatible with the [standard canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
Returns a data URL string that can be used anywhere you would use an image URL.
## To-Do
- [ ] Add TypeScript declarations (contributions welcome)
## Licence
[MIT](LICENCE)