# Icons

WordPress Icons Library.

## Installation

Install the module:

```bash
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`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._

## Usage

```js
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](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](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) 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](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>