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

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

色を付与すると、どう見える?

ブロックの色変更例
ブロックの色変更例02

SVGアイコンの設定に、foregroundを設定するだけ

registerBlockTypeicon要素に対して、下記のようにforeground要素を追加するだけです。

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

カラーコードは、Webと同じように#から始まるRGBコードで指定だけど、α値とかの設定はまだ出来ないよ。

ルミェール(アイコン01)

アイコンの名前とは、アイコンのSVGタグ名やDashIconの定義名などになります。(例えば、星アイコンであればstar-halfなどとなります)

自作アイコンの場合は?

アイコンで使用するSVGファイルのsvgタグにはfill=”none”を付与するかfillの記述をしないようにします。また各pathの記述に対してもfill=”currentColor”を付与するか、fillの記述をしないようにしましょう。

テネーブル

foreground要素を使用しない場合でも、ブロックエディター内ではほとんどが黒一色にスタイルが指定されているので、可能な限りカラー設定を適用しない方が良いと思われます。

テネーブル(アイコン01)