Using Gutenberg Icons

[arl1nd]

Hello,

This is a question regarding @wordpress/icons package. Are these icons available on global scope (wp variable) somewhere?

You can use the icon component like this:

wp.element.createElement( wp.components.Icon, {
    icon: alignCenter
} );

Since alignCenter is SVG component, where can it be found?

I am willing to keep my JS file as light as possible so I can access icon library from global scope instead of importing icon components from @wordpress/icons package.

Thank you for any input.

[talldan]

#19809 is the PR that made wp.icons not available via the wp variable.

I don't think there's a plan to change that, so npm may be your only option.

It isn't something I've been involved in (just relaying the info here) so I won't be able to answer any questions about that, but I see @gziolo was involved in that PR and might be able to.

[gziolo]

#19809 is the PR that made wp.icons not available via the wp variable.

I don't think there's a plan to change that, so npm may be your only option.

I don't think the decision to keep icons internal is set in stone. We definitely wanted to keep it internal to see how the collection of icons grows. We discussed some interesting ideas on how to make them part of the public API in a way that makes them easy to use with wp.icons.* syntax but also optimized for the best JavaScript download size. It isn't an easy task so we never get back to it.

The recommendation, for now, would be to use the @wordpress/icons package published to npm and import only those icons that you use. Once you use any build tool that optimized JavaScript it should use dead-code elimination techniques and bundle only code for those icons.

import { alignCenter } from '@wordpress/icons`;

[arl1nd]

Thank you very much for your help @talldan and @gziolo

I'll keep watching the state of @wordpress/icons from time to time and learn more about this.

[nikolowry]

Is there any package offering just the raw SVG contents/source of the icons? I only see JS files: https://github.com/WordPress/gutenberg/tree/38e559964e7b47366e2a7213827c9377783ba9d7/packages/icons/src/library

What's the process of submitting new icons? I don't see any style guide offering: icon-grid templates, stroke/fill guidelines, etc.