coolapk-emotion

Symbol

查看项目

.c-ye
.c-liulei
.c-nb
.c-fanu
.c-baiyan
.c-miaomiao
.c-
.c-1
.c-2
.c-3
.c-erhading
.c-4
.c-5
.c-nanguo
.c-6
.c-se
.c-7
.c-8
.c-9
.c-10
.c-11
.c-bishi
.c-hongyaowan
.c-12
.c-zhoumei
.c-liuhanhuaji
.c-wulian
.c-13
.c-pen
.c-oney
.c-fivey
.c-huoba
.c-14
.c-15
.c-lvyaowan
.c-16
.c-fivem
.c-17
.c-18
.c-19
.c-teny
.c-qqdoge
.c-dogeyuanliangta
.c-doujiyanhuaji
.c-wunai
.c-coolb
.c-heixian
.c-weiweiyixiao
.c-huaixiao
.c-shui
.c-zaijian
.c-ciya
.c-20
.c-shounuehuaji
.c-wuzuixiao
.c-meigui
.c-heiha
.c-wozuimei
.c-tuosai
.c-qinqin
.c-xiaoyan
.c-21
.c-22
.c-chigua
.c-23
.c-24
.c-wuyu
.c-hahaha
.c-fadai
.c-25
.c-26
.c-jizhi
.c-haixiu
.c-tushe
.c-han
.c-piezui
.c-huaji
.c-27
.c-twom
.c-huanhu
.c-koubi
.c-28
.c-onem
.c-erha
.c-pu
.c-aoman
.c-twoy
.c-29
.c-30
.c-hehe
.c-qiang
.c-twof
.c-naikezui
.c-31
.c-32
.c-33
.c-ruo
.c-twoo
.c-weiqu
.c-fivef
.c-coshuaji
.c-yiwen
.c-kelian
.c-34
.c-twod
.c-dogehechi
.c-fived
.c-fiveo
.c-xiaoku
.c-oy
.c-ok
.c-35
.c-pyjiaoyi
.c-36
.c-fy
.c-ty
.c-37
.c-38
.c-keai
.c-doge
.c-onef
.c-weixiao
.c-yinxian
.c-oneo
.c-jingya
.c-mojinghuaji
.c-penxue
.c-39
.c-oned
.c-xinsui
.c-baoquan
.c-kuan
.c-40
.c-dogexiaoku
.c-diaoxie
.c-caidao
.c-kuanlvmao
.c-lvmao
.c-aixin
.c-ku
.c-hejiu

coolapk-emotion

酷安 emoji 表情包原版/svg重制版，可快速简便地用于个人网页与博客。

以上展示的为 svg 版本

原版png来源于酷安安装包拆包，表情包原作者为酷安，禁止用于商业用途。

使用方法

· 使用原文件
· 使用JS插件
· Hexo 使用指南

使用原文件

如果只是想使用原png，svg文件，可直接下载
如果应用于网页，也可以不必下载，使用每个文件对应的链接，比如：

<img src="https://coolemotion.netlify.com/source/png/c-coolb.png">

这里使用了类名为c-coolb的png图像，对于每个图标的预览及类名，请看页面上方

使用JS插件

插件也分为png版和svg版
它们使用起来同样的简便，主要差别如下：

svg

需要 jQuery

表情图标将会以svg的形式展现，因此在任意屏幕分辨率下都能达到最佳清晰度。

不过使用会加载整个插件（约1.2MB），即使您的页面只使用了一个表情图标。当然，加载一次后它会缓存到本地。

png

表情图标将会以<i>标签背景图片形式展现，因为浏览器的渲染不同，可能不能达到最佳清晰度，且放大后模糊。

不过只有当您使用该表情图标时才会加载对应的图片，相当省流。

原生 JS 支持

使用步骤如下：

引入

只需引入 JS，CSS 已集成至 JS ，两个版本任选其一

可以用无需下载的方式，但注意这没有CDN，中国大陆加载可能会比较慢

<!-- svg 版本 | svg edition -->
<script src="https://coolemotion.netlify.com/svg-edition/coolapk-emotion-svg.js"></script>
<!-- png 版本 | svg edition -->
<script src="https://coolemotion.netlify.com/png-edition/coolapk-emotion-png.min.js"></script>

或者下载之后引入

<!-- svg 版本 | svg edition -->
<script src="./coolapk-emotion-svg.js"></script>
<!-- png 版本 | svg edition -->
<script src="./coolapk-emotion-svg.min.js"></script>

在页面中使用

参考以下例子：

这是一段话中间有个酷币

<p>这是一段话<i class="c-coolb"></i>中间有个酷币</p>

这将引入一个类名为c-coolb的图标到这段话中，对于每个图标的预览及类名，请看页面上方

值得注意

svg 版本使用 Symbol 引用的方法（详见下方），引用时使用的<i>标签会在页面加载时被替换为相应的<svg>标签。也就是说原<i>标签会被删除，展示的是<svg>标签。页面加载后，如果有新加的<i>标签表情则不会被正常显示，直到调用setCoolapkEmotion()函数再次进行替换。

setCoolapkEmotion();

关于 Symbol 引用方法

以下原理内容您不必了解

多色svg图标无法直接使用，为了能够简便使用，这里用了 Symbol 引用方法。

正如其名，Symbol 引用方式不同于一般的使用，使用时写下的只是 Symbol，然后JS会将 Symbol 替换为真正的 SVG，并实现完整的 SVG 效果。

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。此方法由 iconfont+ 提供，相关介绍可以参考这篇文章
我进行了一些改进：将 Symbol 代码进一步封装，集成 CSS 到 JS ，使得引用更为简便。
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

这种使用 Symbol 引用的方法，引用时使用的<i>标签会在页面加载时被替换为相应的<svg>标签。也就是说原<i>标签会被删除，展示的是<svg>标签。页面加载后，如果有新加的<i>标签表情则不会被正常显示，直到调用setCoolapkEmotion()函数再次进行替换。

setCoolapkEmotion();

Hexo 使用指南

由于我的博客是 Hexo 框架，也不熟悉其他框架，所以这里只为 Hexo 提供参考。这里只提一种方法在`hexo`的`/scaffolds/post.md`（文章模板文件）最下方加上：

<script src="https://coolemotion.netlify.com/png-edition/coolapk-emotion-png.min.js"></script>

即可在新建的文章中使用：

这是一段话中间有个酷币

<p>这是一段话<i class="c-coolb"></i>中间有个酷币</p>

这将引入一个类名为c-coolb的图标到这段话中，对于每个图标的预览及类名，请看页面上方