文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗？
是的
没有找到

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

软件介绍 Fluent UI System Icons 是由 Microsoft 开发的一个开源软件，它提供了一套丰富多样的系统图标，用于在应用程序和网站中使用。...功能特点 1.丰富的系统图标库: Fluent UI System Icons 提供了超过 3000 个不同的系统图标，覆盖了多个应用场景和功能领域，包括常见的文件、设备、工具、人物、通信等等。...3.矢量格式支持: Fluent UI System Icons 提供图标的矢量格式，例如 SVG 和 TypeScript。这意味着图标可以在不同的分辨率和尺寸下无损放大或缩小，以适应各种屏幕大小。...同时，开发者还可以方便地对图标进行自定义，以满足自己应用程序的特定需求。...4.易于集成和使用: Fluent UI System Icons 可以与各种 Web 和桌面应用程序开发框架无缝集成，例如 React、Vue、Angular 等等。

29410

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

文章目录 一、FlutterIcon 下载图标 二、自定义 svg 图标生成 ttf 字体文件 三、使用下载的 ttf 图标文件 四、完整代码示例 五、相关资源 一、FlutterIcon 下载图标 -...10 个图标 , 然后点击右上角的 DOWNLOAD 按钮 , 该网站会在后台将这 10 个图标的 SVG 文件打包到 ttf 文件中 , 下载的文件是 flutter-icons-5b92b65c.zip...svg 图标生成 ttf 字体文件 ---- https://www.fluttericon.com/ 中 , 将 SVG 格式的图标拖动到该地址页面的 Custom Icons 区域 , 拖动过程...: 拖动完成后 , 页面中的 Custom Icons 区域会显示这 20 个 SVG 图标 ; 选中这些图标 , 点击 DOWNLOAD 按钮 , 即可下载生成的 ttf 格式的文件 ;...: 图标绘制方向 , 是否按照 svg 文件中的方向绘制 ; 代码中使用 IconData 加载自定义图标 , 3D图标对应的编码是 0xe855 ; Center( // 加载自定义图标

2.1K20

开源 UI 组件库：实现高性能界面设计 | 开源专题 No.65

该库中的某些组件是对微软官方 Fluent UI Web Components 的包装器。其他则是利用 Fluent Design System 或使其更容易与 Fluent UI 合作的组件。...主要功能和核心优势包括： 提供简单、直接且灵活地创建具有流畅 UI 设计风格界面 包含 dotnet 模板以及手动安装两种方式来快速开始使用 可扩展性强大，并支持图标和表情符号等额外资源 基于 FAST...SVG、字体和 CSS 工具包，被数百万设计师、开发者和内容创作者使用。...以下是该项目的核心优势： 提供了丰富多样的图标库，可以满足各种不同需求。 可以通过简单易用的 API 在网页中快速集成这些图标。 支持自定义颜色、大小等属性，使得图标能够与页面风格完美匹配。...React UI 库。

12410

在 React 中使用 Storybook，构建强大的自定义 UI 组件

虽然像React这样的基于组件的UI库简化了web开发，但它们也引入了测试和调试等新的复杂性。...React组件是为了支持多个用例而构建的，并且通常是相互依赖的，这意味着如果你走错了弯路，你就有可能破坏应用程序。 Storybook使开发人员能够使用独立的构建块独立地构建UI组件。...使用Storybook，您可以使用您最喜欢的框架快速创建UI组件，同时还提供一个整洁的接口来处理每个组件。 Storybook是UI组件的开发环境，它允许您在主应用程序之外的环境中创建和展示组件。...此外，组件使您能够使用可互换的部分并在不影响应用程序的业务逻辑的情况下交换它们，从而允许您将组件拆开，并根据需要将它们重新组合到不同的ui中。...在 React APP 中使用 story 要在React应用中使用这个故事，我们可以导入创建好的Banner。在你的Next.js安装中，把jsx文件放到index.js文件夹中。

8.9K10

字节跳动官方出品，超级好用还能自定义

主要以单色的图标为主 在日渐繁荣（要求越来越高）的UI设计领域，往往需要多色甚至是彩色的图标来完成设计。...IconPark解决方案 IconPark 的出现几乎把上面这些问题都解决了，能满足很大一部分的互联网项目需求。 图标数量多，质量高，支持很高程度的自定义和多色彩主题，二次修改非常方便。...关于 IconPark IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库； 可以实现根据单一SVG源文件变换出多种主题； 具备丰富的分类、更轻量的代码和更灵活的使用场景； 致力于构建高质量...优势 提供超过2400+高质量图标，分门别类，免费使用~ 支持4种主题和在线换肤：线性、填充、双色、四色风格 简单便捷的自定义设置框 看我72变 支持多种便捷操作：复制SVG源码、复制React...图标组件、复制Vue图标组件、下载PNG、下载SVG 针对技术同学，支持图标组件代码包导出， 包括React Icons、Vue3 Icons 、 SVG Icons //React组件 <Config

