title: How do I use `ember-emojione` with `emojione-png-sprites`?
body: <p>I'm using <a href="https://github.com/Deveo/ember-emojione" rel="nofollow noreferrer">ember-emojione</a> to display and insert emoji.</p>
  
  <p>Out of four rendering options that EmojiOne offers:</p>
  
  <ul>
  <li>PNG sprites</li>
  <li>PNG individual images</li>
  <li>SVG sprites</li>
  <li>SVG individual images</li>
  </ul>
  
  <p>...only PNG sprites suit me. Individual images take too much time to load and emoji display sequentially. SVG sprites are awesome, but rerendering the preview area causes SVG sprite emoji to flicker. Only PNG sprite emoji never flicker and display simultaneously.</p>
  
  <p>Unfortunately, EmojiOne offers spritesheets only in three sizes: 64, 128 and 512 px. We need to display emoji in 20 px size.</p>
  
  <p>Resizing emoji displayed via PNG sprites is problematic.</p>
  
  <p><code>ember-emojione</code> readme suggests this hack to resize PNG sprite emoji:</p>
  
  <pre><code>.emojione {
    transform: scale(0.3125);
    margin: -22px;
  }
  </code></pre>
  
  <p>It works, but it has some disadvantages: </p>
  
  <ul>
  <li>In certain cases, emoji appear blurred.</li>
  <li><p>Text selection blows up:</p>
  
  <p><a href="https://i.stack.imgur.com/SyL0l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SyL0l.png" alt="enter image description here"></a></p></li>
  </ul>
  
  <p>The solution is to use emoji spritesheets tailored to desired size. The <a href="https://github.com/Deveo/emojione-png-sprites" rel="nofollow noreferrer">Deveo/emojione-png-sprites</a> repo offers such spritesheets.</p>
  
  <p>But when I include those spritesheets instead of default ones, <code>ember-emojione</code> emoji picker component displays incorrectly.</p>
  
  <p><strong>Question</strong>: how do I use <code>ember-emojione</code> with <code>emojione-png-sprites</code> correctly?</p>