ブロックアイコンに色を付ける!foreground設定

いくつかのブロック集プラグインでは、追加されたブロックのアイコンには色が付いており、何のブロック集で追加されたブロックなのかが解りやすくなっています。
今回は、それを設定する方法を記事にしました。

色のついたEvaluation Starブロックの例
選択されているブロックも何のブロック集のブロックなのか解りやすい

用意されたアイコンであれば、foregroundを使うだけ

registerBlockTypeのiconを下記のように書き換えるだけです。

registerBlockType( 'ブロックのslug', {
	title: 'ブロックのタイトル',
	description: 'ブロックの説明',
	icon: {
		foreground: '#カラーコード',
		src: 'アイコンの名前',
	},
	category: 'ブロックのカテゴリー',
	...略...

アイコンの名前とは、アイコンのSVGタグ名やDashIconの定義名などになります。(例画像の星アイコンであれば、star-halfとなる定義名です)
カラーコードは実際に表示したい色のカラーコードを設定しましょう。
それだけです。

自作アイコンにする場合、元の色は使用しない

アイコンで使用するSVGのsvgタグにfill=”none”を付与し、各pathの記述に対してもfill=”currentColor”を付与します。foregroundを使用する為、カラー設定を直力適用しない方がいいと思います。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。