vue.js - 如何在 Vue 中使用 SVG 版本的 Twemoji？

Question

我在我的 Vue 项目中使用 twemoji。我已经包含了 twemoji 包，它运行良好。

我有一个这样的指令：

import twemoji from 'twemoji'

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

我像这样使用它：

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

这一切都很好。但默认的 twemoji 扩展名是 PNG，它在手机上呈现有点模糊。我想改用 SVG 选项。

官方 twemoji 文档说我可以使用 SVG：

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
  }

但是当我定义我的指令时，我不知道如何声明这些选项。

这是一个小提琴：https ://codepen.io/tdkn/pen/yEmazB

谢谢！

Answer 1

传递带有属性的可选对象size并ext为我做了诀窍。这将生成 svg URL

import twemoji from 'twemoji'

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