圖示

PrimeIcons 是 PrimeVue 的預設圖示庫，由 PrimeTek 開發，包含超過 250 個開放原始碼圖示。 PrimeIcons 庫是可選的，因為 PrimeVue 元件可以使用任何帶有模板的圖示。

下載 #

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 的完整列表。將會定期新增更多圖示，您也可以在問題追蹤器中請求新的圖示。