アイコン

PrimeIcons は PrimeReact のデフォルトアイコンライブラリです。

ダウンロード#

PrimeIcons は npm で入手できます。プロジェクトにダウンロードするには、次のコマンドを実行します。


npm install primeicons
         

インポート#

アイコンライブラリの CSS ファイルをアプリケーションにインポートする必要があります。


import 'primeicons/primeicons.css';
         

Figma#

PrimeIcons ライブラリが Figma コミュニティで利用できるようになりました。ライブラリとして追加することで、デザインでこれらのアイコンを簡単に使用できます。

基本#

PrimeIcons は pi pi-{icon} 構文（例：pi pi-check）を使用します。スタンドアロンのアイコンは、i や span などの要素を使用して表示できます。


<i className="pi pi-check"></i>
<i className="pi pi-times"></i>
<span className="pi pi-search"></span>
<span className="pi pi-user"></span>
         

サイズ#

アイコンのサイズは、要素の fontSize プロパティで制御されます。


<i className="pi pi-check" style={{ fontSize: '1rem' }}></i>
<i className="pi pi-times" style={{ fontSize: '1.5rem' }}></i>
<i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>
         

色#

アイコンの色は、デフォルトで親から継承される color プロパティで定義されます。


<i className="pi pi-check" style={{ color: 'slateblue' }}></i>
<i className="pi pi-times" style={{ color: 'green' }}></i>
<i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
<i className="pi pi-user" style={{ color: '#708090' }}></i>
         

回転#

特別な pi-spin クラスは、アイコンに無限回転を適用します。


<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>
         

定数#

プログラムで参照する場合に、アイコンを簡単に参照できる定数 API が利用可能です。


import React from 'react'; 
import { Menu } from 'primereact/menu';
import { PrimeIcons } from 'primereact/api';

export default function ConstantsDemo() {
    const items = [
        {
            label: 'File',
            items: [
                { label: 'New', icon: PrimeIcons.PLUS },
                { label: 'Open', icon: PrimeIcons.DOWNLOAD }
            ]
        }
    ];

    return (
        <Menu model={items} />
    )
}
         

リスト#

PrimeIcons の全リストは次のとおりです。新しいアイコンは定期的に追加され、イシュートラッカーで新しいアイコンをリクエストすることもできます。

                    PrimeReact 10.8.3 by PrimeTek