Webpack: bundle Twemoji icons as assets

app/soapbox/components/autosuggest_emoji.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
-import { join } from 'path';
-import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 export default class AutosuggestEmoji extends React.PureComponent {
 
@@ -23,7 +21,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
         return null;
       }
 
-      url = join(FE_SUBDIRECTORY, 'emoji', `${mapping.filename}.svg`);
+      url = require(`twemoji/assets/svg/${mapping.filename}.svg`);
     }
 
     return (

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -7,8 +7,6 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { buildCustomEmojis } from '../../emoji/emoji';
-import { join } from 'path';
-import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -29,7 +27,7 @@ const messages = defineMessages({
 
 let EmojiPicker, Emoji; // load asynchronously
 
-const backgroundImageFn = () => join(FE_SUBDIRECTORY, 'emoji', 'sheet_13.png');
+const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 const categoriesSort = [
@@ -358,8 +356,8 @@ class EmojiPickerDropdown extends React.PureComponent {
         <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
           <img
             className={classNames('emojione', { 'pulse-loading': active && loading })}
-            alt='🙂'
-            src={join(FE_SUBDIRECTORY, 'emoji', '1f602.svg')}
+            alt='😂'
+            src={require('twemoji/assets/svg/1f602.svg')}
           />
         </div>
 

app/soapbox/features/emoji/emoji.js

@@ -1,7 +1,5 @@
 import unicodeMapping from './emoji_unicode_mapping_light';
 import Trie from 'substring-trie';
-import { join } from 'path';
-import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
@@ -62,7 +60,8 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${join(FE_SUBDIRECTORY, 'emoji', `${filename}.svg`)}" />`;
+      const src = require(`twemoji/assets/svg/${filename}.svg`);
+      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {

webpack/shared.js

@@ -89,12 +89,6 @@ module.exports = {
     new HtmlWebpackHarddiskPlugin(),
     new CopyPlugin({
       patterns: [{
-        from: join(__dirname, '../node_modules/twemoji/assets/svg'),
-        to: join(output.path, 'emoji'),
-      }, {
-        from: join(__dirname, '../node_modules/emoji-datasource/img/twitter/sheets/32.png'),
-        to: join(output.path, 'emoji/sheet_13.png'),
-      }, {
         from: join(__dirname, '../app/sounds'),
         to: join(output.path, 'sounds'),
       }, {