44610

11个React Native 组件库和 Javascript 数据可视化库

超过 10k stars 的库是 React Native 的一组可自定义图标，支持NNavBar/TabBar/ToolbarAndroid,，图像源和完整样式。...不出所料，它非常有用，并被数千个应用程序以及其他UI组件库（如react-native-paper）使用。 该库提供了开箱即用的预制捆绑图标集，以下是库中所有图标的完整示例。 11....超过 80k 的 star的 D3.js 可能是最流行和最广泛的 Javascript 数据可视化库。D3 用于基于数据操纵文档，并使用 HTML、SVG 和 CSS 实现数据。...Recharts 是一个使用 React 和 D3 构建的图表库，支持声明式 React 组件方式。该库提供了原生 SVG 支持，轻量级依赖树(D3子模块)通过组件 props 高度可定制。...8k stars 的 C3js 是一个基于 D3 的可重复使用的图表库，用于Web应用程序。 该库为每个元素提供类，因此你可以通过类定义自定义样式，并通过 D3 直接扩展结构。

11.4K11

开源 UI 组件库和开发工具库概览 | 开源专题 No.59

为 Web 应用程序设计的企业级 UI。 提供一套高质量的开箱即用的 React 组件。 使用可预测静态类型编写 TypeScript 代码。 包含完整的设计资源和开发工具包。...microsoft/fluentui[2] Stars: 16.7k License: NOASSERTION Fluent UI Web 是一个用于构建 Web 应用程序的实用工具、React 组件和...主要特点： 提供了一套全新、面向未来并富有前瞻性的 React 组件 支持渐进式迁移至最新版 (FluentUI V9) 包含对老版本 (如 V8) 已经广泛使用过程中积累下来的较为完善且稳定可靠等的功能...它具有以下核心优势和主要功能： 可定制性：使用 SASS/SCSS 进行广泛自定义，并提供默认配置和蓝图。 响应式布局：Vuetify 组件的默认配置是响应式的，可以适应不同屏幕尺寸。...它不依赖于操作系统，基于 Web，并使用开放标准 (SVG)。 为跨领域团队而生：专注于设计和代码团队，提供无需频繁交接工作的愉快体验。

22910

Ant Design 是怎么管 Icon 的？

Ant Design 的 Icon 使用的是 SVG 格式图标； —— 《antd 官网》 注：为什么选 SVG 而不是 IconFont https://blog.github.com/2016-02...自行引入 SVG 图标 标签也可以通过 component 引入自定义的 SVG React 组件； 注：svgr 可以完成 svg 文件到 react 组件的转换； 4....用途、目录结构 储存着所有 svg 图标； 优化、压缩 svg 图标（使用 SVGO）； 转换 svg 图标为 IconDefinition； 导出所有 svg 图标的 IconDefition； 6.2...type 和 theme 直接使用预定义的图标； 提供 createFromIconfontCN 接口，加载定义于 IconfontCN 中使用 svg symbol 技术打包的 svg 图标； 提供...component 接口，以便引入自定义的 React 组件（例如通过 svgr 转换 svg 得到的 React 组件）； 8.2.

4.5K30

TailwindCSS 资源推荐

Headless UI 官方维护的组件库，支持 React 和 Vue，在官网可以直接看到效果，可以直接拷贝代码，可以说非常好用，缺点就是组件太少。...Heroicons 官方维护的图标库，24*24 标准大小，可以一键拷贝 JSX 和 SVG，非常好用，缺点就是目前只有 230 个图标，不过我们优先可以从这里复制，没有再去 iconfont 上找...Vue-tailwind Vue.js UI 组件库，提供比较丰富的组件，可以从网站上看到组件 UI 是有哪些原子类样式组成， 并且组件可以自定义设置样式。...Vechai ui React.js UI 组件库，内置暗黑模式，提供比较丰富的组件，可以从网站上看到组件 UI 是有哪些原子类样式组成， 并且组件可以自定义设置样式。...补充 daisyui 基于 tailwind css 但是你的html 可以不那么臃肿，只需要 使用btn card 这些样式，就可以生成组件样式，并且样式支持高度自定义和多皮肤

