园子表情图标库使用说明

这里收集着园子里一点点画出来的小花、水果和各种奇奇怪怪的可爱图标，希望这些从园子里长出来的小东西，不只可以装点文章，也能给写字和阅读的人带来一点点好心情。

其实「园子的表情图标库」最开始只是我为了提升自己的幸福感而设计的一个小工具。

我一直很希望，在写文章的时候能够用上自己的表情，或者一些不太一样、有自己特色的小图标。这样既不用局限于现成的 emoji，也可以让文章里多一些属于自己的小东西。

比如像这样 > ，写到哪里就可以很自然地放到哪里。

反正就是很方便，也很好玩。

后来画的东西越来越多，干脆就把它们一点点收集起来，于是慢慢有了现在这个「园子的表情图标库」。

园子表情图标库

我自己单方面决定，表情图标库的花就是：

使用说明

表情图标库由本园子工作间的小猫们努力生成，不需要手工导出 CSS 或 JavaScript 文件。后台新增、换图、改名或调整显示状态后，公开清单会自动更新。公开地址：

类型	地址	用途
Manifest	https://xiaoxi.ac.cn/api/public/emoticon-icons/manifest.json	查询全部公开图标及其编号、名称、分类和图片地址
CSS	https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.css	使用 CSS 类名显示图标
JavaScript	https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.js	使用文本 token、自定义元素或 JavaScript API

使用方法

方法一：CSS 类名先在网页的 <head> 中引入 CSS：

<link rel= "stylesheet" href= "https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.css" >

然后使用基础类和图标类。我们将每个表情图标都赋予了单独的 class_name（也可以称为编码），编码可以在 manifest.json 里面进行查询！以“橙子

”为例，它当前的固定编号是 e31，对应 CSS 类名为 garden-emote--31：

<iclass="garden-emote garden-emote--31"role="img"aria-label="橙子"></i>

可以通过 font-size 或 --garden-emote-size 调整大小：

<iclass="garden-emote garden-emote--31"  role="img"  aria-label="橙子"  style="--garden-emote-size: 28px"></i>

以下是简单的界面引用表情图标的演示，原则上图标的大小会随着文字大小的改变而改变：

HTML示例

前台示例

方法二：文本 token引入 JavaScript，并添加 data-auto-replace：

<scriptsrc="https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.js"data-auto-replace  defer></script>

随后可以直接在普通文本中书写图标名称：

<p>今天吃一个 :橙子:</p>

JavaScript 会把 :橙子: 替换成相应图片，显示出来：今天吃一个。下面三种 token 都可以使用：

:橙子:	按名称调用，最容易阅读。
:果园/橙子:	按“分类/名称”调用，适合处理同名图标。
:e31:	按固定编号调用，后台改名后仍然有效。

注：当不同分类存在同名图标时，普通名称 token 不会被替换，以免调用错误；此时请使用分类 token 或固定编号 token。

自动替换会跳过 script、style、code、pre、表单输入框和可编辑区域，不会修改代码示例。需要明确忽略某个容器时，可以添加 data-garden-emotes-ignore：

<divdata-garden-emotes-ignore>这里的 :橙子: 不会被替换</div>

方法三：自定义元素

引入 icons.js 后，也可以直接使用自定义元素：

<garden-emotecode="e31"alt="橙子"></garden-emote>

使用固定 code 不受图标改名影响。alt 会传给内部图片，建议保留，以便读屏软件识别图标含义。

可以通过 size 设置尺寸：

<garden-emotecode="e31"alt="橙子"size="28px"></garden-emote>

方法四：JavaScript API

手动创建图标：

<divid="icon-target"></div><scriptsrc="https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.js"></script><script>  GardenEmotes.load().then(() => {const icon = GardenEmotes.create('e31', {      alt: '橙子',      size: 28    })if (icon) {      document.querySelector('#icon-target').appendChild(icon)    }  })</script>

处理页面中后来插入的内容：

await GardenEmotes.refresh()await GardenEmotes.replace(document.querySelector('#new-content'))

常用 API：

API	作用
GardenEmotes.load()	加载公开 Manifest
GardenEmotes.refresh()	重新获取后台最新数据，并更新已经渲染的图标
GardenEmotes.resolve('e31')	查询某个图标的清单数据
GardenEmotes.create('e31', options)	创建一个 <img> 图标
GardenEmotes.replace(root)	替换指定容器内的文本 token
GardenEmotes.observe(root)	监听指定容器，自动处理后来加入的内容

如果页面会持续插入新内容，可以开启监听：

<script  src="https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.js"  data-auto-replace  data-observe  defer></script>

后台更新后的同步方式

图标库直接读取后台数据，因此不需要重新构建前端：

新增并显示：自动加入 Manifest 和 CSS。
换图：固定编号不变，图片地址自动更新。
改名：固定编号不变，名称 token 随之更新。
隐藏或删除：从最新 Manifest 和 CSS 中移除。

普通页面在下次加载时会取得最新版本。如果已经打开的页面也需要定时同步，可以设置刷新间隔，单位为秒，最小值为 30 秒：

<script  src="https://xiaoxi.ac.cn/api/public/emoticon-icons/icons.js"  data-auto-replace  data-refresh-interval="300"  defer></script>

Manifest 主要字段

每个 icons 项目包含以下常用字段：

字段	示例	说明
id	31	数据库编号
code	e31	调用编号
code_token	:e31:	编号 token
name	橙子	显示名称
token	:橙子:	名称 token
qualified_token	:果园/橙子:	分类限定 token
class_name	garden-emote--31	CSS 图标类名
path	/uploads/emoticons/xxx.webp	本站图片路径
url	https://xiaoxi.ac.cn/uploads/emoticons/xxx.webp	完整图片地址
category	{ "id": 2, "name": "果园" }	所属分类

版权说明

本表情图标库基于 Creative Commons Attribution-ShareAlike 4.0 International 知识共享署名-相同方式共享 4.0 国际许可协议发布，该许可要求再利用者必须注明原创者的身份。再利用者可以将该材料以任何媒介或格式进行分发、重新组合、改编或进一步加工，甚至可用于商业目的。如果对该材料进行重新组合、改编或进一步加工，必须按照相同的条款来许可所修改后的材料。