对于大型自定义图标包，请使用 TinyMCE Oxide 图标包模板 工具，该工具可以接收包含 SVG 的文件夹并生成所需的输出文件。
前置条件
本指南假设：
下载并设置图标包模板
要使用 TinyMCE 图标包模板项目：
通过以下方式下载 TinyMCE Oxide 图标包模板：
从 Oxide 图标包模板 GitHub 页面 下载
.zip文件并解压内容。在终端或命令提示符中，使用 git 克隆 GitHub 仓库：
git clone https://github.com/tinymce/oxide-icon-pack-template.git
打开终端或命令提示符，导航至
oxide-icon-pack-template目录。通过执行以下命令安装项目依赖项：
npm install
当被提示时，输入图标包的名称。图标包名称应仅包含：
数字
字母
连字符 (
-)下划线 (
_)
验证
package.json文件中是否已添加iconPackName字段：{ "iconPackName": "my_icon_pack", }图标包名称将用于
icons选项，以便在 TinyMCE 中应用图标。
package.json中的iconPackName字段对于构建过程至关重要。此字段：
定义将在生成的
icons.js文件中使用的名称必须与初始化 TinyMCE 时在
icons选项中使用的名称匹配由构建系统用于创建正确的目录结构
如果缺失或不正确，图标包将无法正常工作
示例：
package.json包含："iconPackName": "my_icon_pack"TinyMCE 配置使用：
icons: 'my_icon_pack'生成的文件：
tinymce.IconManager.add('my_icon_pack', {...})
添加 SVG 文件
放置在 /src/svg 中的每个 SVG 文件都将被转换为图标。SVG 文件的文件名用于设置 TinyMCE 使用的图标标识符。
图标覆盖：
与默认图标同名的自定义图标将覆盖默认图标。
有关默认图标标识符列表，请参阅：可用图标。
例如，src/svg/ 目录可能包含：
src/svg/ ├── bold.svg ← 覆盖默认粗体图标 ├── italic.svg ← 覆盖默认斜体图标 ├── underline.svg ← 覆盖默认下划线图标 ├── my-custom-icon.svg ← 创建新的 'my-custom-icon' 标识符 ├── company-logo.svg ← 创建新的 'company-logo' 标识符 └── save-action.svg ← 创建新的 'save-action' 标识符
图标标识符规则：
文件名变为标识符：
bold.svg→'bold'连字符保留：
my-custom-icon.svg→'my-custom-icon'
用法：
这些图标随后可以在 TinyMCE 配置中使用。
例如：bold.svg 将具有标识符 bold。该图标可按如下方式使用：
tinymce.init({
selector: '#tiny_custom_button', // 根据 HTML 更改此值
toolbar: 'myButton',
icons: 'my_icon_pack',
setup: (editor) => {
editor.ui.registry.addButton('myButton', {
icon: 'bold', // 从 'bold.svg' 创建的 'bold' 图标
onAction: (_) => {
editor.insertContent(' <strong>Custom icon button!</strong> ');
}
});
}
});
TinyMCE 不会 调整所提供 SVG 的大小，而是依赖 SVG 中定义的大小。这允许在编辑器中使用不同大小的图标。工具栏按钮大小独立于图标大小。要更改按钮大小，需要 自定义皮肤。
SVG 要求： 输入 SVG 必须是形状，而不是描边。包含描边的 SVG 文件将无法正确渲染。如果输入文件包含描边，请使用图形程序将描边转换为形状。
构建图标包
要使用 Gulp 构建图标包：
打开终端或命令提示符，并导航至图标包的根目录（例如：
oxide-icon-pack-template/）。通过执行
npx gulp命令构建图标包：npx gulp
将自动创建一个包含图标包的
示例：dist/目录。dist/icons/my-icon-pack/icons.js由src/svg目录中的 SVG 文件自动生成。tinymce.IconManager.add('my-icon-pack', { icons: { 'audio': '<svg width="24" height="24"><path d="M10.8 19q.9 0 1.5-.7t.7-1.5V13h3v-2h-4v3.9l-.6-.3-.6-.1q-1 0-1.7.7t-.6 1.6q0 .9.7 1.5t1.6.7ZM6 22q-.8 0-1.4-.6T4 20V4q0-.8.6-1.4T6 2h8l6 6v12q0 .8-.6 1.4T18 22H6Zm7-13h5l-5-5v5Z"/></svg>', 'bold': '<svg width="24" height="24"><path fill-rule="evenodd" d="M3.6 2.3a1.4 1.4 0 0 0-1.4 1.3v16.8c0 .7.7 1.4 1.4 1.4h16.8a1.4 1.4 0 0 0 1.4-1.4V3.6a1.4 1.4 0 0 0-1.4-1.3H3.6Zm6 4a1.4 1.4 0 0 0-1.3 1.3v9.3c0 .7.6 1.4 1.3 1.4H12v-.8.8a2.5 2.5 0 0 0 .2 0 4.6 4.6 0 0 0 1.6-.5c.5-.2 1-.5 1.3-1 .4-.5.7-1.2.7-2 0-.9-.3-1.6-.7-2a3.2 3.2 0 0 0-.8-.9 2.8 2.8 0 0 0 .4-.5c.4-.5.5-1.1.5-1.9s-.1-1.4-.5-1.9a3 3 0 0 0-1.1-1 3.9 3.9 0 0 0-1.6-.3H9.6Zm.1 6.5H12a3.2 3.2 0 0 1 1.2.2l.7.6c.2.2.4.6.4 1.1s-.2 1-.4 1.2a1.8 1.8 0 0 1-.7.6 3.2 3.2 0 0 1-1.1.2H9.7v-4Zm2.3 4Zm0-5.6H9.7V7.8H12l1 .2.5.5c.1.2.3.5.3 1s-.2.8-.3 1a1.4 1.4 0 0 1-.6.5 2.3 2.3 0 0 1-.9.2Z" clip-rule="evenodd"/></svg>', 'italic': '<svg width="24" height="24"><path fill-rule="evenodd" d="M3.6 2.3a1.4 1.4 0 0 0-1.4 1.3v16.8c0 .7.7 1.4 1.4 1.4h16.8a1.4 1.4 0 0 0 1.4-1.4V3.6a1.4 1.4 0 0 0-1.4-1.3H3.6ZM16 6.8h-1.5L11 17.1h1a.8.8 0 0 1 0 1.6H8a.8.8 0 0 1 0-1.6h1.5L13 6.8h-1a.8.8 0 0 1 0-1.5h4a.8.8 0 0 1 0 1.5Z" clip-rule="evenodd"/></svg>', } });使用 Web 浏览器打开
dist/html/icons.html以预览图标。
构建图标包的故障排除信息
SVG 文件在构建过程中会使用 SVGO 进行优化。由于舍入误差，优化可能会导致图形失真。可以通过提供新的 SVGO 选项来修复图形。要更改所使用的 SVGO 选项：
使用文本编辑器打开
gulpfile.js。在
iconPackager函数中添加svgo选项，例如：iconPackager({ name: 'my-icon-pack', svgo: { floatPrecision: 3 } // 增加舍入精度 })所有用户定义的选项（包括 SVGO 选项）都将与默认选项合并。有关 SVGO 选项的信息，请参阅：GitHub 上的 SVGO。
后续步骤
生成图标包文件后，请按照 部署图标包文件 中的指导配置 TinyMCE 以加载它。该部分解释了如何使用 icons 和 icons_url 选项从默认位置或自定义路径加载包。