Skip to content

Adding Emojis

Jump to bottom
ivan-gryzunov edited this page Dec 9, 2021 · 5 revisions

How to add emojis

  1. Select a file with .svg extension or create an emoticon at online services (https://yqnn.github.io/svg-path-editor)

    For example, we add the emoticon:

  2. Open the file content via text editor.

    Content of the emoticon looks like this:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
   <path fill="#EF9645" d="M15.977 9.36h3.789c.114-.191.147-.439.058-.673l-3.846-4.705V9.36z"/>
   <path fill="#FFDC5D" d="M12.804 22.277c-.057-.349-.124-.679-.206-.973-.62-2.223-1.14-3.164-.918-5.494.29-1.584.273-4.763 4.483-4.268 1.112.131 2.843.927 3.834.91.567-.01.98-1.157 1.017-1.539.051-.526-.865-1.42-1.248-1.554-.383-.134-2.012-.631-2.681-.824-1.039-.301-.985-1.705-1.051-2.205-.031-.235.084-.467.294-.591.21-.124.375-.008.579.125l.885.648c.497.426-.874 1.24-.503 1.376 0 0 1.755.659 2.507.796.412.075 1.834-1.529 1.917-2.47.065-.74-3.398-4.083-5.867-5.381-.868-.456-1.377-.721-1.949-.694-.683.032-.898.302-1.748 1.03C8.302 4.46 4.568 11.577 4.02 13.152c-2.246 6.461-2.597 9.865-2.677 11.788-.049.59-.076 1.177-.076 1.758.065 0-1 5 0 6s5.326 1 5.326 1c10 3.989 28.57 2.948 28.57-7.233 0-12.172-18.813-10.557-22.359-4.188z"/>
   <path fill="#EF9645" d="M20.63 32.078c-3.16-.332-5.628-1.881-5.767-1.97-.465-.297-.601-.913-.305-1.379s.913-.603 1.38-.308c.04.025 4.003 2.492 7.846 1.467 2.125-.566 3.867-2.115 5.177-4.601.258-.49.866-.676 1.351-.419.488.257.676.862.419 1.351-1.585 3.006-3.754 4.893-6.447 5.606-1.257.332-2.502.374-3.654.253z"/>
</svg>

  3. Copy the svg content and encode it to base64 using online services (https://www.base64encode.org/)

    Encoding content looks like this:

       PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0VGOTY0NSIgZD0iTTE1Ljk3NyA5LjM2aDMuNzg5Yy4xMTQtLjE5MS4xNDctLjQzOS4wNTgtLjY3M2wtMy44NDYtNC43MDVWOS4zNnoiLz48cGF0aCBmaWxsPSIjRkZEQzVEIiBkPSJNMTIuODA0IDIyLjI3N2MtLjA1Ny0uMzQ5LS4xMjQtLjY3OS0uMjA2LS45NzMtLjYyLTIuMjIzLTEuMTQtMy4xNjQtLjkxOC01LjQ5NC4yOS0xLjU4NC4yNzMtNC43NjMgNC40ODMtNC4yNjggMS4xMTIuMTMxIDIuODQzLjkyNyAzLjgzNC45MS41NjctLjAxLjk4LTEuMTU3IDEuMDE3LTEuNTM5LjA1MS0uNTI2LS44NjUtMS40Mi0xLjI0OC0xLjU1NC0uMzgzLS4xMzQtMi4wMTItLjYzMS0yLjY4MS0uODI0LTEuMDM5LS4zMDEtLjk4NS0xLjcwNS0xLjA1MS0yLjIwNS0uMDMxLS4yMzUuMDg0LS40NjcuMjk0LS41OTEuMjEtLjEyNC4zNzUtLjAwOC41NzkuMTI1bC44ODUuNjQ4Yy40OTcuNDI2LS44NzQgMS4yNC0uNTAzIDEuMzc2IDAgMCAxLjc1NS42NTkgMi41MDcuNzk2LjQxMi4wNzUgMS44MzQtMS41MjkgMS45MTctMi40Ny4wNjUtLjc0LTMuMzk4LTQuMDgzLTUuODY3LTUuMzgxLS44NjgtLjQ1Ni0xLjM3Ny0uNzIxLTEuOTQ5LS42OTQtLjY4My4wMzItLjg5OC4zMDItMS43NDggMS4wM0M4LjMwMiA0LjQ2IDQuNTY4IDExLjU3NyA0LjAyIDEzLjE1MmMtMi4yNDYgNi40NjEtMi41OTcgOS44NjUtMi42NzcgMTEuNzg4LS4wNDkuNTktLjA3NiAxLjE3Ny0uMDc2IDEuNzU4LjA2NSAwLTEgNSAwIDZzNS4zMjYgMSA1LjMyNiAxYzEwIDMuOTg5IDI4LjU3IDIuOTQ4IDI4LjU3LTcuMjMzIDAtMTIuMTcyLTE4LjgxMy0xMC41NTctMjIuMzU5LTQuMTg4eiIvPjxwYXRoIGZpbGw9IiNFRjk2NDUiIGQ9Ik0yMC42MyAzMi4wNzhjLTMuMTYtLjMzMi01LjYyOC0xLjg4MS01Ljc2Ny0xLjk3LS40NjUtLjI5Ny0uNjAxLS45MTMtLjMwNS0xLjM3OXMuOTEzLS42MDMgMS4zOC0uMzA4Yy4wNC4wMjUgNC4wMDMgMi40OTIgNy44NDYgMS40NjcgMi4xMjUtLjU2NiAzLjg2Ny0yLjExNSA1LjE3Ny00LjYwMS4yNTgtLjQ5Ljg2Ni0uNjc2IDEuMzUxLS40MTkuNDg4LjI1Ny42NzYuODYyLjQxOSAxLjM1MS0xLjU4NSAzLjAwNi0zLjc1NCA0Ljg5My02LjQ0NyA1LjYwNi0xLjI1Ny4zMzItMi41MDIuMzc0LTMuNjU0LjI1M3oiLz48L3N2Zz4=

  4. Open src/main/resources/images/emoticons/emoticons.json file.

    For adding the emoticon to existing group, write to end of the group content (to begin, to middle, it doesn't matter) following record:

     {
         "shortcodes": [
           ":yourShortcode:"
         ],
         "base64SvgContent": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0VGOTY0NSIgZD0iTTE1Ljk3NyA5LjM2aDMuNzg5Yy4xMTQtLjE5MS4xNDctLjQzOS4wNTgtLjY3M2wtMy44NDYtNC43MDVWOS4zNnoiLz48cGF0aCBmaWxsPSIjRkZEQzVEIiBkPSJNMTIuODA0IDIyLjI3N2MtLjA1Ny0uMzQ5LS4xMjQtLjY3OS0uMjA2LS45NzMtLjYyLTIuMjIzLTEuMTQtMy4xNjQtLjkxOC01LjQ5NC4yOS0xLjU4NC4yNzMtNC43NjMgNC40ODMtNC4yNjggMS4xMTIuMTMxIDIuODQzLjkyNyAzLjgzNC45MS41NjctLjAxLjk4LTEuMTU3IDEuMDE3LTEuNTM5LjA1MS0uNTI2LS44NjUtMS40Mi0xLjI0OC0xLjU1NC0uMzgzLS4xMzQtMi4wMTItLjYzMS0yLjY4MS0uODI0LTEuMDM5LS4zMDEtLjk4NS0xLjcwNS0xLjA1MS0yLjIwNS0uMDMxLS4yMzUuMDg0LS40NjcuMjk0LS41OTEuMjEtLjEyNC4zNzUtLjAwOC41NzkuMTI1bC44ODUuNjQ4Yy40OTcuNDI2LS44NzQgMS4yNC0uNTAzIDEuMzc2IDAgMCAxLjc1NS42NTkgMi41MDcuNzk2LjQxMi4wNzUgMS44MzQtMS41MjkgMS45MTctMi40Ny4wNjUtLjc0LTMuMzk4LTQuMDgzLTUuODY3LTUuMzgxLS44NjgtLjQ1Ni0xLjM3Ny0uNzIxLTEuOTQ5LS42OTQtLjY4My4wMzItLjg5OC4zMDItMS43NDggMS4wM0M4LjMwMiA0LjQ2IDQuNTY4IDExLjU3NyA0LjAyIDEzLjE1MmMtMi4yNDYgNi40NjEtMi41OTcgOS44NjUtMi42NzcgMTEuNzg4LS4wNDkuNTktLjA3NiAxLjE3Ny0uMDc2IDEuNzU4LjA2NSAwLTEgNSAwIDZzNS4zMjYgMSA1LjMyNiAxYzEwIDMuOTg5IDI4LjU3IDIuOTQ4IDI4LjU3LTcuMjMzIDAtMTIuMTcyLTE4LjgxMy0xMC41NTctMjIuMzU5LTQuMTg4eiIvPjxwYXRoIGZpbGw9IiNFRjk2NDUiIGQ9Ik0yMC42MyAzMi4wNzhjLTMuMTYtLjMzMi01LjYyOC0xLjg4MS01Ljc2Ny0xLjk3LS40NjUtLjI5Ny0uNjAxLS45MTMtLjMwNS0xLjM3OXMuOTEzLS42MDMgMS4zOC0uMzA4Yy4wNC4wMjUgNC4wMDMgMi40OTIgNy44NDYgMS40NjcgMi4xMjUtLjU2NiAzLjg2Ny0yLjExNSA1LjE3Ny00LjYwMS4yNTgtLjQ5Ljg2Ni0uNjc2IDEuMzUxLS40MTkuNDg4LjI1Ny42NzYuODYyLjQxOSAxLjM1MS0xLjU4NSAzLjAwNi0zLjc1NCA0Ljg5My02LjQ0NyA1LjYwNi0xLjI1Ny4zMzItMi41MDIuMzc0LTMuNjU0LjI1M3oiLz48L3N2Zz4="
 }

    Paste the encoding content to base64SvgContent field. Come up with your shortcode for the emoticon. If possible it is better to wrap in the colons :. It is allowed to have several shortcodes. The main condition is that they must be unique, otherwise an error will appear.

    Done!

    image

    If you take a proprietary emoticon, then you must paste new group indicating the site where you got it from.

     {
     "name": "group name",
     "attribution": "www.site.com",
     "emoticons": [
       {
         "shortcodes": [
           ":yourShortcode:"
         ],
         "base64SvgContent": "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZmlsbD0iI0VGOTY0NSIgZD0iTTE1Ljk3NyA5LjM2aDMuNzg5Yy4xMTQtLjE5MS4xNDctLjQzOS4wNTgtLjY3M2wtMy44NDYtNC43MDVWOS4zNnoiLz48cGF0aCBmaWxsPSIjRkZEQzVEIiBkPSJNMTIuODA0IDIyLjI3N2MtLjA1Ny0uMzQ5LS4xMjQtLjY3OS0uMjA2LS45NzMtLjYyLTIuMjIzLTEuMTQtMy4xNjQtLjkxOC01LjQ5NC4yOS0xLjU4NC4yNzMtNC43NjMgNC40ODMtNC4yNjggMS4xMTIuMTMxIDIuODQzLjkyNyAzLjgzNC45MS41NjctLjAxLjk4LTEuMTU3IDEuMDE3LTEuNTM5LjA1MS0uNTI2LS44NjUtMS40Mi0xLjI0OC0xLjU1NC0uMzgzLS4xMzQtMi4wMTItLjYzMS0yLjY4MS0uODI0LTEuMDM5LS4zMDEtLjk4NS0xLjcwNS0xLjA1MS0yLjIwNS0uMDMxLS4yMzUuMDg0LS40NjcuMjk0LS41OTEuMjEtLjEyNC4zNzUtLjAwOC41NzkuMTI1bC44ODUuNjQ4Yy40OTcuNDI2LS44NzQgMS4yNC0uNTAzIDEuMzc2IDAgMCAxLjc1NS42NTkgMi41MDcuNzk2LjQxMi4wNzUgMS44MzQtMS41MjkgMS45MTctMi40Ny4wNjUtLjc0LTMuMzk4LTQuMDgzLTUuODY3LTUuMzgxLS44NjgtLjQ1Ni0xLjM3Ny0uNzIxLTEuOTQ5LS42OTQtLjY4My4wMzItLjg5OC4zMDItMS43NDggMS4wM0M4LjMwMiA0LjQ2IDQuNTY4IDExLjU3NyA0LjAyIDEzLjE1MmMtMi4yNDYgNi40NjEtMi41OTcgOS44NjUtMi42NzcgMTEuNzg4LS4wNDkuNTktLjA3NiAxLjE3Ny0uMDc2IDEuNzU4LjA2NSAwLTEgNSAwIDZzNS4zMjYgMSA1LjMyNiAxYzEwIDMuOTg5IDI4LjU3IDIuOTQ4IDI4LjU3LTcuMjMzIDAtMTIuMTcyLTE4LjgxMy0xMC41NTctMjIuMzU5LTQuMTg4eiIvPjxwYXRoIGZpbGw9IiNFRjk2NDUiIGQ9Ik0yMC42MyAzMi4wNzhjLTMuMTYtLjMzMi01LjYyOC0xLjg4MS01Ljc2Ny0xLjk3LS40NjUtLjI5Ny0uNjAxLS45MTMtLjMwNS0xLjM3OXMuOTEzLS42MDMgMS4zOC0uMzA4Yy4wNC4wMjUgNC4wMDMgMi40OTIgNy44NDYgMS40NjcgMi4xMjUtLjU2NiAzLjg2Ny0yLjExNSA1LjE3Ny00LjYwMS4yNTgtLjQ5Ljg2Ni0uNjc2IDEuMzUxLS40MTkuNDg4LjI1Ny42NzYuODYyLjQxOSAxLjM1MS0xLjU4NSAzLjAwNi0zLjc1NCA0Ljg5My02LjQ0NyA1LjYwNi0xLjI1Ny4zMzItMi41MDIuMzc0LTMuNjU0LjI1M3oiLz48L3N2Zz4="
       }
     ]
}
Clone this wiki locally