@wordpress/icons

WordPress 图标库。

安装

安装该模块：

npm install @wordpress/icons --save

本包假定您的代码将在 ES2015+ 环境中运行。如果您使用的环境对这类语言特性和 API 支持有限或完全不支持，您应该在代码中包含 @wordpress/babel-preset-default 随附的 polyfill。

用法

import { Icon, check } from '@wordpress/icons';

<Icon icon={ check } />;

重着色

使用 CSS color。图标通过 fill 或 stroke 上的 currentColor 跟随其变化。

库中有一小部分基于描边的图标。这些图标在外层 <svg> 上设置了 fill: none 作为内联样式，因此 fill prop 或普通的 CSS fill 规则无法改变它们的颜色。仅当您打算替换该固有填充时，才传递 style={ { fill: value } }。

Icon 将消费者的 style 与图标的自身样式合并。对于相同的属性，消费者值具有优先级。

Props

文档和示例

您可以在以下地址浏览图标文档和示例：https://wordpress.github.io/gutenberg/?path=/docs/icons-icon–default

添加新图标

要将新图标添加到库中，请遵循以下步骤：

1. 添加 SVG 文件：将您的 SVG 文件放置在 src/library/ 目录中。文件名应使用连字符命名法（例如，my-new-icon.svg）。基于描边的图标应在描边形状上使用 stroke="currentColor"，并在 vector-effect="non-scaling-stroke" 上设置，以便在图标在 Icon 块之外渲染时描边宽度保持恒定。构建脚本仅接受 fill: none 作为内联样式。
2. TypeScript 文件是自动生成的：TypeScript 组件文件（.tsx）由构建脚本从 SVG 文件自动生成。您无需手动创建或编辑这些文件。

3. 将图标添加到 manifest.json：在 src/manifest.json 中为您的新图标添加一个条目。该条目应包括：

   • slug：图标标识符（应与 SVG 文件名匹配，不含 .svg 扩展名）
   • label：图标的可读标签。使用标题大小写（例如，My New Icon）。
   • filePath：SVG 文件的相对路径（例如，library/my-new-icon.svg）
   • collections（可选）：图标在发布到 WordPress Core 后注册到的集合。省略此项可仅将图标保留在 JS 库中。重要：一旦图标发布到 WordPress Core，删除它将变得困难，因此在设置此字段前请仔细考虑。可用的集合有：
     • core：公共集合。其图标通过 SVG Icons API 公开，使其可在 Icon 块中选择。
     • core-admin：WordPress 管理界面从中渲染的集合。它不是公开的，因此其图标永远不会通过 REST API 公开或在 Icon 块中选择，并且注销 core 不会将它们从管理界面中移除。
   • keywords（可选）：图标的其他可翻译搜索术语数组（例如，菜单图标的 [ "hamburger", "navigation" ]）。
4. 不要编辑 manifest.php：manifest.php 文件由构建脚本从 manifest.json 自动生成。请勿手动编辑它，因为当构建运行时，您的更改将被覆盖。

添加图标后，运行 npm run build 以生成 TypeScript 文件并更新 manifest.php。

为本包做出贡献

这是 Gutenberg 项目的一部分独立包。该项目组织为 monorepo。它由多个自包含的软件包组成，每个包都有特定的用途。此 monorepo 中的包已发布到 npm，并被 WordPress 以及其他软件项目使用。

要了解有关为此包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的主 贡献者指南。