首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >5K Star大厂微软开源的图标集合,丰富、精致、统一

5K Star大厂微软开源的图标集合,丰富、精致、统一

作者头像
开源日记
发布2023-11-01 20:09:56
发布2023-11-01 20:09:56
66300
代码可运行
举报
文章被收录于专栏:JVMGCJVMGC
运行总次数:0
代码可运行

软件介绍

Fluent UI System Icons 是由 Microsoft 开发的一个开源软件,它提供了一套丰富多样的系统图标,用于在应用程序和网站中使用。这些图标遵循 Fluent Design System 的设计原则,可用于增强用户界面的可视效果和交互性。

功能特点

  • 1.丰富的系统图标库: Fluent UI System Icons 提供了超过 3000 个不同的系统图标,覆盖了多个应用场景和功能领域,包括常见的文件、设备、工具、人物、通信等等。这些图标旨在为开发者和设计师提供一个广泛选择的库,以满足各种用户界面设计需求。
  • 2.标准化的设计风格: 所有图标都遵循 Fluent Design System 的设计准则,具有现代、简洁、平面和易于识别的特点。这种风格可以使应用程序和网站更加统一和易于使用,使用户在不同的平台和设备上都能够快速理解图标的意义。
  • 3.矢量格式支持: Fluent UI System Icons 提供图标的矢量格式,例如 SVG 和 TypeScript。这意味着图标可以在不同的分辨率和尺寸下无损放大或缩小,以适应各种屏幕大小。同时,开发者还可以方便地对图标进行自定义,以满足自己应用程序的特定需求。
  • 4.易于集成和使用: Fluent UI System Icons 可以与各种 Web 和桌面应用程序开发框架无缝集成,例如 React、Vue、Angular 等等。该软件提供了一套简洁的 API 和文档,使开发者能够快速上手并将图标集成到自己的项目中。同时,具有友好的命名规范,可以轻松地按名称搜索和使用所需图标。

使用步骤

  • 1.首先,确保你的开发环境具备支持该软件的要求,例如 Node.js 和相关的开发工具。
  • 2.在你的项目中添加 Fluent UI System Icons 的依赖,可以通过 npm 或者 yarn 进行安装。
代码语言:javascript
代码运行次数:0
运行
复制
npm install @fluentui/system-icons

或者

代码语言:javascript
代码运行次数:0
运行
复制
yarn add @fluentui/system-icons
  • 3.在你的代码中引入所需的图标库。
代码语言:javascript
代码运行次数:0
运行
复制
import { AddIcon, DeleteIcon, SaveIcon } from '@fluentui/system-icons';
  • 4.使用这些图标在你的应用程序或者网站中。
代码语言:javascript
代码运行次数:0
运行
复制
<button>
  <AddIcon /> Add
</button>

<button>
  <DeleteIcon /> Delete
</button>

<button>
  <SaveIcon /> Save
</button>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-10-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 开源日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 软件介绍
  • 功能特点
  • 使用步骤
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档