Icon

使用法

Dashiconを使用する

import { Icon } from '@wordpress/components';
const MyIcon = () => <Icon icon="screenoptions" />;

関数を使用する

import { Icon } from '@wordpress/components';
const MyIcon = () => (
   <Icon
   icon={ () => (
   <svg>
   <path d="M5 4v3h5.5v12h3V7H19V4z" />
   </svg>
   ) }
   />
);

コンポーネントを使用する

import { MyIconComponent } from '../my-icon-component';
import { Icon } from '@wordpress/components';
const MyIcon = () => <Icon icon={ MyIconComponent } />;

SVGを使用する

import { Icon } from '@wordpress/components';
const MyIcon = () => (
   <Icon
   icon={
   <svg>
   <path d="M5 4v3h5.5v12h3V7H19V4z" />
   </svg>
   }
   />
);

classNameの指定

import { Icon } from '@wordpress/components';
const MyIcon = () => <Icon icon="screenoptions" className="example-class" />;

プロパティ

このコンポーネントは以下のプロパティを受け入れます。追加のプロパティは基礎となるアイコン要素に渡されます。

アイコン

描画するアイコン。サポートされている値は、Dashicons（文字列として指定）、関数、コンポーネントインスタンス、およびnullです。

• タイプ: String|Function|Component|null
• 必須: いいえ
• デフォルト: null
  

サイズ

アイコンのサイズ（幅と高さ）。

• タイプ: Number
• 必須: いいえ
• デフォルト: Dashiconが描画されるときは20、他のすべてのアイコンには24。