Replace emoji category icons with SVGs

This way they're not blurry anymore.

public/emoji/flags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#00247D" d="M0 9.059V13h5.628zM4.664 31H13v-5.837zM23 25.164V31h8.335zM0 23v3.941L5.63 23zM31.337 5H23v5.837zM36 26.942V23h-5.631zM36 13V9.059L30.371 13zM13 5H4.664L13 10.837z"/><path fill="#CF1B2B" d="M25.14 23l9.712 6.801c.471-.479.808-1.082.99-1.749L28.627 23H25.14zM13 23h-2.141l-9.711 6.8c.521.53 1.189.909 1.938 1.085L13 23.943V23zm10-10h2.141l9.711-6.8c-.521-.53-1.188-.909-1.937-1.085L23 12.057V13zm-12.141 0L1.148 6.2C.677 6.68.34 7.282.157 7.949L7.372 13h3.487z"/><path fill="#EEE" d="M36 21H21v10h2v-5.836L31.335 31H32c1.117 0 2.126-.461 2.852-1.199L25.14 23h3.487l7.215 5.052c.093-.337.158-.686.158-1.052v-.058L30.369 23H36v-2zM0 21v2h5.63L0 26.941V27c0 1.091.439 2.078 1.148 2.8l9.711-6.8H13v.943l-9.914 6.941c.294.07.598.116.914.116h.664L13 25.163V31h2V21H0zM36 9c0-1.091-.439-2.078-1.148-2.8L25.141 13H23v-.943l9.915-6.942C32.62 5.046 32.316 5 32 5h-.663L23 10.837V5h-2v10h15v-2h-5.629L36 9.059V9zM13 5v5.837L4.664 5H4c-1.118 0-2.126.461-2.852 1.2l9.711 6.8H7.372L.157 7.949C.065 8.286 0 8.634 0 9v.059L5.628 13H0v2h15V5h-2z"/><path fill="#CF1B2B" d="M21 15V5h-6v10H0v6h15v10h6V21h15v-6z"/></svg>

public/emoji/objects.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFD983" d="M29 11.06c0 6.439-5 7.439-5 13.44 0 3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C11.914 18.5 7 17.5 7 11.06 7 5.029 12.285.14 18.083.14 23.883.14 29 5.029 29 11.06z"/><path fill="#CCD6DD" d="M22.167 32.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/><path fill="#FFCC4D" d="M22.707 10.293c-.391-.391-1.023-.391-1.414 0L18 13.586l-3.293-3.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414L17 15.414V26c0 .553.448 1 1 1s1-.447 1-1V15.414l3.707-3.707c.391-.391.391-1.023 0-1.414z"/><path fill="#99AAB5" d="M24 31c0 1.104-.896 2-2 2h-8c-1.104 0-2-.896-2-2v-6h12v6z"/><path fill="#CCD6DD" d="M11.999 32c-.48 0-.904-.347-.985-.836-.091-.544.277-1.06.822-1.15l12-2c.544-.098 1.06.277 1.15.822.091.544-.277 1.06-.822 1.15l-12 2c-.055.01-.111.014-.165.014zm0-4c-.48 0-.904-.347-.985-.836-.091-.544.277-1.06.822-1.15l12-2c.544-.097 1.06.277 1.15.822.091.544-.277 1.06-.822 1.15l-12 2c-.055.01-.111.014-.165.014z"/></svg>

public/emoji/people.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><path fill="#664500" d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.145.591.175.142.426.147.61.014.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.177-.142.238-.386.145-.594zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.144.591.176.142.427.147.61.014.013-.009 1.262-.902 3.703-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.178-.142.237-.386.145-.594zM18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"/><path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z"/></svg>

