標準のアイコンブロックへ独自のSVGアイコンを追加する方法

WordPress 7.0 で追加され、7.1で回転などの機能が強化されたアイコンブロック。

ダッシュアイコンと同じようなアイコンが標準搭載されているものの、一度リリースしてしまうとおいそれと削除できない懸念があるためか、ちょっと寂しい感じがしますね。

そこで本ページでは、公式ドキュメント「WordPress 7.1 での SVG アイコンの登録とレンダリング」を参考に、基本的なアイコンの追加方法と、応用編として特定のフォルダにあるSVG画像を自動的に使用できるようにする方法の2つを紹介します。

アイコンブロックはWordPress 7.0 で追加されたブロックですが、本ページのコードを使ってアイコンを追加するには7.1以上が必要です

アイコンの入手方法

ネット検索すると、各所に無料のアイコン画像（SVG形式の画像）が配布されていますが、せっかく探したのに導入してみたらアイコンの一部が表示されなかったりするので苦労するかもしれません。

個人的におすすめなのは、「All SVG Icons」というサイトです。

さまざまな無料SVG画像を集めたサイトで、単語検索もできて目的の画像を探すのにとても重宝します。

アイコンブロックへ独自のアイコンを追加する前準備

まず前項のサイトなどから目的のアイコン、もしくは適当にテストできそうなアイコンを「icons」というフォルダを作っていくつかダウンロードしておきましょう。

アイコンの追加はテーマへファイルやコードを追加することでも実装できますが、更新でテーマが上書きされてコード類が消失してしまったり、テーマを変更する場合に移行で手間がかかりますので、以下のページを参考に独自のプラグインを作っておくといいでしょう（この先独自プラグインを作成した前提で話を進めます）。

プラグインを作って有効化したら、プラグインディレクトリの中に先ほど画像を入れて作成した「icons」フォルダをアップロードしておきましょう。

【基本編】標準のアイコンブロックへ独自のアイコン（SVG画像）を追加する方法

こちらは公式ドキュメントの「WordPress 7.1 での SVG アイコンの登録とレンダリング」に書かれている方法のうち、画像を追加するためのコードのほぼそのままです。

少量のアイコンを登録したい場合にはコード体系が分かりやすいのでメンテナンスも容易だと思います。

以下のコードの「アイコンの一意の名前」の部分をそのアイコンのプログラム上の名称（英数字とハイフンが使用可能、ファイル名と同じにしておくと管理しやすいかも）に変更し、「アイコン一覧に表示する文字列」の部分をそのアイコンの一覧上の表示名に変更し、「ファイル名」を「icons」の中に入れたファイルの名前に変更した上で、自作プラグインのプラグイン名.phpファイルや独自のプログラムを呼び出せるようにしているファイルの中へ挿入し、保存します。

/***** アイコンブロックへのアイコン登録 *****/
/*** アイコングループの登録 ***/
/* 「置き換え」をクリックした時に独自のアイコンだけを表示するグループを作成する */
function pwcn_plugin_register_icon_collection() {
	wp_register_icon_collection(
		'my-plugin',
		array(
			'label'       => 'My Plugin Icons',
			'description' => 'Icons provided by My Plugin.',
		)
	);
}
add_action( 'init', 'pwcn_plugin_register_icon_collection' );

/*** アイコンの追加 ***/
function pwcn_plugin_register_icons() {
	wp_register_icon(
		'my-plugin/アイコンの一意の名前',
		array(
			'label'     => 'アイコン一覧に表示する文字列',
			'file_path' => plugin_dir_path( __FILE__ ) . 'icons/ファイル名.svg',
		)
	);
}
add_action( 'init', 'pwcn_register_icons' );

エラーなく保存できたら、何かテストできそうな投稿の編集画面を開き、アイコンブロックを挿入後、ブロックツールバーの「置き換え」をクリックして、左側に「My Plugin Icons」が表示され、それをクリックした時に画像が表示されるか、また、実際にクリックした時にアイコンが表示されるかを確認してください。

