jake/hugo-mod-twemoji
1
Fork 0
mirror of https://github.com/jakejarvis/hugo-mod-twemoji.git synced 2025-06-27 15:35:41 -04:00
Code Issues Releases Activity

Update README.md

Browse Source
This commit is contained in:
Jake Jarvis
2020-04-08 10:26:06 -04:00
parent d0b6bdbd4b
commit f6ed90cb01
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -1,10 +1,12 @@
# hugo-mod-twemoji 📦
[**Twemoji**](https://twemoji.twitter.com/) (Twitter Emoji) is an open source library of over 3,000 Unicode emojis in both PNG and SVG formats. It also provides a script to swap out system-native emojis for these graphics to achieve a uniform appearance across all browsers and platforms.
![twemoji-smileys-2014 (1)](https://user-images.githubusercontent.com/1703673/78717950-64b01680-78ef-11ea-9010-1055e014abbf.png)
This [Hugo Module](https://gohugo.io/hugo-modules/) can be used to import the Twemoji graphics and scripts locally into your Hugo project, rather than making external calls to Twitter's CDN.
[**Twemoji**](https://twemoji.twitter.com/) (Twitter Emoji) is an open-source library of every Unicode emoji ([all 3,245 of them!](https://emojipedia.org/twitter/)) uniquely redesigned in both SVG and PNG formats. It also provides a script to swap out system-native emojis for these graphics to achieve a uniform appearance across all browsers and platforms. 🙌
## Usage
This [Hugo Module](https://gohugo.io/hugo-modules/) can be used to import the Twemoji graphics and scripts locally into your Hugo project, rather than making external calls to Twitter's CDN for each individual icon.
## 🤖 Usage
Add the module to your Hugo project's `config.toml`:
@ -14,15 +16,15 @@ Add the module to your Hugo project's `config.toml`:
path = "github.com/jakejarvis/hugo-mod-twemoji"
```
The graphics will be mounted in `static/twemoji/png` and `static/twemoji/svg`, and the scripts in `static/twemoji/js`.
The graphics will be mounted in `static/twemoji/svg` and `static/twemoji/png`, and the minified script in `static/twemoji/js`.
You'll want to call the script somewhere in your template or theme's `<head>`, for example:
```go
```html
<script src="{{ "twemoji/js/twemoji.min.js" | absURL }}"></script>
```
...and then in order to actually swap out the emojis, you need to call the script's `.parse` method. This is where you can choose between PNGs or SVGs and tell the script where we've placed the graphics. A good starting point is:
...and then in order to actually swap out the emojis, you need to call the script's `twemoji.parse` method. This is where you can choose between SVGs (recommended) or 72x72 PNGs and tell the script where we've placed the graphics. The [official readme](https://github.com/twitter/twemoji#api) has a _lot_ of information about the API, but a good starting point is this one-liner:
```html
<script>
@ -30,7 +32,7 @@ You'll want to call the script somewhere in your template or theme's `<head>`, f
</script>
```
After building the site this script will turn into something like:
After building the site this small script will turn into something like:
```html
<script>
@ -38,8 +40,12 @@ After building the site this script will turn into something like:
</script>
```
## License
## 🌎 Examples
Twemoji graphics are licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) (CC-BY-4.0) by Twitter, Inc. and other contributors. Code is licensed under the [MIT License](http://opensource.org/licenses/MIT).
- [https://jarv.is/](https://jarv.is/) ([Source](https://github.com/jakejarvis/jarv.is))
## 📜 Licenses
Twemoji graphics are licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) (CC-BY-4.0) by Twitter, Inc. and other contributors. Code (both Twitter's and this repository) is released under the [MIT License](http://opensource.org/licenses/MIT).
Refer to the main [Twemoji repository](https://github.com/twitter/twemoji) or [website](https://twemoji.twitter.com/) for more information.