Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philipbordallo/postcss-color-emoji
✏ Emoji in full color!
https://github.com/philipbordallo/postcss-color-emoji
css emoji font-family postcss
Last synced: about 1 month ago
JSON representation
✏ Emoji in full color!
- Host: GitHub
- URL: https://github.com/philipbordallo/postcss-color-emoji
- Owner: philipbordallo
- License: mit
- Created: 2019-02-09T19:01:02.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T01:38:57.000Z (almost 2 years ago)
- Last Synced: 2024-11-14T14:21:53.926Z (about 1 month ago)
- Topics: css, emoji, font-family, postcss
- Language: JavaScript
- Homepage:
- Size: 461 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Color Emoji [
][postcss]
> ✏ Emoji in full color!
[![NPM Version][npm-img]][npm-url]
[![Build Status][ci-img]][ci-url]
[![Dependency Status][david-img]][david-url]
Depending on the font, some emojis are rendered as their text variation instead of the colored version you know and love. This [PostCSS][postcss] plugin gives you full access to the system emojis on macOS, Windows, and Linux.
```css
/* Input */
.example {
font-family: color-emoji;
}
```
```css
/* Output */
.example {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
```
Check out the visual test.
## Install
```sh
# npm
npm install --save-dev postcss postcss-color-emoji
# or yarn
yarn add --dev postcss postcss-color-emoji
```
## Usage
Add it to your PostCSS work-flow, [whatever way you choose to](https://github.com/postcss/postcss#usage).
```js
// Using a postcss.config.js
const colorEmoji = require('postcss-color-emoji');
module.exports = {
plugins: [
colorEmoji
]
};
```
Then use the `color-emoji` font-family name where ever you need it.
```css
.one {
font-family: sans-serif, color-emoji;
}
```
```css
/* Using custom properties */
:root {
--emoji: color-emoji;
}
.two {
font: var(--emoji);
}
```
## Credits
- Nick Galbreath for his article on the [CSS Color emoji stack](https://www.client9.com/css-color-emoji-stack/)
- Mark Dotto for his piece on [shipping system fonts to GitHub.com](http://markdotto.com/2018/02/07/github-system-fonts/)
## [License](./LICENSE) ##
[david-img]: https://img.shields.io/david/philipbordallo/postcss-color-emoji.svg
[david-url]: https://david-dm.org/philipbordallo/postcss-color-emoji
[ci-img]: https://img.shields.io/github/workflow/status/philipbordallo/postcss-color-emoji/Continuous%20Integration
[ci-url]: https://github.com/philipbordallo/postcss-color-emoji/actions/workflows/ci.yml
[npm-img]: https://img.shields.io/npm/v/postcss-color-emoji.svg
[npm-url]: https://www.npmjs.com/package/postcss-color-emoji
[postcss]: https://github.com/postcss/postcss