使用Office UI fabric react icons显示图标

最新推荐文章于 2025-02-26 14:18:02 发布
最新推荐文章于 2025-02-26 14:18:02 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： SharePoint 研究 SharePoint Framework Office 365开发 文章标签： Office icon spfx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shrenk/article/details/83583815
版权
本文档介绍了如何在项目中使用Office UI Fabric React Icons。通过引入Icon控件并指定iconName属性，可以从一千多种图标中选择需要的图标。同时，可以设置title属性作为tooltip。图标名称和对应的图标可以在icons.json文件中找到。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

使用方法：

1，引入Icon控件：

import{
  Icon
} from 'office-ui-fabric-react';

2, 在UI中添加Icon控件：

<Icon iconName="Add" title="Add" />

其中iconName指定一个图标的名字，目前有一千多种图标可以直接使用，title是指定tooltip。

效果图：

图标的名字可以参考这个图标列表：

https://github.com/OfficeDev/office-ui-fabric-core/blob/master/src/data/icons.json

名字和图标对应如下：

最低0.47元/天 解锁文章
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2497
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
ecw2c理解元数据：使用BigQuery k-means将4,000个堆栈溢出标签聚类
热门推荐
cunehu1722的博客
07-24 6万+
您如何将超过4,000个活动的Stack Overflow标签分组为有意义的组？ 对于无监督学习和k均值聚类来说，这是一项完美的任务-现在您可以在BigQuery中完成所有这些工作。 让我们找出方法。 Visualizing a universe of clustered tags. Felipe Hoffais a Developer Advocate fo...
office-ui-fabric-react, 为 Office 和 Office 365构建组件的反应组件.zip
09-17
office-ui-fabric-react, 为 Office 和 Office 365构建组件的反应组件 的 Office UI fabric 响应基于响应的前端框架，用于构建 Office 和 Office 365的经验。 fabric 响应是一个响应性的。移动的第一系列健壮组件，旨在使你能够使用 Office 设计语言快速而简单地
fabric-icons
03-18
织物图标 从导入的Fabric图标集。 请注意，该存储库中的图标永远都不要直接使用，因为它们没有经过优化。 更新图标 绝对不要在此存储库中手动添加或编辑图标，因为真相的来源在。 Figma访问令牌 如果您是首次运行导入脚本，它将提示您输入。需要令牌才能访问Figma的API。它可以在您的Figma帐户设置页面上生成。 导入脚本可能会将令牌存储到本地文件，因此您无需在后续运行中再次提供令牌。 导入脚本 要更新图标，请运行以下脚本。如果它具有有效的Figma访问令牌（请参见上文），它将继续将所有图标下载为SVG文件。 ./scripts/figma-import.js 本地预览 您可以打开图标的本地预览。使用它来验证图标的外观是否正确。运行以下命令。 npm run start 出版 如果一切看起来正确，请发布更改。 npm publish git push --follow-tags
iconfont和TTF
最新发布
李奶酪的博客
02-26 684
在 React Native 中，我们可以使用第三方库（如 react-native-vector-icons）来轻松使用图标。是一种通过字体文件（如 TTF、OTF 格式）来展示图标的技术，主要优点是图标的可缩放性和样式的灵活性。：通过第三方库（如 react-native-vector-icons）使用 IconFont 图标。：谷歌推出的图标库，可以通过类似的方式在 Web、React 和 React Native 中使用。在 React 中，可以通过 react-icons 或自己集成的。
探索Office UI Fabric React：构建专业级企业应用的新工具
gitblog_00037的博客
04-10 412
探索Office UI Fabric React：构建专业级企业应用的新工具 去发现同类优质开源项目:https://gitcode.com/ 是一个开源的UI组件库，由Microsoft Office团队开发并维护，专为构建现代Web应用而设计，尤其是针对企业级的生产力软件。它提供了丰富、响应式的React组件，遵循一致的设计原则和风格，帮助开发者快速构建符合微软 Fluent Design S...
前端响应式框架OfficeUIFabric.zip
07-18
Office UI Fabric 是一个移动优先、专为开发人员而打造的响应式框架，旨在帮助其通过早已熟悉的Office设计语言来创建基于web的体验。该项目自诩可以非常简单地打造一个全新的插件，或者为现有的附加组件加入新功能。微软还指出，用户可以通过简单的 CSS 样式来变更应用程序的界面（比如排版、颜色、甚至动画），以使其和其它 Office 套件相处得更加融洽。其实该框架此前已被用于微软自家 Office 365 等诸多产品，不过新项目还带来了事无巨细的 Office UX Design Guidelines（用户体验设计指南）。控制方面，微软一直在部署可用于 Office Add-ins、SharePoint Add-ins、甚至单独网站的新功能。比如 Office UI Fabric 中的 Detailed Persona Card 就可以在转换后成为一个绑定的控件。介绍来自 cnBeta.com 标签：Office  CSS框架
vue在线预览word远程文件
04-28
import { DocumentCard, DocumentCardPreview, DocumentCardTitle, DocumentCardActivity } from 'office-ui-fabric-react/lib/DocumentCard'; ``` 3. 在Vue组件中创建一个函数来加载Word文件并使用Office Web ...
vue3 ts在线预览word与excel
05-26
npm install --save office-ui-fabric-core@11.0.0 office-ui-fabric-react@7.0.0 office-ui-fabric-js@1.4.0 ``` 2. 引入相关的模块： ``` import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; import ...
react-基于React的前端框架用于构建Office和Office365的UI体验
08-14
基于React的前端框架，用于构建Office和Office 365的UI体验
我们已经搬家了！ UI Fabric现在是Fluent UI-一组用于构建Microsoft Web体验的React组件。-React开发
05-27
Office Office UI Fabric React项目已演变为Fluent UI。 :party_popper:office-ui-fabric-react仓库已移动！ 这不应破坏任何当前的Fabric使用，回购克隆，拉取请求或问题报告。 链接应重排:party_popper:Office UI Fabric React项目已发展为Fluent UI。 office office-ui-fabric-react仓库已移动！ 这不应破坏任何当前的Fabric使用，回购克隆，拉取请求或问题报告。 链接应重定向到新位置。 我们有很多Fluent UI商店-请在此处阅读我们的公告。 Fluent UI React基于React的前端框架，用于构建Web体验。 Fluent UI React是基于React的强大组件的集合，旨在使其易于使用
office-ui-fabric-vue:Vue.js的Office UI Fabric实现
05-02
Office UI Fabric Vue 注意：由于不再支持，因此需要使用重写此项目。 但是有很多工作，我现在没有太多时间在这个项目上。 因此，该项目将不再受支持。 如果有人想在这个项目上与我合作编写新版本，请与我联系。 介绍 Vue.js的Office UI Fabric实现，使用构建 依存关系 vue.js 2.2.0+ 安装 $ yarn add office-ui-fabric-vue // or $ npm install office-ui-fabric-vue 用法 import Vue from 'vue' import OfficeUIFabricVue from 'office-ui-fabric-vue' ; // import css style import 'office-ui-fabric-vue/dist/index.css'
office-ui-fabric-core：用于构建Office和Office 365体验的前端CSS框架
02-27
用于构建Office和Office 365体验的前端框架。 Fabric是一种响应式的，移动优先的样式和工具集合，旨在使您可以快速，轻松地使用Office设计语言创建Web体验。 最新版本： 11.0.0 内容 包含什么 该存储库包含在Fabric的各个方面使用的核心样式，包括图标，类型，字体，颜色，网格等。这是与分离的项目，后者包含React组件。 开始吧 为了快速入门，请从CDN引用Fabric的最新版本，或将副本添加到您的项目中。 请参阅在上最常见的方式全部细节开始使用与所包含内容的说明的核心。 如果您想通过包管理器（例如Bower，npm或NuGet）获取Fabric，请查看 。 是否要为您的项目定制Fabric？ 请参阅以了解构建过程。 了解更多 面料新手？ 从开始，以了解其目的并探索的全套样式和组件。 准备好使用Fabric创建Office加载项时，请参阅。 贡献面料
OfficeCustomUIEditor
11-07
Office 2010 Ribbon 开发 用VBA开发时，用这个软件更容易修改内置的XML文件 参见《RibbonX.for.Dummies.pdf》
fabric ui vue_Vue.js的Office UI Fabric实现
cuk5340的博客
07-23 1052
fabric ui vue Office UI Fabric Vue (Office UI Fabric Vue) Office UI Fabric implementation for Vue.js, build with office-ui-fabric-js Vue.js的Office UI Fabric实现，使用office-ui-fabric-js构建 View demo 查看演示 ...
微软 web rdlc 复杂表格_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...
weixin_35680189的博客
01-18 317
介绍Fabric UI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fabric React是一组强大的基于React的组件，旨在能够使用Office设计语言轻松创建一致的Web体验。Fabric Android最新的控件是使用Kotlin构建的，并且与Java完全兼容，Fabric iOS最新的控件是使用Swift构建的，并且与O...
Office UI Fabric Core 使用指南
gitblog_00969的博客
10-10 1170
Office UI Fabric Core 使用指南 office-ui-fabric-core The front-end CSS framework for building experiences for Office and Microsoft 365. ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值