Fluent UI的图标主要使用自定义字体,根据 Microsoft Fabric Assets 许可证发布。从Fluent UI React版本8开始,MIT许可证下提供了相同图标集的基于SVG的版本。
我应该何时使用Fluent UI图标?
建议将Fluent UI图标用于命令栏、导航或状态指示器。如果您需要代表Office应用程序的图标,请参阅Office品牌图标页面。如果要表示文件或数字内容,请参阅文件类型图标页面。
Fluent UI传统上使用自定义字体进行图标设计。此字体是MDL2设计系统的一部分,包含可以以任何方式缩放、颜色和样式的字形。您还可以下载并安装图标字体,以便与Sketch、Figma或Adobe XD等各种设计应用程序一起使用。
Fluent UI React
为了在使用Fluent UI React时使基于字体的图标可用,您需要从@fluentui/font-icons-mdl2包调用initializeIcons来初始化它们。这通常在应用程序的根目录下完成:
import { initializeIcons } from '@fluentui/font-icons-mdl2';
initializeIcons();
默认情况下,这将从OneDrive、SharePoint和其他Microsoft产品使用的CDN加载图标字体。如果您想控制字体的来源,可以从另一个CDN或文件共享托管它们,并将该位置传递给initializeIcons:
initializeIcons('https://my.cdn.com/path/to/icons/');
初始化图标后,您可以像其他Fluent UI组件一样在应用程序中使用图标组件:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Icon } from '@fluentui/react/lib/Icon';
const MyIcon = () => <Icon iconName="CompassNW" />;
ReactDOM.render(<MyIcon />, document.body.firstChild);
一些组件还包括通过iconProps烘焙支持图标,您可以使用它来配置图标的渲染方式。下面是使用IconButton的示例:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IconButton } from '@fluentui/react/lib/Button';
const MyIconButton = () => <IconButton iconProps={{ iconName: 'Add' }} title="Add" ariaLabel="Add" />;
ReactDOM.render(<MyIconButton />, document.body.firstChild);
Fabric Core
这种方法主要针对非React的页面或应用程序。
首先,确保按照入门说明加载了Fabric Core样式表。
在应用程序中,将基本ms-Icon类与特定图标的修饰符类组合:
<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>
注意aria隐藏属性,它阻止屏幕阅读器读取图标。如果仅通过图标(如仅图标的导航栏)传达意思,请使用按钮上的aria标签属性以便于访问。
Fluent UI图标工具
Fluent UI图标工具允许您搜索和浏览Fluent UI的所有基于字体的图标。您还可以使用它来创建和维护要在web应用程序中使用的图标字体子集,它们是默认Fabric Core和Fluent UI React图标集的替代品。此外,与Fluent UI集相比,Fluent UI图标工具更新新图标的频率更高。
SVG icons
两个包都包含包裹在React组件中的SVG图标。这允许您仅导入和捆绑所需的图标,与initializeIcons(默认情况下下载所有图标)基于字体的方法相比,下载大小更小。
SVG图标组件主要用于直接使用,而不是全局注册它们(通过registerIcons或initializeIcons),并在Fluent UI React的图标组件中通过名称或通过iconProps.name引用它们。例如:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChevronDownIcon } from '@fluentui/react-icons-mdl2';
ReactDOM.render(<ChevronDownIcon />, document.body.firstChild);
如果您确实需要使SVG图标可按名称引用(例如,在采用iconProps的Fluent UI React组件中),可以使用registerCons如下完成:
import { unregisterIcons, registerIcons } from '@fluentui/react/lib/Styling';
// Note: This approach works with any SVG icon set, not just @fluentui/react-icons-mdl2
import { ChevronDownIcon, BadgeIcon } from '@fluentui/react-icons-mdl2';
// Note: For any icon name that has an icon already registered to it, you need to unregister it first before registering a new one
unregisterIcons(['ChevronDown']);
registerIcons({
icons: {
ChevronDown: <ChevronDownIcon />,
ANewIconName: <BadgeIcon />,
},
});