Twitter Emoji (Twemoji) Build Status. A simple library that provides standard Unicode emoji support across all platforms. Twemoji v13.1 adheres to the ...
Skiptocontent
{{message}}
twitter
/
twemoji
Public
Notifications
Star
13.6k
Fork
1.6k
Emojiforeveryone.https://twemoji.twitter.com/
Viewlicense
13.6k
stars
1.6k
forks
Star
Notifications
Code
Issues
40
Pullrequests
14
Actions
Projects
0
Security
Insights
More
Code
Issues
Pullrequests
Actions
Projects
Security
Insights
master
Branches
Tags
Couldnotloadbranches
Nothingtoshow
Loading
{{refName}}
default
Couldnotloadtags
Nothingtoshow
{{refName}}
default
Loading
10
branches
70
tags
Code
Loading
Latestcommit
juliaferraioli
andjdecked
UpdateLICENSEtousethefulltext
…
793a6a9
Oct13,2021
UpdateLICENSEtousethefulltext
793a6a9
Gitstats
395
commits
Files
Permalink
Failedtoloadlatestcommitinformation.
Type
Name
Latestcommitmessage
Committime
assets
Addednewassetsforv13.1.0
May28,2021
scripts
Don'tfaildeployscriptonemptyworkingtree
Jun1,2021
src
Fixpreviewmaxcdnlinks+svgassetpath
Mar11,2021
.gitignore
Add.npmrctogitignore
Jul17,2020
.travis.yml
Maketravisinstallfailifyarnlockneedsupdating
Apr3,2019
CONTRIBUTING.md
Renamescripts/generate->scripts/build.js
Sep25,2019
FOLDERS.md
CreateFOLDERS.md
Mar30,2017
LEGACY.md
ReorganizationandcleanupofREADME.md(#364)
Jul10,2019
LICENSE
UpdateLICENSEtousethefulltext
Oct13,2021
LICENSE-GRAPHICS
Initialopensourcerelease
Nov6,2014
README.md
UpdateREADMEtoclarifycustomemojisupport
Jul8,2021
bower.json
Don'tignoreV2filesinbower.json(fixes#171)
Sep5,2016
component.json
addedSELECTtothelistofignorednodes
Mar13,2015
index.d.ts
chore(typescript):addsdefinitions
Mar5,2021
index.html
Twemoji12.0update
Apr4,2019
package.json
Addindex.d.tstothenpmpackagedistribution#490
Jun8,2021
yarn.lock
Upgradedtwemoji-parserto13.1.0
May28,2021
Viewcode
TwitterEmoji(Twemoji)
Usage
CDNSupport
Download
API
twemoji.parse(...)V1
DOMparsing
Objectasparameter
callback
base
ext
className
size
folder
Utilities
twemoji.convert.fromCodePoint()
twemoji.convert.toCodePoint()
Tips
InlineStyles
UTF-8CharacterSet
ExcludeCharacters(V1)
LegacyAPI(V1)
Contributing
AttributionRequirements
CommunityProjects
CommittersandContributors
License
README.md
TwitterEmoji(Twemoji)
AsimplelibrarythatprovidesstandardUnicodeemojisupportacrossallplatforms.
Twemojiv13.1adherestotheUnicode13.0specandsupportstheEmoji13.1spec.Wedonotsupportcustomemoji.
TheTwemojilibraryofferssupportfor3,521Unicode-definedemojis.
Usage
CDNSupport
ThefolksoveratMaxCDNhavegraciouslyprovidedCDNsupport.
Usethefollowinginthe
tagofyourHTMLdocument(s):
Thisguaranteesthatyouwillalwaysusethelatestversionofthelibrary.
If,instead,you'dliketoincludethelatestversionexplicitly,youcanaddthefollowingtag:
Download
Ifinsteadyouwanttodownloadaspecificversion,pleaselookatthegh-pagesbranch,whereyouwillfindthebuiltassetsforbothourlatestandolderversions.
API
Followingareallthemethodsexposedinthetwemojinamespace.
twemoji.parse(...)V1
Thisisthemainparsingutilityandhas3overloadsperparsingtype.
Althoughtherearetwokindsofparsingsupportedbythisutility,werecommendyouuseDOMparsing,explainedbelow.Eachtypeofparsingacceptsacallbacktogenerateanimagesourceoranoptionsobjectwithparsinginfo.
Thesecondkindofparsingisstringparsing,explainedinthelegacydocumentationhere.Thisisunrecommendedbecausethismethoddoesnotsanitizethestringorotherwisepreventmaliciouscodefrombeingexecuted;suchsanitizationisoutofscope.
DOMparsing
Ifthefirstargumenttotwemoji.parseisanHTMLElement,generatedimagetagswillreplaceemojithatareinside#textnodesonlywithoutcompromisingsurroundingnodesorlisteners,andcompletelyavoidingtheusageofinnerHTML.
Ifsecurityisamajorconcern,thisparsingcanbeconsideredthesafestoptionbutwithaslightperformancepenaltyduetoDOMoperationsthatareinevitablycostly.
vardiv=document.createElement('div');
div.textContent='I\u2764\uFE0Femoji!';
document.body.appendChild(div);
twemoji.parse(document.body);
varimg=div.querySelector('img');
//notethedivispreserved
img.parentNode===div;//true
img.src;//https://twemoji.maxcdn.com/v/latest/72x72/2764.png
img.alt;//\u2764\uFE0F
img.className;//emoji
img.draggable;//false
AllotheroverloadsdescribedforstringareavailableinexactlythesamewayforDOMparsing.
Objectasparameter
Here'sthelistofpropertiesacceptedbytheoptionalobjectthatcanbepassedtotheparsefunction.
{
callback:Function,//defaultthecommonreplacer
attributes:Function,//defaultreturns{}
base:string,//defaultMaxCDN
ext:string,//default".png"
className:string,//default"emoji"
size:string|number,//default"72x72"
folder:string//incaseit'sspecified
//itreplaces.sizeinfo,ifany
}
callback
Thefunctiontoinvokeinordertogenerateimagesrc(s).
Bydefaultitisafunctionlikethefollowingone:
functionimageSourceGenerator(icon,options){
return''.concat(
options.base,//bydefaultTwitterInc.CDN
options.size,//bydefault"72x72"string
'/',
icon,//thefoundemojiascodepoint
options.ext//bydefault".png"
);
}
base
Thedefaulturlisthesameastwemoji.base,soifyoumodifytheformer,itwillreflectasdefaultforallparsedstringsornodes.
ext
Thedefaultimageextensionisthesameastwemoji.extwhichis".png".
Ifyoumodifytheformer,itwillreflectasdefaultforallparsedstringsornodes.
className
Thedefaultclassforeachgeneratedimageisemoji.Itispossibletospecifyadifferentonethroughthisproperty.
size
Thedefaultassetsizeisthesameastwemoji.sizewhichis"72x72".
Ifyoumodifytheformer,itwillreflectasdefaultforallparsedstringsornodes.
folder
Incaseyoudon'twanttospecifyasizefortheimage.Itispossibletochooseafolder,asinthecaseofSVGemoji.
twemoji.parse(genericNode,{
folder:'svg',
ext:'.svg'
});
Thiswillgenerateurlssuchhttps://twemoji.maxcdn.com/svg/2764.svginsteadofusingaspecificsizebasedimage.
Utilities
Basicutilities/helperstoconvertcodepointstoJavaScriptsurrogatesandviceversa.
twemoji.convert.fromCodePoint()
ForagivenHEXcodepoint,returnsUTF-16surrogatepairs.
twemoji.convert.fromCodePoint('1f1e8');
//"\ud83c\udde8"
twemoji.convert.toCodePoint()
ForgivenUTF-16surrogatepairs,returnstheequivalentHEXcodepoint.
twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
//"1f1e8-1f1f3"
twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3','~');
//"1f1e8~1f1f3"
Tips
InlineStyles
Ifyou'dliketosizetheemojiaccordingtothesurroundingtext,youcanaddthefollowingCSStoyourstylesheet:
img.emoji{
height:1em;
width:1em;
margin:0.05em0.1em;
vertical-align:-0.1em;
}
Thiswillmakesureemojiderivetheirwidthandheightfromthefont-sizeofthetextthey'reshownwith.Italsoaddsjustalittlebitofspacebeforeandaftereachemoji,andpullsthemupwardsalittlebitforbetteropticalalignment.
UTF-8CharacterSet
Toproperlysupportemoji,thedocumentcharactersetmustbesettoUTF-8.Thiscanbedonebyincludingthefollowingmetataginthedocument
ExcludeCharacters(V1)
Toexcludecertaincharactersfrombeingreplacedbytwemoji.js,calltwemoji.parse()withacallback,returningfalseforthespecificunicodeicon.Forexample:
twemoji.parse(document.body,{
callback:function(icon,options,variant){
switch(icon){
case'a9'://©copyright
case'ae'://®registeredtrademark
case'2122'://™trademark
returnfalse;
}
return''.concat(options.base,options.size,'/',icon,options.ext);
}
});
LegacyAPI(V1)
Ifyou'restillusingourV1API,youcanreadourlegacydocumentationhere.
Contributing
Thecontributingdocumentationcanbefoundhere.
AttributionRequirements
Asanopensourceproject,attributioniscriticalfromalegal,practicalandmotivationalperspectiveinouropinion.ThegraphicsarelicensedundertheCC-BY4.0whichhasaprettygoodguideonbestpracticesforattribution.
However,weconsidertheguideabitonerousandasaproject,willacceptamentioninaprojectREADMEoran'About'sectionorfooteronawebsite.Inmobileapplications,acommonplacewouldbeintheSettings/Aboutsection(forexample,seethemobileTwitterapplicationSettings->About->Legalsection).WewouldconsideramentionintheHTML/JSsourcesufficientalso.
CommunityProjects
TwemojiAmazingby@SebastianAigner:UseTwemojiusingCSSclasses(likeFontAwesome).
TwemojiRubyby@JollyGoodCode:UseTwemojiinRuby.
TwemojiforPencilby@Nathanielnw:UseTwemojiinPencil.
FrwTwemoji-Twemojiindotnetby@FrenchW:UseTwemojiinanydotnetproject(C#,asp.net...).
Emojiawesome-TwemojiforYellowby@datenstrom:UseTwemojionyourwebsite.
EmojiPanelforTwitterby@danielbovey:InsertTwemojiintoyourtweetsontwitter.com.
TwitterColorEmojifontby@bderickson:UseTwemojiasyoursystemdefaultfontonLinux&OSX.
Emojicaby@xoudini:AniOSframeworkallowingyoutoreplaceallstandardemojiinstringswithTwemoji.
gwt-twemojiby@nbartels:UseTwemojiinGWT
JavaFXEmojiTextFlowby@pavlobu:AJavaFXlibraryallowingyoutoreplaceallstandardemojiinextendedEmojiTextFlowwithTwemoji.
VueTwemojiPickerby@kevinfaguiar:Afastplug-n-playTwemojiPicker(+textareaforTwemojirendering)forVue.
[Unmaintained]TwemojiAwesomeby@ellekasai:UseTwemojiusingCSSclasses(likeFontAwesome).
EmojiOnRokuby@KasperGam:UseTwemojionRoku!
[email protected]:UseTwemojiinLaTeX.
PHPTwemojiby@Astrotomic:UsetwemojiwithinyourPHPwebsiteproject'sbyreplacingstandardEmojiwithtwemojiurls.
CommittersandContributors
JustineDeCaires(Twitter)
JasonSofonia(Twitter)
BryanHaggerty(ex-Twitter)
NathanDowns(ex-Twitter)
TomWuttke(ex-Twitter)
AndreaGiammarchi(ex-Twitter)
JoenAsmussen(WordPress)
MarcusKazmierczak(WordPress)
Thegoalofthisprojectistosimplyprovideemojiforeveryone.Wedefinitelywelcomeimprovementsandfixes,butwemaynotmergeeverypullrequestsuggestedbythecommunityduetothesimplenatureoftheproject.
TherulesforcontributingareavailableintheCONTRIBUTING.mdfile.
Thankyoutoallofourcontributors.
License
Copyright2019Twitter,Incandothercontributors
CodelicensedundertheMITLicense:http://opensource.org/licenses/MIT
GraphicslicensedunderCC-BY4.0:https://creativecommons.org/licenses/by/4.0/
About
Emojiforeveryone.https://twemoji.twitter.com/
Topics
emoji
twemoji
Resources
Readme
License
Viewlicense
Codeofconduct
Codeofconduct
Releases
27
Twemoji13.1.0update
Latest
May28,2021
+26releases
Packages0
Nopackagespublished
Usedby6.9k
+6,924
Contributors54
+43contributors
Languages
HTML
74.0%
JavaScript
25.7%
Shell
0.3%
Youcan’tperformthatactionatthistime.
Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession.
Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.
