图标

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 的完整列表。将定期添加更多图标，您也可以在问题跟踪器上请求新图标。