Microsoft Fluent UI 系统图标库安装与使用指南

Microsoft Fluent UI 系统图标库安装与使用指南

fluentui-system-iconsFluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.项目地址:https://gitcode.com/gh_mirrors/fl/fluentui-system-icons

目录结构及介绍

当你克隆或下载了

fluentui-system-icons

仓库之后，你会看到以下主要的文件和目录：

├── .github                # GitHub相关的配置文件（如工作流）
├── .vscode                # VSCode的编辑器设置
├── README.md              # 项目的介绍文档
├── package.json           # Node.js项目的元数据和依赖配置
├── src                    # 源代码目录
│   ├── icons              # 包含SVG图标源文件
│   └── index.ts           # 导出所有图标的入口文件
├── stories                # Storybook相关的故事组件
└── scripts                # 自定义脚本目录，用于构建等操作

目录详解

• .github - 包含GitHub Actions的工作流程和其他GitHub特性的配置。
• .vscode - 包括VSCode的扩展推荐、调试配置以及项目特定的设置。
• README.md - 提供了关于项目的详细介绍和快速入门指导。
• package.json - 定义了项目的元数据、依赖项、开发依赖项和构建脚本。
• src/icons - 存储所有SVG图标文件，这些是Fluent UI系统图标的基本元素。
• src/index.ts - 是类型Script文件，从icons目录中的每个图标导出默认的React组件。
• stories - 使用Storybook来创建和预览独立的组件故事。
• scripts - 包含构建工具链的自定义脚本，例如编译、打包和发布过程。

启动文件介绍

在

src

目录下，index.ts是一个关键的启动点。这个文件负责将

src/icons

目录下的每个图标作为一个单独的React组件导出。这意味着你可以直接在你的应用中引入并使用任何一个图标，而无需额外的步骤。下面是一个简化版的例子:

// src/index.ts
export { default as HomeIcon } from './icons/home.svg';
export { default as SearchIcon } from './icons/search.svg';
// ...

这使得在你的应用程序中导入并使用这些图标变得非常简单直观：

import { HomeIcon } from 'fluentui-system-icons';

function App() {
    return <HomeIcon />;
}

配置文件介绍

虽然

fluentui-system-icons

不涉及复杂的配置选项，但在package.json中包含了构建和运行项目的关键脚本。以下是其中一些重要的命令：

"scripts": {
    "build": "tsc && rollup -c",
    "lint": "eslint src --ext ts,tsx",
    "prepublishOnly": "npm run build"
},

• build - 这个脚本首先通过TypeScript编译器(tsc)转换.ts到.js，然后使用Rollup进行打包以确保兼容性。
• lint - 运行ESLint检查，保证代码遵循统一的编码标准。
• prepublishOnly - 在NPM包发布前运行的脚本，确保你的构建产物是最新的。

以上介绍了

fluentui-system-icons

的主要组成部分及其如何被组织和配置的基础知识。接下来，你可以进一步探索这些文件的具体细节，以更深入地了解如何定制和集成这些图标到你的项目中。

fluentui-system-iconsFluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.项目地址:https://gitcode.com/gh_mirrors/fl/fluentui-system-icons