图标

PrimeIcons 是 PrimeReact 的默认图标库。

下载#

PrimeIcons 可在 npm 上获取，运行以下命令将其下载到您的项目中。


npm install primeicons

导入#

需要在您的应用程序中导入图标库的 CSS 文件。


import 'primeicons/primeicons.css';

Figma#

PrimeIcons 库现在可在 Figma Community 上使用。通过将它们添加为库，您可以轻松地在设计中使用这些图标。

基本#

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