Ember.js 如何将'ember emojione'与'emojione png sprites'一起使用？

我正在使用显示和插入表情符号

在EmojiOne提供的四种渲染选项中：

• PNG精灵
• PNG个人图像
• SVG精灵
• SVG单个图像

…只有PNG雪碧适合我。单个图像的加载和表情符号的顺序显示花费了太多时间。SVG精灵非常棒，但是重新命名预览区域会导致SVG精灵表情闪烁。只有PNG精灵表情符号从不同时闪烁和显示

不幸的是，EmojiOne提供的SpriteSheet只有三种尺寸：64像素、128像素和512像素。我们需要显示20像素大小的表情符号

调整通过PNG精灵显示的表情符号的大小是有问题的

ember表情符号

readme建议使用此方法调整PNG sprite表情符号的大小：

.emojione {
  transform: scale(0.3125);
  margin: -22px;
}

这是可行的，但也有一些缺点：

• 在某些情况下，表情符号看起来很模糊
• 文本选择放大：

解决方案是使用符合所需大小的表情精灵表。回购协议提供了这种精神

但是当我包含这些精灵表而不是默认的精灵表时，

ember-emojione

emoji-picker组件显示不正确

---

问题：如何正确地将

embojione

与

emojione png精灵一起使用？
emojione png精灵
依赖于Sass混音，因此您需要
ember cli Sass
。如果您不想安装
ember cli sass
，您也可以手动预编译mixin调用，并将生成的CSS插入应用程序

决定从
emojione png精灵中包含哪些精灵表

我们将使用20px表情符号。对于视网膜，我们还需要两倍和三倍大小的精灵表。由于40px和60px不可用，我们将使用下一个可用的：48px和64px

将spritesheets和Sass文件包含到您的回购协议中。在您的Ember应用程序根目录中运行以下命令：

bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss

使用特定版本的文件非常重要，这样可以锁定依赖项。否则，如果回购协议有突破性的变更，无辜的
bower安装将破坏您的项目

告诉
ember emojione
不要包含默认的emojione CSS和spritesheet。在应用程序的
ember cli build.js
中：

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {    
        "ember-emojione": {
            shouldImportCss:        false,
            shouldIncludePngSprite: false,
            shouldIncludeSvgSprite: false,
            shouldIncludePngImages: false,
            shouldIncludeSvgImages: false
        }
    });
// ...

var Funnel = require("broccoli-funnel");

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {
            // ...
        }
    });

    const funnels = [

        // PNG sprites
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-20.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-48.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-64.png";
            }
        }),
    ];

    if (app.env === "development" || app.env === "test") {
        app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
    }

    return app.toTree(funnels);
};


将PNG精灵导入应用程序

安装花椰菜漏斗

：

npm install -D broccoli-funnel

在应用程序的

ember cli build.js

中：

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {    
        "ember-emojione": {
            shouldImportCss:        false,
            shouldIncludePngSprite: false,
            shouldIncludeSvgSprite: false,
            shouldIncludePngImages: false,
            shouldIncludeSvgImages: false
        }
    });
// ...

var Funnel = require("broccoli-funnel");

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {
            // ...
        }
    });

    const funnels = [

        // PNG sprites
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-20.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-48.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-64.png";
            }
        }),
    ];

    if (app.env === "development" || app.env === "test") {
        app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
    }

    return app.toTree(funnels);
};

在应用程序的Sass中，包括mixin并调用它：

@import "bower_components/emojione-png-sprite-style/index.scss";

@include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));

这将破坏

ember emojione

组件的外观。该插件包含一个mixin，用于恢复外观：

@import 'node_modules/ember-emojione/app/styles/ember-emojione';

@include ember-emojione-cancel-scale;