public/emoji/symbols.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z"/><path fill="#FFF" d="M12.83 27.757l.741-.854c.494-.57.836-.874 1.444-.874.551 0 1.045.475 1.045 1.196 0 .513-.437 1.121-1.045 1.805l-.475.514 1.292 1.462c.266.305.418.514.418.95 0 .646-.608 1.272-1.33 1.272-.437 0-.722-.133-1.007-.437l-1.311-1.368c-1.235 1.083-2.489 1.805-4.179 1.805-2.546 0-4.654-1.443-4.654-4.103 0-1.881 1.311-3.268 2.869-4.123-.741-.74-1.254-1.501-1.254-2.565 0-2.166 2.033-3.191 3.989-3.191 1.71 0 3.876.969 3.876 2.982 0 1.519-1.197 2.697-2.413 3.324l1.994 2.205zM8.137 26.56c-.855.552-1.634 1.216-1.634 2.299 0 1.197.817 1.862 1.976 1.862 1.025 0 1.69-.418 2.413-1.102L8.137 26.56zm1.235-5.148c-.494 0-1.14.379-1.14.949s.266.912 1.007 1.634c.57-.285 1.387-.798 1.387-1.481 0-.856-.76-1.102-1.254-1.102zm10.358.911c0-1.652 1.234-3.077 2.926-3.077 1.689 0 2.925 1.425 2.925 3.077 0 1.653-1.235 3.059-2.925 3.059-1.691 0-2.926-1.405-2.926-3.059zm3.914 0c0-.607-.36-1.14-.987-1.14s-.988.532-.988 1.14c0 .608.361 1.121.988 1.121.626 0 .987-.512.987-1.121zm4.616-2.583c.247-.475.438-.608.874-.608.589 0 1.12.476 1.12 1.063 0 .152 0 .285-.151.57l-6.384 11.949c-.284.399-.399.627-.854.627-.494 0-1.084-.475-1.084-1.045 0-.285.114-.551.19-.703L28.26 19.74zm-1.843 10.429c0-1.652 1.235-3.077 2.926-3.077 1.69 0 2.925 1.425 2.925 3.077 0 1.653-1.234 3.059-2.925 3.059-1.691 0-2.926-1.406-2.926-3.059zm3.913 0c0-.607-.36-1.14-.987-1.14s-.987.532-.987 1.14c0 .608.36 1.121.987 1.121s.987-.513.987-1.121zM3 3h14v3H3zm14 6H3v3h5v5h4v-5h5zm15-4l-5-2v8.203c-.538-.126-1.19-.203-2-.203-2 0-4 2-4 4 0 1 1 2 3 2 3 0 5-2 5-4V6.8L32 8V5z"/></svg>

public/emoji/travel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#66757F" d="M30 23.828c-.391.392-1.023.392-1.414 0l-1.414-1.414c-.392-.391-.392-1.024 0-1.414L30 18.172c.391-.391 1.023-.391 1.414 0l1.414 1.414c.392.391.392 1.024 0 1.414L30 23.828zm-15-15c-.391.392-1.023.392-1.414 0l-1.414-1.414c-.392-.391-.392-1.023 0-1.414L15 3.172c.391-.391 1.023-.391 1.414 0l1.414 1.414c.392.391.392 1.023 0 1.414L15 8.828z"/><path fill="#55ACEE" d="M2 22c2 0 11 1 11 1s1 9 1 11-2 2-3 1-4-6-4-6-5-3-6-4-1-3 1-3zM4 6.039C7 6 29 7 29 7s.924 22 .962 25c.038 3-2.763 4.002-3.862.001S21 15 21 15 7.045 10.583 3.995 9.898C0 9 .999 6.077 4 6.039z"/><path fill="#CCD6DD" d="M27 3c2-2 7-3 8-2s0 6-2 8-19 18-19 18-6.5 4.5-8 3 3-8 3-8S25 5 27 3z"/><path fill="#66757F" d="M14 22s.5.5-4 5-5 4-5 4-.5-.5 4-5 5-4 5-4zM29 4c1.657 0 3 1.343 3 3h.805c.114-.315.195-.645.195-1 0-1.657-1.343-3-3-3-.355 0-.685.081-1 .195V4z"/></svg>

src/partials/emoji-picker.html

@@ -2,7 +2,7 @@
     <div class="tab">
         <input type="radio" id="tab-0" name="tabs" checked>
         <label for="tab-0" title="Smileys &amp; People">
-            <span class="em em-people em-people-1f604"></span>
+            <img src="/emoji/people.svg" class="em-people" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-people-1f600" data-c="1f600" data-s=":grinning:" title="grinning face">&#x1f600;</span>
@@ -1140,7 +1140,7 @@
     <div class="tab">
         <input type="radio" id="tab-1" name="tabs">
         <label for="tab-1" title="Animals &amp; Nature">
-            <span class="em em-nature em-nature-1f426"></span>
+            <img src="/emoji/nature.svg" class="em-nature" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-nature-1f436" data-c="1f436" data-s=":dog:" title="dog face">&#x1f436;</span>
@@ -1325,7 +1325,7 @@
     <div class="tab">
         <input type="radio" id="tab-2" name="tabs">
         <label for="tab-2" title="Food &amp; Drink">
