fluentui-system-icons README

The project's README from github.com/microsoft/fluentui-system-icons. As one markdown file: README.md.

Fluent UI System Icons

Pull request validation

Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent System Icons

Icon List

Direction

Within the metadata.json file for an icon, a property named directionType is used to indicate the direction of the icon. This property can have one of the following values:

The property singleton is also used to indicate the default direction that should be used for the icon.

Installation

Android

The library is published via Maven Central, please ensure that the mavenCentral() repository has been added to the root build.gradle file:

repositories {
    ...
    mavenCentral()
}

Include the following dependency in your project's build.gradle:

implementation 'com.microsoft.design:fluent-system-icons:1.1.341@aar'

For library docs, see android/README.md.

iOS and macOS

CocoaPods

use_frameworks!

pod "FluentIcons", "1.1.341"

Carthage

git "[email protected]:microsoft/fluentui-system-icons.git" "1.1.341"

For library docs, see ios/README.md.

Flutter

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  fluentui_system_icons: ^1.1.341

For library docs, see flutter/README.md.

Plain svg

Inline svg directly. See packages/svg-icons/README.md.

Contributing

Importer

The importer generates the Android and iOS libraries from the icons in the assets directory.

Install dependencies from the repository root (this is a single yarn workspace, so dependencies for every package are installed in one go):

corepack enable
yarn install

Jump into the directory:

cd importer
yarn clean

List all the available commands:

yarn run

Build Pipeline

Our build pipeline runs deploy:android and deploy:ios to create the libraries. The build definitions are located in .github/workflows/.

Demo apps

You can build and run the demo apps following the steps below.

Android

  1. Follow the Importer section above and run the command yarn deploy:android
  2. Open the android directory in Android Studio
  3. Select the sample-showcase in the build configuration dropdown
  4. Click run

Flutter

Prerequisite: Make sure you have flutter configured in Android Studio

  1. Open the flutter directory in Android Studio
  2. Select the example in the directory and open it in Android Studio
  3. Click run

Contact

Please feel free to open a GitHub issue and assign to the following points of contact with questions or requests.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

fluentui-system-icons (microsoft/fluentui-system-icons)

Searching Database…

这是什么?Fluent UI System Icons 是微软开源的一套图标,风格熟悉、友好又现代,以现成的包的形式提供给 Android、iOS/macOS 和 Flutter,另外还提供纯 SVG 文件。
这是一个图标包,还是每个平台各有一个独立的库?图标本身是同一套,但使用时要按平台分别接入:Android 用 Maven 库,iOS 和 macOS 通过 CocoaPods 或 Carthage 安装 pod,Flutter 用 Flutter 包,另外还有原始的 SVG 文件。
怎么把图标加到我的应用里?取决于平台:在 Android 的 build.gradle 里加入依赖(已发布到 Maven Central),iOS/macOS 上用 CocoaPods 或 Carthage 安装 pod,Flutter 中加到 pubspec.yaml,或者直接把 SVG 内嵌到项目里。
这些图标支持从右到左的语言吗?支持,而且每个图标都会声明自己的处理方式:metadata.json 里有一个 directionType 字段,'unique' 表示有专门的 RTL 和 LTR 两套版本,'mirror' 表示直接把图标镜像翻转,另外还有一个 singleton 属性用来设置默认方向。
这些库也支持网页吗,还是只能用于移动端和桌面应用?原生包面向 Android、iOS 和 macOS,Flutter 包能跑在 Flutter 支持的所有平台上;如果不用任何包管理器,你也可以把原始 SVG 内嵌到任何地方,包括网页。
这些图标有哪几种样式?两种变体:regular(常规)和 filled(填充),README 里附有每种样式完整列表的浏览链接。
在把图标加进应用之前,可以先试用吗?可以——仓库里自带演示应用。用 yarn deploy:android 构建 Android 版,在 Android Studio 里运行 sample-showcase,或者直接打开并运行 Flutter 示例。
Android 和 iOS 的库是怎么从图标素材生成的?由一个 yarn-workspace 导入器根据 assets 目录里的图标自动生成,CI 会执行 deploy:android 和 deploy:ios,构建定义位于 .github/workflows/ 目录。
Creator
microsoft
Size
870.4 MB
Stars
10.9K
Updated
CommitOct 09
Age
6y
Commits · 90 Days