問題なければ以下の部分を上のコード内へ追加してアイコンの情報に変更たものをどんどん追加すれば使用できるようになります。

	wp_register_icon(
		'my-plugin/アイコンの一意の名前',
		array(
			'label'     => 'アイコン一覧に表示する文字列',
			'file_path' => plugin_dir_path( __FILE__ ) . 'icons/ファイル名.svg',
		)
	);

【応用編】特定のフォルダ内にあるSVG形式の画像を自動徒労区し、アイコンブロックで使用できるようにする方法

前項では1つ1つアイコンの設定をしていく方法を紹介しました。

数が少ない場合には前項の方法でよいと思うのですが、何十、何百となってくるとコードが長くなり、以下のようなトラブルが発生する可能性があります。

• アイコン設定部分のプログラムの追加忘れで追加したはずのアイコンが使えない（インサーターに表示されない）
• 部分的にプログラムをコピー後、アイコン固有の名前を変更し忘れてエラー表示になる
• 部分的にプログラムをコピー後、表示名やファイル名の指定を間違えてトラブルになったり、同じアイコンが表示されたりする

この項では応用編として、「icons」ディレクトリにあるSVG形式の画像を自動で読み込んで、ファイル名から自動でアイコン固有の名前や表示名を追加するコードを紹介します。

このコードを使うことで、「icons」ディレクトリにSVGファイルを追加するだけで即座に使用できるようになって大変便利です。

追加できることが分かればその後アイコンをどんどん追加していくことが予想されますので、前項の個別追加するコードよりも、画像のあるなしで自動的にメンテナンスされるこちらの方法をおすすめします

/*** アイコングループの登録 ***/
function pwcn_plugin_register_icon_collection_auto() {
	wp_register_icon_collection(
		'my-plugin',
		array(
			'label'       => 'My Plugin Icons',
			'description' => 'Icons provided by My Plugin.',
		)
	);
}
add_action( 'init', 'pwcn_plugin_register_icon_collection_auto', 5 );

/*** アイコンの登録 ***/
function pwcn_plugin_register_icons_auto() {
	// 共通のディレクトリパス
	$base_path = plugin_dir_path( __FILE__ ) . 'icons/';
	$collection_prefix = 'my-plugin';

	// 指定ディレクトリが存在しない場合は処理を中断
	if ( ! is_dir( $base_path ) ) {
		return;
	}

	// フォルダ内のすべての .svg ファイルを取得
	$svg_files = glob( $base_path . '*.svg' );

	if ( empty( $svg_files ) ) {
		return;
	}

	// 各ファイルをループして自動登録
	foreach ( $svg_files as $file_path ) {
		$file_name = basename( $file_path ); // 例: accessibility.svg
		$slug      = basename( $file_path, '.svg' ); // 例: accessibility

		// スラッグを元にアイコン名（コレクション名/スラッグ）を生成
		$icon_name = $collection_prefix . '/' . $slug;

		// ファイル名（ハイフンつなぎ）からラベルを自動生成（例: 'aid-kit' -> 'Aid Kit'）
		$label = ucwords( str_replace( '-', ' ', $slug ) );

		wp_register_icon(
			$icon_name,
			array(
				'label'     => $label,
				'file_path' => $file_path,
			)
		);
	}
}
add_action( 'init', 'pwcn_plugin_register_icons_auto', 10 );

前述しましたが、コード設置後、「icons」ディレクトリにSVG形式の画像を追加するだけで、勝手にアイコンとして登録され、アイコンブロックのインサーターからいつでも挿入できるようになります。

【おまけ】アイコン一覧の表示が小さくて見にくいときは

アイコンの一覧（インサーター画面）のアイコン表示小さくないですか（私が老眼で細かいものが見えないだけかもしれませんが．．）？

以下のコードをテーマのstyle.cssまたは、独自プラグインのスタイルファイルへ追加することで、アイコンを大きく表示できます。

/*** インサーターのアイコンを大きく表示 ***/
.wp-block-icon__inserter-grid-icons-list-item-icon svg {
    height: 48px;
    width: 48px;
}

span.wp-block-icon__inserter-grid-icons-list-item-icon {
    padding: 0;
}

ブロックエディター側に作用させる必要がありますので、「enqueue_block_assets」へフックさせているスタイルシートへ追加してください