The Icon Block

Description

A simple little block that allows you add a custom SVG icon or graphic to the Block Editor (Gutenberg).

The plugin also includes the complete WordPress icon library with 270+ SVG icons to choose from!

Key Features

  • 270+ native WordPress icons, including social logos
  • Use any custom SVG icon or graphic
  • Includes some handy icon controls (link, rotate, alignment, colors, etc.)
  • No block library required 🎉
  • Built almost entirely with native WordPress components
  • Will get additional functionality as its added to WordPress core (margin, borders, responsive controls etc.)

Stay Connected

Captures d’écran

  • The Icon Block includes the WordPress icon library allowing you to quickly and easily insert 270+ graphics.
  • Create your own custom icons by simply copy/pasting the SVG code. Then modify the icon to suit your needs.
  • The Icon Block comes with numerous icon controls such as color, rotation, alignment, padding, and border radius.
  • Whether you need a big icon, or a small one, the Icon Block adapts to your layout. Give it a try with the Row block in Gutenberg!
  • Use the "quick inserter", to quickly pick the WordPress icon you need.
  • The WordPress icon library modal is complete with categories, search, and preview size functionality.
  • Custom icons are added via their own insertion modal with a large textarea and the ability to preview the SVG code.
  • You are not limited to traditional icons. Any SVG-based graphic will work as well. The block will respect any hard coded color/fill values in the provided SVG.

Blocs

Cette extension fournit 1 bloc.

  • The Icon Block Add an SVG icon or graphic.

Installation

  1. You have a couple options:
    • Go to Plugins → Add New and search for « Icon Block ». Once found, click « Install ».
    • Download the Icon Block from wordpress.org and make sure the folder us zipped. Then upload via Plugins → Add New → Upload.
    • Open the block inserter within the Block Editor (Gutenberg) and search for « icon ». The plugin should appear and allow you to it install directly. Skip steps 2 and 3.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.
  3. Search for the block within the Block Editor (Gutenberg) and begin using.

FAQ

Where can I get more icons?

Currently, the Icon Block only includes the WordPress icon library. That said, the plugin allows you to render any SVG-based icon by simply copy/pasting the code into the icon textarea when using the « Add custom icon » option! See the screenshots for reference. This gives you complete flexibility and allows you to use practically any icon you want. A great source for free SVG icons is Google’s Material Icons project, Font Awesome, and Iconic, just to name a few.

Why is my icon not changing color?

The Icon Block includes controls for the icon’s color and background. However, if your SVG icon has hard coded color/fill values, the plugin will respect those instead of any applied custom colors.

Why is the block not working for certain users?

WordPress only allows Administrators and Editors to save SVG content. The Icon Block will not work properly for users who are at the Author level or lower.

Avis

25 novembre 2021
It's a good Plugin! I always coded an Icon Block for myself but this one features everything I need. Just the classes that are applied from my theme json colors where not right. But this was no effort for me, I just changed the name of my colors (without _ and no camelCase).
26 octobre 2021
Really love this plugin, have a good collection of inbuild svg icons to use and we can use any custom svg icon by simply pasting in the provided popup. Color, flip, linking, alignment, rotating, width control, everything is their that we do with an svg icon! The best part, it not load any icon library to display icons, so not create any extra load time on pages, and even if we move the page from a site to another site not having this plugin, it still work, as svg icon code remains 🙂
27 septembre 2021
It's a great block. If it would be possible to use this block as an inline block in headings and paragraphs that would make it even greater. For some people it might be a bit difficult to understand, what "Paste an SVG icon or graphic." even means. Although it's explained in the description and shown on the screenshot, I'd suggest adding a "?" or link the text "Paste an SVG icon or graphic." to the explainer text.
Lire les 3 avis

Contributeurs & développeurs

« The Icon Block » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

Traduisez « The Icon Block » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

1.0.0 – 2021-10-06

Added

  • Added the WordPress icon library featuring 270+ icons.
  • Add new placeholder and quick icon insertion experience.
  • Added new custom icon editing modal for an improved insertion experience.

0.1.2 – 2021-09-27

Added

  • Added scale transform on the frontend when an icon is linked to improve a11y. This matches the hover styling in the core WordPress Social Icons block. Future improvements are planned, including dedicated hover/focus settings within the block itself.

Fixed

  • Fixed translation file.
  • Fixed version in block.json so block can be added to the Block Directory.

0.1.1 – 2021-09-25

Fixed

  • Fixed SVG sanitization for non-standard SVGs.

0.1.0 – 2021-09-25

  • Initial release 🎉