https://github.com/mauriciorobayo/svg-emojis
Choose your flavor of consistent cross-platform SVG emojis
https://github.com/mauriciorobayo/svg-emojis
emoji fxemoji openmoji svg twemoji
Last synced: 8 days ago
JSON representation
Choose your flavor of consistent cross-platform SVG emojis
- Host: GitHub
- URL: https://github.com/mauriciorobayo/svg-emojis
- Owner: MauricioRobayo
- Created: 2021-09-28T22:42:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-09-29T20:47:10.000Z (over 3 years ago)
- Last Synced: 2025-03-27T19:22:28.825Z (3 months ago)
- Topics: emoji, fxemoji, openmoji, svg, twemoji
- Language: JavaScript
- Homepage: https://svg-emojis.netlify.app
- Size: 14.6 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG Emojis
Choose your flavor of consistent cross-platform SVG emojis from [Twemoji](https://github.com/twitter/twemoji), [FxEmoji](https://github.com/mozilla/fxemoji), and [OpenMoji](https://www.openmoji.org/).
- [/twemoji](./twemoji)
- [/fxemoji](./fxemoji)
- [/openmoji/color](./openmoji/color)
- [/openmoji/black](./openmoji/black)
## Demo
https://svg-emojis.netlify.app
[](https://app.netlify.com/sites/svg-emojis/deploys)
## Install
```
npm i svg-emojis
```
## Usage
You can use [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) or [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) to import them as a React component:
```js
import ThumbsUp from "svg-emojis/twemoji/1f44d.svg";
function App() {
return (
);
}
```
### Create React App
👉 [Adding Images, Fonts, and Files](https://create-react-app.dev/docs/adding-images-fonts-and-files)
Import as URL:
```js
import React from "react";
import thumbsUp from "svg-emojis/twemoji/1f44d.svg";
function Header() {
return 
;
}
export default Header;
```
Import as a `ReactComponent`:
```js
import { ReactComponent as ThumbsUp } from "svg-emojis/twemoji/1f44d.svg";
function App() {
return (
);
}
```
### Nextjs
👉 [SVG components example](https://github.com/vercel/next.js/tree/canary/examples/svg-components) using [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg).
## CDN
Files can be delivered through [jsdelivr](https://www.jsdelivr.com/) (or [unpkg](https://unpkg.com/)):
- 
https://cdn.jsdelivr.net/npm/svg-emojis/twemoji/1f389.svg
- 
https://cdn.jsdelivr.net/npm/svg-emojis/fxemoji/u1F389-partypopper.svg
- 
https://cdn.jsdelivr.net/npm/svg-emojis/openmoji/color/1F389.svg
- 
https://cdn.jsdelivr.net/npm/svg-emojis/openmoji/black/1F389.svg
## Contributions
All contributions are welcome!