云策 WordPress 开发者社区

块编辑器开发文档

@wordpress/icons

查看官方原文 ↗
💡 云策文档标注

概述

本文档介绍了 WordPress Icons 库的安装、使用和贡献指南。该库提供了一套图标组件，适用于 WordPress 开发环境，支持通过 npm 安装和 ES2015+ 环境。

关键要点

  • 安装方式：通过 npm install @wordpress/icons --save 安装，需确保运行环境支持 ES2015+，否则需包含 polyfill。
  • 基本用法：使用 import { Icon, check } from '@wordpress/icons'; 和 ; 来引入和渲染图标。
  • Icon 组件属性：支持 size 属性（整数类型，默认值 24），用于设置图标像素大小。
  • 文档和示例：可在 https://wordpress.github.io/gutenberg/?path=/docs/icons-icon–default 浏览图标文档和示例。
  • 添加新图标：步骤包括添加 SVG 文件到 src/library/ 目录（文件名需为 kebab-case）、自动生成 TypeScript 文件、在 src/manifest.json 中添加条目（包括 slug、label、filePath 和可选的 public 字段），并运行 npm run build 更新。
  • 贡献指南：此包是 Gutenberg 项目的一部分，采用 monorepo 结构，贡献者需参考项目的主要贡献者指南。

注意事项

  • 环境要求：如果环境不支持 ES2015+，必须包含 @wordpress/babel-preset-default 中的 polyfill。
  • 文件编辑：manifest.php 文件由构建脚本自动从 manifest.json 生成，请勿手动编辑，以免更改被覆盖。
  • 公开图标：在 manifest.json 中设置 public: true 会将图标暴露为 core icon，一旦公开难以移除，需谨慎考虑。
📄 原文内容

WordPress Icons Library.

Installation

Install the module:

npm install @wordpress/icons --save

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Usage

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

<Icon icon={ check } />;

Props

Name Type Default Description
size integer 24 Size of icon in pixels.

Docs & Examples

You can browse the icons docs and examples at https://wordpress.github.io/gutenberg/?path=/docs/icons-icon–default

Adding new icons

To add a new icon to the library, follow these steps:

  1. Add the SVG file: Place your SVG file in the src/library/ directory. The filename should be in kebab-case (e.g., my-new-icon.svg).
  2. TypeScript files are auto-generated: The TypeScript component files (.tsx) are automatically generated by the build script from the SVG files. You do not need to manually create or edit these files.

  3. Add the icon to manifest.json: Add an entry for your new icon in src/manifest.json. The entry should include:

    • slug: The icon identifier (should match the SVG filename without the .svg extension)
    • label: The human-readable label for the icon. Use Title Case (for example, My New Icon).
    • filePath: The relative path to the SVG file (e.g., library/my-new-icon.svg)
    • public (optional): Set to true if you want to expose this icon as a core icon through the SVG Icons API. Important: Once an icon is made public, removing it is difficult, so carefully consider whether to make it public before setting this field to true.
  4. Do not edit manifest.php: The manifest.php file is automatically generated from manifest.json by the build script. Do not edit it manually, as your changes will be overwritten when the build runs.

After adding your icon, run npm run build to generate the TypeScript files and update manifest.php.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.