アイコン

PrimeIcons は、PrimeTekによって開発された250以上のオープンソースアイコンを備えたPrimeVueのデフォルトのアイコンライブラリです。PrimeVueコンポーネントはテンプレートを使用して任意のアイコンを使用できるため、PrimeIconsライブラリはオプションです。

ダウンロード #

PrimeIconsはnpmで利用できます。次のコマンドを実行してプロジェクトにダウンロードしてください。


npm install primeicons

インポート #

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


import 'primeicons/primeicons.css'

Figma #

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

基本 #

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


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

サイズ #

アイコンのサイズは、要素のfont-sizeプロパティで制御します。


<i class="pi pi-check" style="font-size: 1rem"></i>
<i class="pi pi-times" style="font-size: 1.5rem"></i>
<i class="pi pi-search" style="font-size: 2rem"></i>
<i class="pi pi-user" style="font-size: 2.5rem"></i>

色 #

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


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

回転 #

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


<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>

定数 #

プログラムで使用する際にアイコンを簡単に参照できる定数APIがあります。


<template>
    <div class="card flex justify-center">
        <Menu :model="items" />
    </div>
</template>

<script>
import { PrimeIcons } from '@primevue/core/api';

export default {
    data() {
        return {
            items: [
                {
                    label: 'File',
                    items: [
                        { label: 'New', icon: PrimeIcons.PLUS },
                        { label: 'Open', icon: PrimeIcons.DOWNLOAD }
                    ]
                }
            ]
        };
    }
};
</script>

リスト #

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