1.6K20

更加优雅的使用Icon

），文中着重描述的就是 SVG Icon 并且提供了一种较为优雅的 SVG Icon 使用方式，我们来回顾下这种方式：在开发环境将自定义的 Icon 抽离成一个单独的模块，使用 svgLoader 去解析...，只有迫不得已才会使用自定义的图标，也就是上面那种 SVG Icon，这样就导致了一个项目中同时存在字体图标和 SVG 图标两种使用方式，当然这也不是大问题。...没有办法，该升级还得升级，那就改吧，改完了之后问题就出现了，如果我们还使用之前的 去加载自定义的图标，那就出现了一种尴尬的情况，同是 SVG 图标，同一个项目，两种使用方式。。。...自定义 SVG 图标 最后就是我们自定义的图标了，虽然 iconify 提供了超级多的图标库，ElementPlus 里也有一些，但有时候 UI 设计师总是不按套路出牌，非得自己设计，，，当然，这也没有问题...其他解析器 // 自定义xx-ui解析器 (name) => { // name为项目编译时加载到的自定义组件，String类型大驼峰格式的组件名 // 例如：name

5.6K30

从零搭建react与ts组件库（二）less模块化与svg引入配置

为了讲解如何进行less模块化配置以及如何引入svg作为组件库的一部分，我们设想这样一个需求：一个搜索输入框，左侧是一个svg的icon搜索图标，右侧是输入框。...UI结构来说，我们可以使用一个div作为整体包裹，然后左侧是图标的区域（使用一个div），右侧是输入框（input）。...后打开样例界面，可以看到如下效果： svg引入配置 实际上，react中想要使用svg有这很多种方式，像是直接编写react组件，并返回svg代码： import * as React from "...将svg作为react组件来使用 我们知道，对于webpack来说，可以将一切的东西都是为模块，对于任何import进来的，webpack都可以通过匹配的规则（rules）调用对应的loader来进行处理...那么，是否存在这样一种方式： import IconSearch from 'path/to/search.svg' // IconSearch是一个React组件，可以在其他组件中使用 个人最常使用的方案是

43530

Iconfont 还是不能上传，如何维护你的 Icon？

使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn...最终方案：使用 svg 代替 iconfont 使用 svg 的优势 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。...svg 可以支持动画 目前流行的组件库已经都使用了 svg 代理字体图标，比如 ant-design、Material-UI 等 将引用的 iconfont 转变为本地 svg 我们可以手动一个一个从...svg 转为 React Component 在 webpack 中我们可以使用一个 叫 svgr 的 loader，它可以将 SVG 转换为一个随时可用的 React 组件。...你可以将 SVG 文件放在 src/文件夹中的任何位置，并将它们作为 React 组件导入使用。

1.3K30

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form

组件分享之前端组件——用于从 JSON Schema 构建 Web 表单的 React 组件react-jsonschema-form 背景 近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下...组件react-jsonschema-form，它能够使用JSON Schema以声明方式构建和自定义 Web 表单。...image.png 它支持很多种主题，详见下方 Ant Design Bootstrap 3 Bootstrap 4 Fluent UI Material UI 4 Material UI 5 Semantic...UI Chakra UI 具体使用方式如下： 1、安装 npm install @rjsf/core --save 2、导入依赖使用 import Form from "@rjsf/core"; 作为...CDN提供的脚本 更多使用方式可以查看其官网提供的各个组件详细使用说明

5.1K30

React组件设计实践总结03 - 样式的管理

转换 svg 图标 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性的组件 3....不管对于 UI 设计还是客户端开发, 设计规范可以提高团队工作效率, 减少沟通成本. styled-components 的 Theme 使用的是React Context API, 官方文档有详尽的描述...而 CSS 方案, 对于大型应用要做到有组织有纪律和规划化, 需要花费较大的精力, 尤其是团队成员能力不均情况下, 很容易失控 ---- 7️⃣ 使用 svgr 转换 svg 图标 如今 CSS-Image-Sprite...而在 React 生态中使用svgr更加方便, 它可以将 svg 文件转换为 React 组件, 也就是一个普通的 JS 模块, 它有以下优势: 转换为普通 JS 文件, 方便代码分割和异步加载 相比...了解更多 antd 3.9 之后使用 svg 图标代替了 font 图标 对比SVG vs Image, SVG vs Iconfont ---- 8️⃣ 结合使用 rem 和 em 等相对单位

7.1K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券