-            <span class="em em-food em-food-1f354"></span>
+            <img src="/emoji/food.svg" class="em-food" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-food-1f34f" data-c="1f34f" data-s=":green_apple:" title="green apple">&#x1f34f;</span>
@@ -1438,7 +1438,7 @@
     <div class="tab">
         <input type="radio" id="tab-3" name="tabs">
         <label for="tab-3" title="Activity">
-            <span class="em em-activity em-activity-26bd"></span>
+            <img src="/emoji/activity.svg" class="em-activity" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-activity-26bd" data-c="26bd" data-s=":soccer:" title="soccer ball">&#x26bd;</span>
@@ -1686,7 +1686,7 @@
     <div class="tab">
         <input type="radio" id="tab-4" name="tabs">
         <label for="tab-4" title="Travel &amp; Places">
-            <span class="em em-travel em-travel-2708"></span>
+            <img src="/emoji/travel.svg" class="em-travel" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-travel-1f697" data-c="1f697" data-s=":red_car:" title="automobile">&#x1f697;</span>
@@ -1816,7 +1816,7 @@
     <div class="tab">
         <input type="radio" id="tab-5" name="tabs">
         <label for="tab-5" title="Objects">
-            <span class="em em-objects em-objects-1f4a1"></span>
+            <img src="/emoji/objects.svg" class="em-objects" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-objects-231a" data-c="231a" data-s=":watch:" title="watch">&#x231a;</span>
@@ -2031,7 +2031,7 @@
     <div class="tab">
         <input type="radio" id="tab-6" name="tabs">
         <label for="tab-6" title="Symbols">
-            <span class="em em-symbols em-symbols-1f523"></span>
+            <img src="/emoji/symbols.svg" class="em-symbols" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-symbols-2764" data-c="2764" data-s=":heart:" title="red heart">&#x2764;</span>
@@ -2314,7 +2314,7 @@
     <div class="tab">
         <input type="radio" id="tab-7" name="tabs">
         <label for="tab-7" title="Flags">
-            <span class="em em-flags em-flags-1f1ec-1f1e7"></span>
+            <img src="/emoji/flags.svg" class="em-flags" height="24" width="24"></span>
         </label>
         <div class="content">
             <span class="em em-flags-1f3f3" data-c="1f3f3" data-s=":flag_white:" title="white flag">&#x1f3f3;</span>

src/sass/components/_emoji_picker.scss

@@ -32,10 +32,10 @@
         position: relative;
         left: 1px;
         margin-left: -1px;
-        .em {
+        img {
+            @include mouse-hand;
             position: relative;
-            left: 2px;
-            transform: scale(0.75);
+            margin: 3px 4px 0;
         }
     }
 

tools/twemoji/generate-emoji-picker.py

@@ -14,14 +14,14 @@ with open(GROUPS_JSON, 'r') as f:
 # Define category order
 
 category_order = [
-    {'id': 'people', 'name': 'Smileys & People', 'icon': '1f604'},
-    {'id': 'nature', 'name': 'Animals & Nature', 'icon': '1f426'},
-    {'id': 'food', 'name': 'Food & Drink', 'icon': '1f354'},
-    {'id': 'activity', 'name': 'Activity', 'icon': '26bd'},
-    {'id': 'travel', 'name': 'Travel & Places', 'icon': '2708'},
-    {'id': 'objects', 'name': 'Objects', 'icon': '1f4a1'},
-    {'id': 'symbols', 'name': 'Symbols', 'icon': '1f523'},
-    {'id': 'flags', 'name': 'Flags', 'icon': '1f1ec-1f1e7'},
+    {'id': 'people', 'name': 'Smileys & People'},
+    {'id': 'nature', 'name': 'Animals & Nature'},
+    {'id': 'food', 'name': 'Food & Drink'},
+    {'id': 'activity', 'name': 'Activity'},
+    {'id': 'travel', 'name': 'Travel & Places'},
+    {'id': 'objects', 'name': 'Objects'},
+    {'id': 'symbols', 'name': 'Symbols'},
+    {'id': 'flags', 'name': 'Flags'},
 ]
 
 
@@ -38,7 +38,7 @@ for i, category in enumerate(category_order):
     print('    <div class="tab">')
     print('        <input type="radio" id="tab-%d" name="tabs"%s>' % (i, ' checked' if i == 0 else ''))
     print('        <label for="tab-%d" title="%s">' % (i, category['name']))
-    print('            <span class="em em-{0} em-{0}-{1}"></span>'.format(category['id'], category['icon']))
+    print('            <img src="/emoji/{0}.svg" class="em-{0}" height="24" width="24"></span>'.format(category['id']))
     print('        </label>')
     print('        <div class="content">')
     for emoji in groups[category['id']]: