开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么这些图标没有出现在我的Ant Design侧板上？

Ant Design 是一款流行的前端 UI 框架，提供了丰富的组件和样式，用于构建美观和易用的用户界面。Ant Design 的侧边栏（Side Menu）是其中一个常用的组件，用于展示导航菜单和图标。

如果在 Ant Design 的侧边栏中没有看到某些图标，可能有以下几个原因：

缺少依赖：Ant Design 的图标是基于 Ant Design Icons 这个独立的图标库实现的。因此，如果没有正确引入 Ant Design Icons 的依赖，就无法在侧边栏中使用相应的图标。你可以通过在项目中安装并引入 @ant-design/icons 包来解决这个问题。
版本不匹配：Ant Design Icons 和 Ant Design 框架是相互独立的，它们的版本可能不一致。如果你使用的是较旧的版本，可能会导致一些图标无法显示在侧边栏中。建议确保 Ant Design Icons 和 Ant Design 的版本兼容性。
图标名称错误：Ant Design Icons 提供了大量的图标，每个图标都有一个唯一的名称。在使用侧边栏组件时，需要使用正确的图标名称来显示相应的图标。你可以查阅 Ant Design Icons 的文档，找到正确的图标名称并在侧边栏中使用。
自定义配置问题：Ant Design 的侧边栏组件支持自定义配置，包括图标的位置、样式等。如果你对侧边栏进行了自定义配置，可能会导致某些图标无法显示。请检查你的自定义配置是否正确，并确保没有覆盖了图标的默认设置。

总结：如果在 Ant Design 的侧边栏中没有看到某些图标，可能是缺少依赖、版本不匹配、图标名称错误或自定义配置问题导致的。你可以根据以上的解决方案逐一排查，并确保正确引入依赖、使用正确的图标名称，并检查自定义配置是否正确。如果问题仍然存在，建议查阅 Ant Design 的官方文档或寻求相关技术支持。

相关搜索:为什么我的2D UIViews没有出现在屏幕上？为什么我的blazor webassembly只在chrome上有可安装的图标/弹出窗口，而在opera或firefox上却没有为什么我的span元素没有出现在我的页眉上？为什么我的图标没有出现在桌面或任务栏上？为什么我的导航栏图标没有出现在我的网站上？为什么我的收藏图标没有出现在谷歌搜索结果中为什么这个图像没有出现在我的画布上？为什么这些白色接缝出现在我的AFrame网格上？在swiftUI中首次出现在屏幕上时，我的视图为什么没有过渡如果我还没有打开键盘，为什么我的键盘只出现在TextInput.focus()上？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

字节B端设计规范ArcoDesign和AntDesign有何不同？

原文也说“Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到「更好」。”，可见 Ant Design 在布局上比 Arco Design 更灵活。...Arco DesignAnt Design关于 B 端导航的问题，我之前发文分析过：B端产品一级导航为什么大多在左侧？...这主要体现在浅灰色的运用。以顶导航为例，Arco Design 的图标都用浅灰圆框包起来了，而 Ant Design 的图表都是简单的线条。...但是前者会用卡片将分组隔离开，而 Ant Design 的分组都在一页上。...Arco DesignAnt Design可是我在 Arco Design 文档的导航栏找了很久都没有找到图表，于是只好动用搜索功能，结果……一定是我打开方式不对，案例上的渐变曲线图不错，让我直接搜“曲线图

1.6K2 0

B端常用9大开源组件库集合（必备收藏）

虽然其设计团队不如Ant Design大，也没有那么多的设计理论来支撑，但这些都没关系，Element提供的能力足以支撑目前B端界面设计与开发的需求。...图片Ant Design我想大家都不陌生，可以说在设计圈应该是响当当的。蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。...Ant Design，林林总总有这些能力：2016年，Ant Design1.0发布，包含中后台基础组件库及移动端基础组件库，且配套设计语言；2017年，AntV数据可视化解决方案发布，语雀知识库发布；...设计体系配置平台及智能代码生成功能；拥有图标平台、色彩算法、物料平台等生态产品，全方位助力产品侧设计出体验好的产品。...而一些React技术栈的公司，就会选择Ant Design。

2.1K2 0

基于 Vue 的前端架构，我做了这 15 点

因为公司团队跟倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 只有我自己喜欢这种风格。...干掉无用的图标 Ant Design Vue 把所有的 Icon 一次性引入（不管你因用了多少个组件），这使得体积打包后图标所占的体积竟然有几百 kb 之多。...这些图标大多数不会被设计师所采纳，所以部分图标都应该被干掉：创建一个 icons.js 来管理 Ant Design Vue 图标，这里以一个 Loading 图标为例： // @/src/assets...在 @ant-design/icons/lib 目录下有三种风格的图标，分别是 fill、outline、twotone，这里面内部的文件并不是 svg 格式，而是 js 和 ts 格式，这就是为什么我们可以这么引入图标的关键所在了...9.组件库对于很多第三方的工具，我坚持认为二次封装成 vue 插件并没有多少开发成本，反而让你在后续的开发中变得很灵活。

2.8K4 2

基于Vue的前端架构，我做了这15点

因为公司团队跟倾向于使用 scss 开发，less 是为了覆盖 ant design vue 的样式，stylus 只有我自己喜欢这种风格。...干掉无用的图标 Ant Design Vue 把所有的 Icon 一次性引入（不管你因用了多少个组件），这使得体积打包后图标所占的体积竟然有几百 kb 之多。...这些图标大多数不会被设计师所采纳，所以部分图标都应该被干掉：创建一个 icons.js 来管理 Ant Design Vue 图标，这里以一个 Loading 图标为例： // @/src/assets...在 @ant-design/icons/lib 目录下有三种风格的图标，分别是 fill、outline、twotone，这里面内部的文件并不是 svg 格式，而是 js 和 ts 格式，这就是为什么我们可以这么引入图标的关键所在了...9.组件库对于很多第三方的工具，我坚持认为二次封装成 vue 插件并没有多少开发成本，反而让你在后续的开发中变得很灵活。

2.6K2 0

有了这 18 个免费的React模板以后，也太省事了吧！！

React Blur admin 可用于在 React 应用程序上构建管理界面。...React JS Landing 是一个为初创公司、公司和数字代理商提供的单页浏览登陆模板。它有丰富的图标，画廊，定制的表单，等等。五、Blueprint Go to Blueprint ?...MatX 是一个全功能的反应材料设计管理仪表板模板建立的反应，Redux 和材料用户界面。...Notus React 是一个免费的开源模板。它是 TailwinCSS 的一个扩展，但是没有改变或添加任何 CSS 到已经从 Tailwind CSS。...十七、Ant Design Go to Ant Design ? Ant Design 是一个 React UI 库，它有大量易于使用的组件，这些组件对构建优雅的用户界面非常有用。

12.2K1 0

我用了多年的前端框架，强烈推荐！

大家好，我是鱼皮，今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— Ant Design Pro。什么是 Ant Design Pro？...它提供了丰富的界面组件、图标、布局和样式，用于构建现代化的 Web 应用程序。Ant Design 遵循一套统一的设计规范，提供一致性的用户体验。...为什么用 Ant Design Pro？从定位上来说，Ant Design Pro 是一个开箱即用的中后台前端开发框架，能够帮助我们快速开发大多数网站（尤其是管理系统）。...而作为一名全栈开发者，鱼皮个人喜欢使用 Ant Design 和 Ant Design Pro 全家桶的重要原因是：Ant Design 同时有 Vue 和 React 的实现版本，无论我选择什么前端框架开发项目...先去看最新官方文档上的命令和用法，或者切换文档版本为和视频一致。如果还有报错，那么就把错误信息贴到百度去查询。

4932 0

微前端x重构实践落地总结

因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。...还记得我刚说主应用和子应用都用了 ant-design 么？...ant-design 的 Modal、PopoverDrawer 的实现方式就是要挂在到 document.body 上的，这么一隔离，它们一挂在整个元素起飞了。...ant-design 样式冲突 ant-design 提供了一个非常好的类名前缀功能：用 prefixCls 来做样式隔离，我自然也用上了： // 自定义前缀 const prefixCls = 'cmsAnt...但是不知道为什么，在 less 文件中改了 ant-prefix 变量后，ant-design-pro 的样式还是老样子，有的组件样式改变了，有的没变化。

1K2 0

Ant-Design-Vue 3.x 图标库如何实现自动引入？

需求来源 Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。 1..../icons-vue'; zh 在这种形式下，每个要用到的图标都需要手动引用一次，并且由于每个组件没有统一标准的名称，所以无法使用打包工具提供的一些自动引入组件的插件（比如vite的unplugin-vue-components...2.实现首先引入@ant-design/icons-vue整个图标库，然后Jsx组件内，通过渲染函数直接渲染指定的图标；基础代码如下： import {h} from 'vue' import...* as $icon from '@ant-design/icons-vue'; /* * 自动引入antd icon图标 * */ export default { props:['icon'.../icons-vue图标很全，但也有不够用的时候，这时候就可以考虑，让这个JSX组件兼容 iconfont图标了；众所周知，阿里巴巴图标库一般都是统一class前缀，@ant-design/icons-vue

1.8K2 0

BlazorCharts 原生图表库的建设历程

