Microsoft Fluent UI 系统图标库安装与使用指南
目录结构及介绍
当你克隆或下载了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
的主要组成部分及其如何被组织和配置的基础知识。接下来,你可以进一步探索这些文件的具体细节,以更深入地了解如何定制和集成这些图标到你的项目中。