CKEditor 5 图标包ckeditor5-icons全面指南安装、图标清单与自定义替换实战【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 将全部 UI 图标以ckeditor/ckeditor5-icons图标包的形式独立封装统一通过ckeditor5聚合包分发。本指南基于当前仓库从包结构、215 个内置 SVG 图标的组织方式讲起完整覆盖安装步骤并给出 npm / Yarn Classic / Yarn Berry / pnpm 四种包管理器覆盖方案与 Vite / Webpack / esbuild / Rollup / Rolldown 五种打包器 resolve 别名替换的实战配置让你在自托管部署中彻底掌握工具栏、下拉面板与气泡面板图标的替换能力。一、认识ckeditor/ckeditor5-icons图标包1.1 包是什么、解决什么问题从仓库目录 packages/ckeditor5-icons 的package.json可以看到该包名为ckeditor/ckeditor5-icons当前仓库版本为 48.5.0描述为 Icon pack for CKEditor 5。它集中存放 CKEditor 5 界面中所有插件使用到的 SVG 图标——包括工具栏按钮、下拉菜单项、气泡面板工具以及各类状态提示图标。它的核心意义在于单一事实来源所有 UI 插件ckeditor5-ui、ckeditor5-image、ckeditor5-table、ckeditor5-ai等不再各自维护零散的图标文件而是统一从一个包导入可整体替换因为图标集中在独立包中用户可以整体 override 或 alias 这个包从而一次性替换编辑器内所有图标无需逐个修改插件源码与构建链深度集成源码形态为 TypeScript SVG 文件构建时被编译为包含 SVG 字符串的 JS 模块详见后文构建与类型生成。1.2 包结构与发布形态package.json中的关键字段揭示了该包的完整结构{ name: ckeditor/ckeditor5-icons, version: 48.5.0, description: Icon pack for CKEditor 5., type: module, main: ./src/index.ts, exports: { .: ./src/index.ts, ./dist/*: ./src/*, ./*: ./* }, publishConfig: { main: ./dist/index.js, types: ./dist/index.d.ts, exports: { .: ./dist/index.js, ./dist/*: ./dist/*, ./package.json: ./package.json } } }可以读出以下关键信息源码入口为 packages/ckeditor5-icons/src/index.ts开发阶段main: ./src/index.ts直接使用 TypeScript 源码发布形态为dist/index.jsdist/index.d.tspublishConfig即 npm 上安装到的是构建产物包被标记为ESMtype: module引用路径如ckeditor/ckeditor5-icons/dist/index.js在各类打包器中均可被解析。仓库内的目录组织如下核心部分packages/ckeditor5-icons/ ├── src/ │ └── index.ts # 图标统一导出入口TS SVG 模块 ├── theme/ │ └── icons/ # 215 个 SVG 图标源文件 ├── docs/ │ └── api/ │ └── icons.md # API 参考文档 ├── tests/ │ └── index.js # 占位测试保证 CI 通过 ├── package.json ├── README.md └── CHANGELOG.md1.3 图标的真实形态一个 SVG 文件以加粗Bold图标为例packages/ckeditor5-icons/theme/icons/bold.svg 的实际内容是一段内联 SVGsvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 path dM10.187 17H5.773q-.956 0-1.364-.415-.41-.416-.409-1.323V4.738.../ /svg从这类文件可以归纳出图标的通用规范viewBox 统一为0 0 20 20即所有图标都在 20×20 的网格中绘制保证不同插件按钮的视觉大小一致使用单一路径或少量路径描述图形便于压缩成字符串嵌入 JS 模块当前填充色多为currentColor语义由主题 CSS 控制着色便于适配不同皮肤与深浅主题。二、安装2.1 通过聚合包安装官方推荐ckeditor/ckeditor5-icons是ckeditor5聚合包的一部分因此只需安装一个包即可同时获得全部功能与图标。在项目根目录执行npm install ckeditor5安装完成后图标可以通过ckeditor/ckeditor5-icons路径被各插件引用如ckeditor/ckeditor5-icons/dist/index.js。2.2 从仓库构建面向开发/贡献者如果你是在本仓库内开发包的构建脚本定义在 packages/ckeditor5-icons/package.json 中node ../../scripts/nim/build-package.mjs node ../../scripts/update-icons-typings.mjs即先通过通用构建脚本把src/index.ts连同theme/icons/*.svg编译打包为dist/index.js再运行 scripts/update-icons-typings.mjs 生成配套的dist/index.d.ts类型声明。测试运行方式为pnpm testVitest。注意上面第一段命令是仓库维护者使用的开发命令终端用户只需npm install ckeditor5即可无需自行构建。三、214 个内置图标一览按功能域分类图标包的导出入口 packages/ckeditor5-icons/src/index.ts 以export { default as IconXxx } from ../theme/icons/xxx.svg的形式导出了全部图标。命名约定为文件名去掉.svg后缀并转为 PascalCase前面加上Icon前缀例如bold.svg→IconBold。theme/icons目录下共有 215 个 SVG 文件其中 214 个被导出按功能域可归类如下3.1 文本与基础样式图标导出名源文件用途IconBoldbold.svg加粗IconItalicitalic.svg斜体IconUnderlineunderline.svg下划线IconStrikethroughstrikethrough.svg删除线IconSubscript/IconSuperscriptsubscript.svg / superscript.svg上下标IconParagraph/IconPilcrowparagraph.svg / pilcrow.svg段落/段落标记IconCode/IconCodeBlockcode.svg / code-block.svg行内代码/代码块IconText/IconTextAlternativetext.svg / text-alternative.svg文本/替代文本IconCaseChangecase-change.svg大小写转换IconFontFamily/IconFontSizefont-family.svg / font-size.svg字体族/字号IconFontColor/IconFontBackgroundfont-color.svg / font-background.svg字体颜色/背景色IconHighlight对应IconMarkermarker.svg荧光笔3.2 段落、列表与排版IconAlignLeft/Right/Center/Justify对齐、IconIndent/Outdent缩进/减少缩进、IconBulletedList无序列表、IconNumberedList有序列表、IconTodoList待办列表、IconMultiLevelList多级列表以及一整套列表样式图标IconListStyleDisc、IconListStyleCircle、IconListStyleSquare、IconListStyleDecimal、IconListStyleDecimalLeadingZero、IconListStyleLowerRoman、IconListStyleUpperRoman、IconListStyleLowerLatin、IconListStyleUpperLatin、IconListStyleArabicIndic、IconLineHeight行高、IconSelectAll全选。3.3 标题与结构IconHeading1IconHeading6六个级别的标题、IconHorizontalLine水平线、IconPageBreak分页符、IconTableOfContents目录、IconShowBlocks显示块、IconDocumentOutline/IconDocumentOutlineToggle文档大纲/开关、IconSpecialCharacters特殊字符、IconFootnote脚注。3.4 表格与对象布局IconTable、IconTableRow、IconTableColumn、IconTableCellProperties、IconTableProperties、IconTableMergeCell、IconTableLayout表格相关IconObjectInline/IconObjectInlineLeft/IconObjectInlineRight行内对象布局、IconObjectLeft/IconObjectRight/IconObjectCenter环绕布局、IconObjectFullWidth整幅宽、IconObjectSizeSmall/Medium/Large/Full/Custom对象尺寸。3.5 媒体与文件IconImage、IconImageUpload、IconImageUrl、IconImageAssetManager、IconCkboxImageEdit、IconUploadcareImageEdit、IconUploadcareImageUpload、IconUploadcareLink图片/云存储IconMedia、IconMediaPlaceholder媒体嵌入IconFileUpload、IconPaperClip附件IconBrowseFiles、IconGoogleDrive、IconDropbox、IconOneDrive、IconGooglePhotos文件管理与云盘IconImportWord、IconExportWord、IconExportPdf、IconImportExport导入导出IconPrint、IconDocument、IconDocumentWithCheckmark、IconDocumentWithCross、IconDocumentWithLoupe、IconHtml。3.6 编辑操作与历史IconUndo、IconRedo撤销重做、IconCopy、IconPaste相关IconClipboard不在本包粘贴相关见各插件、IconRemove、IconRemoveFormat、IconEraser、IconPencil、IconPen、IconFindReplace查找替换、IconSource源码、IconHistory、IconRevisionHistory修订历史、IconRefresh、IconMaximize、IconMinimize。3.7 协作、评论与修订IconAddComment、IconEditComment、IconRemoveComment、IconCommentsArchive、IconTrackChanges、IconTrackChangesAccept、IconTrackChangesDiscard、IconShowChangesOn、IconShowChangesOff、IconContentLock、IconContentUnlock、IconUser、IconSelection、IconPin评论置顶。3.8 排版装饰与符号IconQuote引用、IconBookmark/IconBookmarkMedium/IconBookmarkSmall/IconBookmarkInline书签四规格、IconBoxWithCheck/IconBoxWithCross/IconBoxWithMarker、IconCheck、IconCancel、IconClose、IconPlus、IconMinus对应IconRemove、IconSparkle、IconThreeStars、IconStar未在本包、IconThumbUp/IconThumbDown、IconWarning、IconError、IconInfo、IconBulb、IconEye、IconEyeCrossedOut、IconLoupe、IconNotification、IconLocal、IconWeb、IconPlay、IconStop、IconSubmit、IconSettings、IconCog、IconColorPalette、IconColorTileCheck、IconMagicWand、IconRobotPencil、IconOutdated、IconDragHandle、IconDragIndicator、IconThreeHorizontalDots、IconThreeVerticalDots、IconChevronDown/Up/Right、IconArrowDown/Up、IconNextArrow、IconPreviousArrow、IconReturnArrow、IconDropdownArrow、IconFullscreenEnter、IconFullscreenLeave、IconSocial系列IconFacebook、IconProjectLogo、IconLogo对应IconProjectLogo、IconPaginationExample、IconTemplate、IconTemplateGeneric、IconLegalStyleList、IconPreviewMergeFields、IconInsertMergeField、IconMergeFields对应IconInsertMergeField、IconAI全家桶等。3.9 AI 功能图标IconAI*系列本仓库包含一组完整的 AI 相关图标与ckeditor5-ai功能对应图标导出名源文件语义IconAIai.svgAI 通用IconAIAskAIai-ask-ai.svg向 AI 提问IconAIAuthorai-author.svgAI 写作IconAIAdjustLengthai-adjust-length.svg调整篇幅IconAIChangeToneai-change-tone.svg调整语气IconAIContinueWritingai-continue-writing.svg续写IconAIGrammarCheckai-grammar-check.svg语法检查IconAIImproveWritingai-improve-writing.svg优化写作IconAIOtherai-other.svg其他 AI 操作IconAIQuickActionsai-quick-actions.svg快捷操作IconAIReviewai-review.svg审阅IconAITranslateai-translate.svg翻译IconAIChatai-chat.svgAI 对话IconAIChatCommandsai-chat-commands.svg对话命令IconAIHistoryai-history.svgAI 历史记录四、自定义图标两种官方方案总览在自托管安装npm 或 ZIP中可以整体覆盖提供图标的ckeditor/ckeditor5-icons包来定制编辑器 UI 图标。官方文档 docs/getting-started/setup/customizing-icons.md 给出了两条路线方案适用场景原理包管理器覆盖package manager override不依赖打包器配置npm/Yarn/pnpm 皆可制作自定义图标包用overrides/resolutions替换依赖图resolve 别名替换已使用 Vite/Webpack/esbuild/Rollup/Rolldown 等打包器在打包器配置里把图标包入口 alias 到自定义 JS 文件两种方式都要求你手头有一份官方导出清单作为模板即安装后node_modules/ckeditor/ckeditor5-icons/dist/index.js中的内容——它是由 src/index.ts 构建而来其中每个图标都被编译为一个export const IconXxx …svg 字符串…形式的 JS 字符串。4.1 方案一包管理器覆盖第 1 步准备自定义图标包在项目内、源码目录通常是src之外新建一个自定义图标包目录并创建package.json{ name: my-custom-icons, private: true, version: 0.0.1, type: module, main: ./dist/index.js }打开node_modules下的ckeditor/ckeditor5-icons包找到dist/index.js把其中的内容复制到自定义图标包的dist/index.js。目录结构如下my-custom-icons/ ├── dist/ │ └── index.js └── package.json然后直接修改index.js中承载 SVG 的 JS 字符串即可定制图标。务必保持与官方文件相同的结构、导出名称与命名约定例如IconBold、IconAlignLeft否则对应插件将引用不到图标。第 2 步在不同包管理器中覆盖默认包npm—— 在项目package.json中添加{ dependencies: { ckeditor/ckeditor5-icons: file:./icons }, overrides: { ckeditor/ckeditor5-icons: $ckeditor/ckeditor5-icons } }然后运行npm install。注意overrides的值以美元符号$开头这是 npm 要求使用dependencies中该依赖版本的语法。若file:协议未创建符号链接可能需要删除node_modules后重新npm install才能看到改动。Yarn Classicv1—— 在package.json中添加{ resolutions: { ckeditor/ckeditor5-icons: link:./icons } }然后运行yarn install。Yarn Berryv2—— 配置方式与 Classic 相同{ resolutions: { ckeditor/ckeditor5-icons: link:./icons } }然后运行yarn install。pnpm—— 在package.json中添加{ pnpm: { overrides: { ckeditor/ckeditor5-icons: link:./icons } } }然后运行pnpm install。使用要点file:npm与link:Yarn/pnpm指向的是你的自定义图标包目录请按实际路径调整overridesnpm/pnpm与resolutionsYarn用于强制依赖树中所有ckeditor/ckeditor5-icons引用指向自定义包。4.2 方案二resolve 别名替换打包器如果你的项目使用打包器可以不加自定义包直接用 resolve alias 把ckeditor/ckeditor5-icons的导入指向自建图标文件。第 1 步准备自定义图标文件同样从node_modules/ckeditor/ckeditor5-icons/dist/index.js复制一份到项目内例如src/icons.js并删除文件底部的//# sourceMappingURLindex.js.map注释。随后修改其中的 SVG 字符串即可。第 2 步按打包器添加别名以下示例均假设自定义图标位于src/icons.js且打包器配置文件为 ESM 格式若为 CommonJS请把import.meta.dirname替换为__dirname。Vite—— 在vite.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };Webpack—— 在webpack.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };esbuild—— 在 esbuild 配置中import { resolve } from path; build( { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } );Rollup—— Rollup 默认不支持别名需安装官方插件rollup/plugin-aliasimport { resolve } from path; import alias from rollup/plugin-alias; export default { plugins: [ alias( { entries: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } ) ] };Rolldown—— 在rolldown.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };五、原理深挖源码、构建与类型生成5.1 为什么导出入口长这样packages/ckeditor5-icons/src/index.ts 全部由形如下面的导出语句组成export { default as IconBold } from ../theme/icons/bold.svg; export { default as IconAlignLeft } from ../theme/icons/align-left.svg; // ... 共 214 条这意味着在旧安装方式中开发者可以直接 import 单个 SVG 模块import bold from ckeditor/ckeditor5-icons/theme/icons/bold.svg来覆盖指定图标。构建时这些.svg文件被内联为 JS 字符串因此图标包的实际产物是一组导出 SVG 字符串的 ESM 模块任何最终用户都可以通过修改该模块中的字符串来换图标。5.2 类型声明为什么需要脚本生成由于src/index.ts直接导出了.svg模块TypeScript 会为它们生成形如export { default as IconMyIcon } from ../theme/icons/my-icon.svg的声明——这会让没有为 SVG 声明模块类型的项目报错。因此仓库专门提供了 scripts/update-icons-typings.mjs在构建阶段把这类声明替换为简单的字符串常量声明export const IconMyIcon: string;如该脚本头注释所述一旦旧安装方式被移除未来可能改为在src/index.ts中直接以字符串存放图标或直接从构建产物生成类型。5.3 图标使用与测试保障图标包的测试位于 packages/ckeditor5-icons/tests/index.js目前是一个占位测试保证 CI 在 0 用例时不失败使用 Vitest 运行。真正校验图标可用性的是各 UI 插件自身的渲染测试——图标以字符串注入按钮模板后最终由主题 CSS 渲染为可见的工具栏图标。六、实战建议与常见问题6.1 如何只替换个别图标而不是全部ckeditor/ckeditor5-icons的替换是整包替换模型你拿到dist/index.js后只需改动其中少数几个图标对应的字符串其余保持官方原样即可——不必重写全部 214 个图标。只要保留导出名称不变插件仍能正确定位到对应图标。6.2 图标不生效的排查清单导出名称是否一致自定义文件中IconXxx的拼写必须与官方一致例如IconAlignJustify而非IconJustifySVG 是否合法保持viewBox0 0 20 20结构避免路径语法错误导致按钮空白覆盖是否真正生效npm 的file:若不创建符号链接需删除node_modules重装检查npm ls ckeditor/ckeditor5-icons或 pnpm/yarn 的依赖树确认解析到了自定义包缓存构建工具与浏览器缓存可能导致旧图标残留必要时清理打包器缓存。6.3 关于许可证与试用本包采用双许可模式GNU GPL v2 或更高版本或 CKSource Holding sp. z o.o. 的商业许可详见 packages/ckeditor5-icons/LICENSE.md。若需评估完整版 CKEditor 5含协作、AI 等商业功能可在 docs/getting-started/setup 相关文档中了解试用方式。延伸阅读自定义图标官方指南上文两套方案的完整出处图标包 API 参考包的正式 API 文档图标导出入口源码214 个图标的完整导出清单构建类型生成脚本解释类型声明的由来更新到 45 版本说明图标覆盖机制的引入背景。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CKEditor 5 图标包（ckeditor5-icons）全面指南：安装、图标清单与自定义替换实战
CKEditor 5 图标包ckeditor5-icons全面指南安装、图标清单与自定义替换实战【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 将全部 UI 图标以ckeditor/ckeditor5-icons图标包的形式独立封装统一通过ckeditor5聚合包分发。本指南基于当前仓库从包结构、215 个内置 SVG 图标的组织方式讲起完整覆盖安装步骤并给出 npm / Yarn Classic / Yarn Berry / pnpm 四种包管理器覆盖方案与 Vite / Webpack / esbuild / Rollup / Rolldown 五种打包器 resolve 别名替换的实战配置让你在自托管部署中彻底掌握工具栏、下拉面板与气泡面板图标的替换能力。一、认识ckeditor/ckeditor5-icons图标包1.1 包是什么、解决什么问题从仓库目录 packages/ckeditor5-icons 的package.json可以看到该包名为ckeditor/ckeditor5-icons当前仓库版本为 48.5.0描述为 Icon pack for CKEditor 5。它集中存放 CKEditor 5 界面中所有插件使用到的 SVG 图标——包括工具栏按钮、下拉菜单项、气泡面板工具以及各类状态提示图标。它的核心意义在于单一事实来源所有 UI 插件ckeditor5-ui、ckeditor5-image、ckeditor5-table、ckeditor5-ai等不再各自维护零散的图标文件而是统一从一个包导入可整体替换因为图标集中在独立包中用户可以整体 override 或 alias 这个包从而一次性替换编辑器内所有图标无需逐个修改插件源码与构建链深度集成源码形态为 TypeScript SVG 文件构建时被编译为包含 SVG 字符串的 JS 模块详见后文构建与类型生成。1.2 包结构与发布形态package.json中的关键字段揭示了该包的完整结构{ name: ckeditor/ckeditor5-icons, version: 48.5.0, description: Icon pack for CKEditor 5., type: module, main: ./src/index.ts, exports: { .: ./src/index.ts, ./dist/*: ./src/*, ./*: ./* }, publishConfig: { main: ./dist/index.js, types: ./dist/index.d.ts, exports: { .: ./dist/index.js, ./dist/*: ./dist/*, ./package.json: ./package.json } } }可以读出以下关键信息源码入口为 packages/ckeditor5-icons/src/index.ts开发阶段main: ./src/index.ts直接使用 TypeScript 源码发布形态为dist/index.jsdist/index.d.tspublishConfig即 npm 上安装到的是构建产物包被标记为ESMtype: module引用路径如ckeditor/ckeditor5-icons/dist/index.js在各类打包器中均可被解析。仓库内的目录组织如下核心部分packages/ckeditor5-icons/ ├── src/ │ └── index.ts # 图标统一导出入口TS SVG 模块 ├── theme/ │ └── icons/ # 215 个 SVG 图标源文件 ├── docs/ │ └── api/ │ └── icons.md # API 参考文档 ├── tests/ │ └── index.js # 占位测试保证 CI 通过 ├── package.json ├── README.md └── CHANGELOG.md1.3 图标的真实形态一个 SVG 文件以加粗Bold图标为例packages/ckeditor5-icons/theme/icons/bold.svg 的实际内容是一段内联 SVGsvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 20 20 path dM10.187 17H5.773q-.956 0-1.364-.415-.41-.416-.409-1.323V4.738.../ /svg从这类文件可以归纳出图标的通用规范viewBox 统一为0 0 20 20即所有图标都在 20×20 的网格中绘制保证不同插件按钮的视觉大小一致使用单一路径或少量路径描述图形便于压缩成字符串嵌入 JS 模块当前填充色多为currentColor语义由主题 CSS 控制着色便于适配不同皮肤与深浅主题。二、安装2.1 通过聚合包安装官方推荐ckeditor/ckeditor5-icons是ckeditor5聚合包的一部分因此只需安装一个包即可同时获得全部功能与图标。在项目根目录执行npm install ckeditor5安装完成后图标可以通过ckeditor/ckeditor5-icons路径被各插件引用如ckeditor/ckeditor5-icons/dist/index.js。2.2 从仓库构建面向开发/贡献者如果你是在本仓库内开发包的构建脚本定义在 packages/ckeditor5-icons/package.json 中node ../../scripts/nim/build-package.mjs node ../../scripts/update-icons-typings.mjs即先通过通用构建脚本把src/index.ts连同theme/icons/*.svg编译打包为dist/index.js再运行 scripts/update-icons-typings.mjs 生成配套的dist/index.d.ts类型声明。测试运行方式为pnpm testVitest。注意上面第一段命令是仓库维护者使用的开发命令终端用户只需npm install ckeditor5即可无需自行构建。三、214 个内置图标一览按功能域分类图标包的导出入口 packages/ckeditor5-icons/src/index.ts 以export { default as IconXxx } from ../theme/icons/xxx.svg的形式导出了全部图标。命名约定为文件名去掉.svg后缀并转为 PascalCase前面加上Icon前缀例如bold.svg→IconBold。theme/icons目录下共有 215 个 SVG 文件其中 214 个被导出按功能域可归类如下3.1 文本与基础样式图标导出名源文件用途IconBoldbold.svg加粗IconItalicitalic.svg斜体IconUnderlineunderline.svg下划线IconStrikethroughstrikethrough.svg删除线IconSubscript/IconSuperscriptsubscript.svg / superscript.svg上下标IconParagraph/IconPilcrowparagraph.svg / pilcrow.svg段落/段落标记IconCode/IconCodeBlockcode.svg / code-block.svg行内代码/代码块IconText/IconTextAlternativetext.svg / text-alternative.svg文本/替代文本IconCaseChangecase-change.svg大小写转换IconFontFamily/IconFontSizefont-family.svg / font-size.svg字体族/字号IconFontColor/IconFontBackgroundfont-color.svg / font-background.svg字体颜色/背景色IconHighlight对应IconMarkermarker.svg荧光笔3.2 段落、列表与排版IconAlignLeft/Right/Center/Justify对齐、IconIndent/Outdent缩进/减少缩进、IconBulletedList无序列表、IconNumberedList有序列表、IconTodoList待办列表、IconMultiLevelList多级列表以及一整套列表样式图标IconListStyleDisc、IconListStyleCircle、IconListStyleSquare、IconListStyleDecimal、IconListStyleDecimalLeadingZero、IconListStyleLowerRoman、IconListStyleUpperRoman、IconListStyleLowerLatin、IconListStyleUpperLatin、IconListStyleArabicIndic、IconLineHeight行高、IconSelectAll全选。3.3 标题与结构IconHeading1IconHeading6六个级别的标题、IconHorizontalLine水平线、IconPageBreak分页符、IconTableOfContents目录、IconShowBlocks显示块、IconDocumentOutline/IconDocumentOutlineToggle文档大纲/开关、IconSpecialCharacters特殊字符、IconFootnote脚注。3.4 表格与对象布局IconTable、IconTableRow、IconTableColumn、IconTableCellProperties、IconTableProperties、IconTableMergeCell、IconTableLayout表格相关IconObjectInline/IconObjectInlineLeft/IconObjectInlineRight行内对象布局、IconObjectLeft/IconObjectRight/IconObjectCenter环绕布局、IconObjectFullWidth整幅宽、IconObjectSizeSmall/Medium/Large/Full/Custom对象尺寸。3.5 媒体与文件IconImage、IconImageUpload、IconImageUrl、IconImageAssetManager、IconCkboxImageEdit、IconUploadcareImageEdit、IconUploadcareImageUpload、IconUploadcareLink图片/云存储IconMedia、IconMediaPlaceholder媒体嵌入IconFileUpload、IconPaperClip附件IconBrowseFiles、IconGoogleDrive、IconDropbox、IconOneDrive、IconGooglePhotos文件管理与云盘IconImportWord、IconExportWord、IconExportPdf、IconImportExport导入导出IconPrint、IconDocument、IconDocumentWithCheckmark、IconDocumentWithCross、IconDocumentWithLoupe、IconHtml。3.6 编辑操作与历史IconUndo、IconRedo撤销重做、IconCopy、IconPaste相关IconClipboard不在本包粘贴相关见各插件、IconRemove、IconRemoveFormat、IconEraser、IconPencil、IconPen、IconFindReplace查找替换、IconSource源码、IconHistory、IconRevisionHistory修订历史、IconRefresh、IconMaximize、IconMinimize。3.7 协作、评论与修订IconAddComment、IconEditComment、IconRemoveComment、IconCommentsArchive、IconTrackChanges、IconTrackChangesAccept、IconTrackChangesDiscard、IconShowChangesOn、IconShowChangesOff、IconContentLock、IconContentUnlock、IconUser、IconSelection、IconPin评论置顶。3.8 排版装饰与符号IconQuote引用、IconBookmark/IconBookmarkMedium/IconBookmarkSmall/IconBookmarkInline书签四规格、IconBoxWithCheck/IconBoxWithCross/IconBoxWithMarker、IconCheck、IconCancel、IconClose、IconPlus、IconMinus对应IconRemove、IconSparkle、IconThreeStars、IconStar未在本包、IconThumbUp/IconThumbDown、IconWarning、IconError、IconInfo、IconBulb、IconEye、IconEyeCrossedOut、IconLoupe、IconNotification、IconLocal、IconWeb、IconPlay、IconStop、IconSubmit、IconSettings、IconCog、IconColorPalette、IconColorTileCheck、IconMagicWand、IconRobotPencil、IconOutdated、IconDragHandle、IconDragIndicator、IconThreeHorizontalDots、IconThreeVerticalDots、IconChevronDown/Up/Right、IconArrowDown/Up、IconNextArrow、IconPreviousArrow、IconReturnArrow、IconDropdownArrow、IconFullscreenEnter、IconFullscreenLeave、IconSocial系列IconFacebook、IconProjectLogo、IconLogo对应IconProjectLogo、IconPaginationExample、IconTemplate、IconTemplateGeneric、IconLegalStyleList、IconPreviewMergeFields、IconInsertMergeField、IconMergeFields对应IconInsertMergeField、IconAI全家桶等。3.9 AI 功能图标IconAI*系列本仓库包含一组完整的 AI 相关图标与ckeditor5-ai功能对应图标导出名源文件语义IconAIai.svgAI 通用IconAIAskAIai-ask-ai.svg向 AI 提问IconAIAuthorai-author.svgAI 写作IconAIAdjustLengthai-adjust-length.svg调整篇幅IconAIChangeToneai-change-tone.svg调整语气IconAIContinueWritingai-continue-writing.svg续写IconAIGrammarCheckai-grammar-check.svg语法检查IconAIImproveWritingai-improve-writing.svg优化写作IconAIOtherai-other.svg其他 AI 操作IconAIQuickActionsai-quick-actions.svg快捷操作IconAIReviewai-review.svg审阅IconAITranslateai-translate.svg翻译IconAIChatai-chat.svgAI 对话IconAIChatCommandsai-chat-commands.svg对话命令IconAIHistoryai-history.svgAI 历史记录四、自定义图标两种官方方案总览在自托管安装npm 或 ZIP中可以整体覆盖提供图标的ckeditor/ckeditor5-icons包来定制编辑器 UI 图标。官方文档 docs/getting-started/setup/customizing-icons.md 给出了两条路线方案适用场景原理包管理器覆盖package manager override不依赖打包器配置npm/Yarn/pnpm 皆可制作自定义图标包用overrides/resolutions替换依赖图resolve 别名替换已使用 Vite/Webpack/esbuild/Rollup/Rolldown 等打包器在打包器配置里把图标包入口 alias 到自定义 JS 文件两种方式都要求你手头有一份官方导出清单作为模板即安装后node_modules/ckeditor/ckeditor5-icons/dist/index.js中的内容——它是由 src/index.ts 构建而来其中每个图标都被编译为一个export const IconXxx …svg 字符串…形式的 JS 字符串。4.1 方案一包管理器覆盖第 1 步准备自定义图标包在项目内、源码目录通常是src之外新建一个自定义图标包目录并创建package.json{ name: my-custom-icons, private: true, version: 0.0.1, type: module, main: ./dist/index.js }打开node_modules下的ckeditor/ckeditor5-icons包找到dist/index.js把其中的内容复制到自定义图标包的dist/index.js。目录结构如下my-custom-icons/ ├── dist/ │ └── index.js └── package.json然后直接修改index.js中承载 SVG 的 JS 字符串即可定制图标。务必保持与官方文件相同的结构、导出名称与命名约定例如IconBold、IconAlignLeft否则对应插件将引用不到图标。第 2 步在不同包管理器中覆盖默认包npm—— 在项目package.json中添加{ dependencies: { ckeditor/ckeditor5-icons: file:./icons }, overrides: { ckeditor/ckeditor5-icons: $ckeditor/ckeditor5-icons } }然后运行npm install。注意overrides的值以美元符号$开头这是 npm 要求使用dependencies中该依赖版本的语法。若file:协议未创建符号链接可能需要删除node_modules后重新npm install才能看到改动。Yarn Classicv1—— 在package.json中添加{ resolutions: { ckeditor/ckeditor5-icons: link:./icons } }然后运行yarn install。Yarn Berryv2—— 配置方式与 Classic 相同{ resolutions: { ckeditor/ckeditor5-icons: link:./icons } }然后运行yarn install。pnpm—— 在package.json中添加{ pnpm: { overrides: { ckeditor/ckeditor5-icons: link:./icons } } }然后运行pnpm install。使用要点file:npm与link:Yarn/pnpm指向的是你的自定义图标包目录请按实际路径调整overridesnpm/pnpm与resolutionsYarn用于强制依赖树中所有ckeditor/ckeditor5-icons引用指向自定义包。4.2 方案二resolve 别名替换打包器如果你的项目使用打包器可以不加自定义包直接用 resolve alias 把ckeditor/ckeditor5-icons的导入指向自建图标文件。第 1 步准备自定义图标文件同样从node_modules/ckeditor/ckeditor5-icons/dist/index.js复制一份到项目内例如src/icons.js并删除文件底部的//# sourceMappingURLindex.js.map注释。随后修改其中的 SVG 字符串即可。第 2 步按打包器添加别名以下示例均假设自定义图标位于src/icons.js且打包器配置文件为 ESM 格式若为 CommonJS请把import.meta.dirname替换为__dirname。Vite—— 在vite.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };Webpack—— 在webpack.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };esbuild—— 在 esbuild 配置中import { resolve } from path; build( { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } );Rollup—— Rollup 默认不支持别名需安装官方插件rollup/plugin-aliasimport { resolve } from path; import alias from rollup/plugin-alias; export default { plugins: [ alias( { entries: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } ) ] };Rolldown—— 在rolldown.config.js中import { resolve } from path; export default { resolve: { alias: { ckeditor/ckeditor5-icons/dist/index.js: resolve( import.meta.dirname, ./src/icons.js ) } } };五、原理深挖源码、构建与类型生成5.1 为什么导出入口长这样packages/ckeditor5-icons/src/index.ts 全部由形如下面的导出语句组成export { default as IconBold } from ../theme/icons/bold.svg; export { default as IconAlignLeft } from ../theme/icons/align-left.svg; // ... 共 214 条这意味着在旧安装方式中开发者可以直接 import 单个 SVG 模块import bold from ckeditor/ckeditor5-icons/theme/icons/bold.svg来覆盖指定图标。构建时这些.svg文件被内联为 JS 字符串因此图标包的实际产物是一组导出 SVG 字符串的 ESM 模块任何最终用户都可以通过修改该模块中的字符串来换图标。5.2 类型声明为什么需要脚本生成由于src/index.ts直接导出了.svg模块TypeScript 会为它们生成形如export { default as IconMyIcon } from ../theme/icons/my-icon.svg的声明——这会让没有为 SVG 声明模块类型的项目报错。因此仓库专门提供了 scripts/update-icons-typings.mjs在构建阶段把这类声明替换为简单的字符串常量声明export const IconMyIcon: string;如该脚本头注释所述一旦旧安装方式被移除未来可能改为在src/index.ts中直接以字符串存放图标或直接从构建产物生成类型。5.3 图标使用与测试保障图标包的测试位于 packages/ckeditor5-icons/tests/index.js目前是一个占位测试保证 CI 在 0 用例时不失败使用 Vitest 运行。真正校验图标可用性的是各 UI 插件自身的渲染测试——图标以字符串注入按钮模板后最终由主题 CSS 渲染为可见的工具栏图标。六、实战建议与常见问题6.1 如何只替换个别图标而不是全部ckeditor/ckeditor5-icons的替换是整包替换模型你拿到dist/index.js后只需改动其中少数几个图标对应的字符串其余保持官方原样即可——不必重写全部 214 个图标。只要保留导出名称不变插件仍能正确定位到对应图标。6.2 图标不生效的排查清单导出名称是否一致自定义文件中IconXxx的拼写必须与官方一致例如IconAlignJustify而非IconJustifySVG 是否合法保持viewBox0 0 20 20结构避免路径语法错误导致按钮空白覆盖是否真正生效npm 的file:若不创建符号链接需删除node_modules重装检查npm ls ckeditor/ckeditor5-icons或 pnpm/yarn 的依赖树确认解析到了自定义包缓存构建工具与浏览器缓存可能导致旧图标残留必要时清理打包器缓存。6.3 关于许可证与试用本包采用双许可模式GNU GPL v2 或更高版本或 CKSource Holding sp. z o.o. 的商业许可详见 packages/ckeditor5-icons/LICENSE.md。若需评估完整版 CKEditor 5含协作、AI 等商业功能可在 docs/getting-started/setup 相关文档中了解试用方式。延伸阅读自定义图标官方指南上文两套方案的完整出处图标包 API 参考包的正式 API 文档图标导出入口源码214 个图标的完整导出清单构建类型生成脚本解释类型声明的由来更新到 45 版本说明图标覆盖机制的引入背景。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考