Gutenberg カスタムブロックのアイコンを変える

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

Gutenbergでカスタムブロックを追加しているときアイコンを変えたいというケースがありました。
この場合次の方法で変更可能です。

ドキュメントを確認すると WordPressのDashiconsとSVGが指定できるようです。

// Specifying a dashicon for the block
icon: 'book-alt',

// Specifying a custom svg for the block
icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,

また次の指定でアイコンの背景など変えることも可能なようです。

icon: {
    background: '#7e70af',
    foreground: '#fff',
    src: 'book-alt',
} ,

今回はDashiconsを使ってみようと思います。
dashicons-desktopなどのdashicons-を除いたアイコン名を指定します。

registerBlockType(category-slug/my-block, {
  title: 'タイトル',
  description: '説明',
  icon: 'desktop', //← dashicons-desktop
  .
  .
  .

 });

無事変更できました。   

以上「Gutenberg カスタムブロックのアイコンを変える」でした。
アイコンを変えたい場合参考にしてみてください。


関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから