CODEWITHSUNDEEP
vue.jstwemoji
user1525612
user1525612

Reputation: 2014

How to use SVG version of Twemoji in Vue?

I am using twemoji in my Vue project. I have included the twemoji package and it all works well.

I have a directive like so:

import twemoji from 'twemoji'

Vue.directive('emoji', {
  inserted (el) {
    el.innerHTML = twemoji.parse(el.innerHTML)
  }
})

and I use it like this:

<template>
  <div v-emoji class="hello">
    Hello there!✨🍣😋
  </div>
</template>

This all works really well. But the default twemoji extension is PNG which renders a bit blurry on mobile phones. I would like to use the SVG option instead.

The official twemoji docs says that I can use SVGs:

Object as parameter
Here's the list of properties accepted by the optional object that can be passed to the parse function.

  {
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "36x36"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
  }

But I do not know how to declare these options when I define my directive.

Here is a fiddle: https://codepen.io/tdkn/pen/yEmazB

Thanks!

Upvotes: 0

Views: 364

Answers (1)

mros2016
mros2016

Reputation: 11

Passing the optional object with properties size and ext did the trick for me. This will generate the svg URL 

import twemoji from 'twemoji'

Vue.directive('emoji', {
  inserted (el) {
    el.innerHTML = twemoji.parse(el.innerHTML, {  size: 'svg', ext: '.svg' })
  }
})

Upvotes: 1

Related Questions