以下文章来源于MSReactor ，作者陈超超背景目前 Blazor 中可用的图表组件库主要有以下几个： ant-design-blazor/ant-design-charts-blazor -...，我以ant-design-charts-blazor举例大致逻辑如下：首先通过IJSRuntime接口与自己开发的own.js进行交互 own.js中对图表库的api做了简单封装，主要目的是减少....razor与G2Plot的交互，毕竟IJSRuntime接口调用js对象没有js之间直接相互调用方便 G2Plot会在Canvas中绘制出图表图表中的一些事件通过own.js进行捕捉后通过IJSRuntime...反馈给.razor ant-design-charts-blazo r的技术实现方式，可详见我之前的文章《用Blazor技术封装G2Plot实现Charts组件》(https://zhuanlan.zhihu.com...缝合怪”作为我的图标接着，再确定我们组件的一些基本理念，我今后的设计尽我所能满足这些理念。

1.3K1 0

接到“网站动态换主题”的需求，我是如何踩坑的

设计部门的同事让我们可以参考Ant Design色板生成算法演进之路后面我们动态计算色板也是采用了目前 Ant Design 的算法， @ant-design/colors 但是切换主题的方式，经验证并不能很完美的适用于我们微前端项目...设计标准以上色系变量表是我们本次最终需要的全部变量其中每种色系分为两种，h开头的和a开头的，a开头的通过调整透明度来生成，h 开头的一组由 base 色通过ant-design 的动态计算生成...计算为色系变量值是通过js产出一个数组，想要导入到一个less文件中，再引入使用，想要动态切换的话，需要用到 less的modifyVars方法，也是Ant Design 官方提供的方式，接着我们尝试...在网页的运行时，客户端部分下载此css文件，然后将颜色动态替换为新的自定义颜色，能够满足更灵活丰富的功能场景，性能出色。 2、@ant-design/colors 来动态计算出品牌色系和功能色系。...色系通过提供的基准色，自动计算及输出的颜色集合：通过计算就可以输出整个色系数组如下：需要设置颜色的地方就可以直接使用定义的这些变量，需要切换主题或者颜色的时候，传入主题模式、品牌色重新计算，

1.4K3 0

React实战：使用Vite+TS+Antd构建React项目

前言由于我之前学过React框架，但是由于工作中没有使用它，所以我最近开始使用了Vite、TypeScript、React Router，Redux,Axios，Ant Design和SpringBoot...通过这个项目，我将分享如何使用Vite、TypeScript、React Router和Ant Design来搭建一个博客项目，并不断分享我所遇到的问题，以及如何解决它。...6.使用Ant Design现在，我们已经安装了Ant Design，可以开始使用Ant Design来构建我们的UI界面了。...我们还使用了Ant Design的图标组件来为菜单项添加图标。...我们了解了这些工具和库的特点和用途，并且演示了如何使用这些工具和库来构建一个现代化的React应用程序。

1.8K5 2

学爬虫，吃牢饭，卑微前端小丑复制antd的icon图标真的太难啦，我用python几秒扒完

目标需求最近用react+vite+antd写了个后管项目，在菜单管理中，需要用户选择菜单的icon图标。...antd of react的用法： import { Button } from 'antd'; import { StepBackwardOutlined } from '@ant-design/icons...主要写的还是react18，antd5.0的，全都是最新的，妈的痛恨蚂蚁，为什么要改成这个样子，因为好久之前的版本都不需要导入。...import requests from bs4 import BeautifulSoup def getIcon(): #请求antd UI库 url = 'https://4x.ant.design...i in span: print(i.text+",") getIcon() 运行结果：他有5个Ul标签，毕竟五个类型的图标嘛，我是直接下标，一个一个获取的。

5344 0

Ant Design 4.0 正式版来了！

中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。此外，我们对阴影进行了调整，使其更符合真实阴影，也同时将信息层级更好体现。 ?...因而我们提供了一种新的无边框样式，让开发者可以更简单的嵌入这些组件而不用额外覆盖样式。 ? 兼容性调整 Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。...更小的尺寸在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。...是你们为开源的贡献让 Ant Design 变得更加美好！

3.2K3 0

从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载

这里去掉不常用和没用到的全局引入，改为页面内import()引入 ⚡优化Ant-design-icon体积内容（点击展开/收起）这一部分，由于我们在项目中只使用了几个Ant内置图标，不可能有530+...重定向到本地来控制这个问题，在React版的Ant-Design是已经是做了处理的了（写法上有所调整），但在Ant-Design-Vue-1.x中仍然没有官方解决方案。...这个问题，在React版的Ant-Design又已经是做了处理的了，允许用户选择dayjs或moment。同样的，Ant-Design-Vue仍没有跟进......所幸，dayjs作者提供了一个插件，可以将Ant-Design-Vue的moment替换成dayjs 虽然文档中只说Ant-Design-React可以用，但实际上在issue可以看到它也适用于antdV...参考 2018 前端性能优化清单[6] 我是如何让公司后台管理系统焕然一新的\(上\)-性能优化[7] ...

2.4K1 0

9个值得推荐的 VUE3 UI 框架

Ant Design Vue Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...Ant Design Vue 在 GitHub 上拥有 15k+ 颗星，每周下载量为 49k，数据已经说明了它的受欢迎程度。...BalmUI BalmUI 已经发布了他们的 9.0 版本了，该版本支持Vue3。Balm 基于谷歌的 Material Design，这就是为什么它看起来很熟悉。...现在，Naive UI 在不到三个月的时间里就在 GitHub 上获得了5.1k 颗星。它提供了70多个制作精良的组件，这些组件可以无缝地融入几乎任何类型的 Vue3应用。

4.6K3 0

Ant Design 按钮和图标的使用

Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd...dashed ：与default不同的是边框为虚线 text：文本黑色，没有背景。 link：文本蓝色，没有背景。...需要讲ghost写出属性,幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。也可和其它的类型一起使用。...danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。...这也就是图标的使用图标的使用请看另一篇文章 SearchOutlined是搜索的图标 import { SearchOutlined } from '@ant-design/icons';

2.4K3 0

三分钟迁移 antd@4

在咨询了豆酱老师得到了api 不会修改的承诺之后，我已经在自己的项目中迁移完成。第一时间享受到了的 antd@4 各种优势。 ?...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src # 或者全局安装 # 使用 npm npm i -g @ant-design...为了更加的语义化，icon 将从 i 标签修改为 span 标签，改完之后需要记得去查看一下有没有类似 i{}，i.anticon 等用法，如果有可以修改为 span{}, span.antion 来保证迁移完成的样式问题...Pro中使用 Pro 在第一时间也迁移了 antd@4 ，我们只需要在 create umi 中选择 ant-design-pro，即可获得最新的 4.0 分支代码。...由于 4.0 的 icon 有一些删改，如果发现图标消失，请在 antd 官网中寻找合适的进行替换。

1.8K3 0

字节前端终于开源！吹爆！

、F/A 分层设计，通过重构，可以快速支持除 React 外的通用组件库，比如 Vue、Svelte 等： F/A架构当然，光有这些并不能让我眼前一亮。...然后打开 Semi Design 的组件文档，可以看到页面比较精简、组件也很丰富。但是左侧组件菜单的小图标给我一种不太舒服的感觉，好像色彩太过丰富了一些。...组件文档此外，整个文档给我的感觉也是似曾相识，好像和蚂蚁的 React 组件库 Ant Design 神似。 Ant Design 组件库然而，点击查看一个组件后，我发现了一些小惊喜。...物料市场总之，整体来说，我还是很看好 Semi Design 的。杂谈虽然网上都在说 Semi Design 是抄袭了 Ant Design，但也许这不是什么坏事。...换个思路想想，假设 Ant Design 做的并不好，字节抖音那么大的团队，难道还会去借鉴他们么？难道他们团队没有实力去做一个又新又好的么？

1.8K6 1

9 个值得推荐的 VUE3 UI 框架

Ant Design Vue 官方网站：https://2x.antdv.com/components/overview/ Ant Design Vue 是一个非常成熟的框架，使用 Ant Design...Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...Ant Design Vue 在 GitHub 上拥有 15k+ 颗星，每周下载量为 49k，数据已经说明了它的受欢迎程度。...Balm 基于谷歌的 Material Design，这就是为什么它看起来很熟悉。Balm 附带 Vue 插件和指令，以及从简单到复杂的高度可定制的组件。

5.8K3 0

分享一个非常不错的页面组件库

随着现在前端的发展，一些成套的组件库也是层出不穷了，比如基于 Vue 的 Element UI、iView，基于 React 的 Ant Design、Fluent UI 等等，它们设计其实挺好的，但有一些色彩搭配和风格还没有达到我理想中的样子.../ 同时我也对 Material Design 中的一些光影理念比较推崇，但并不太喜欢原生的 Material Design，比如这样的：我个人觉得这种原生的 Material Design 有点用力过猛...相比之下，目前的一些 Element UI、Ant Design 则算是吸收了二者的一些优点，提供了一些 UI 组件，比如这样的：这种设计风格显得没有 Material Design 那样厚重，也吸取了一些...然而，这些设计还是没有达到我理想中的样子。比如说，卡片的一些设计、边缘轮廓的一些设计，总让我感觉没有那么清爽。...，一些布局、卡片和文本框的轮廓也显得很明晰，另外一些配色、图标的样式整体也给人一种清爽的感觉，总之我个人非常喜欢。

9183 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