Umi + AntDesign Pro 自定义路由图标（阿里矢量图标库）

最新推荐文章于 2024-08-29 11:07:02 发布
最新推荐文章于 2024-08-29 11:07:02 发布
阅读量6.4k 收藏 5
点赞数 1
分类专栏： antd umi react 文章标签： antDesign umi
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/111873524
版权
本文档介绍了如何在Umi + AntDesign Pro项目中使用阿里巴巴矢量图标库创建自定义菜单图标。关键步骤包括在阿里矢量图官网创建项目并上传图标，确保图标前缀为'icon-'，配置基本布局的JS路径，以及在路由中直接引用图标名称。
摘要由CSDN通过智能技术生成

需求 ：
菜单栏显示自定义的图标
在这里插入图片描述
流程：

  1. 在阿里巴巴矢量图官网 建一个自己项目
    在这里插入图片描述
    在这里插入图片描述
    !!!这里的前缀 一定一定要写icon-
    就是因为这里的配置，所以我之前一直都没弄出来！
  2. 上传完自己的图片后，引用
    在这里插入图片描述
    把这里的js路径 配置到basiclayout里
    在这里插入图片描述
  3. 使用
    路由的icon，就直接写你在阿里巴巴矢量图里的命名
最低0.47元/天 解锁文章
cvory
关注
专栏目录
「已解决」umi 路由配置 icon 图标报错问题
Constantiny的博客
06-09 1363
（前面三个路由配置也是一开始加图标就报错，但是后面不知道怎么搞的不报错了）当umi的路由配置中带有icon时就会白屏报错。比如这样可以正常渲染。
关于umi ui图标未显示问题
njkl2166的博客
03-25 180
参考文章
umi框架：react优雅引入阿里巴巴矢量图标库
ilovewangjie990502的博客
07-01 1237
进入阿里巴巴矢量图标库，将选入的图标放入购物车。 选择添加至项目，没有项目可新建项目。 封装一个自定义Icon组件，这里推荐React使用函数形式： import React from 'react'; import classnames from 'classnames'; import propsTypes from 'prop-types'; const scriptElem = document.createElement('script'); // 在上方复制的链接放在这里 scriptEl
Ant Design 图标库使用指南
gitblog_00431的博客
08-07 598
Ant Design 图标库使用指南 ant-design-icons⭐ Ant Design SVG Icons项目地址:https://gitcode.com/gh_mirrors/ant/ant-design-icons 项目介绍 Ant Design图标库是Ant Design设计体系的一部分，由蚂蚁集团和社区共同维护。这个图标库提供了一套完整、统一且美观的矢量图标，适用于Web界面中常...
umi路由使用iconfont图标
weixin_68284485的博客
03-12 752
3.解压后复制iconfont.js文件到项目的src任意文件夹内，只要app.tsx能访问到即可，然后在app.tsx导出的模板内添加iconfontUrl路径指向即可。1.进入到自己创建的项目内，如果没有就将所需图标加到购物车，再添加到项目。2.选择symbol，再把文件下载到本地。4.最后在路由定义的地方使用。
antd 中左侧菜单栏icon图标自定义
m0_69439101的博客
05-18 1492
左侧菜单栏中的图标名称其实是一个图标的组件，要自定义图标，就要将图标封装成一个组件，然后使用。
umi框架使用icon-font
蓝枫秋千的踩坑记录
04-15 4400
使用icon-font的图标 在/config/defaultSetting目录下找到iconfontUrl 这里是阿里icon-font的项目图标页面，找到symbol地址 在项目中正常使用即可
umi4 React项目使用icon集合
YanHSama的博客
11-08 680
umi项目中使用icon集合。
React中实现antd自定义图标，鼠标悬浮变色
最新发布
在下魔王ii的博客
08-29 607
借助 antd 的 tooltip组件来实现 hover 时变色的效果。
ant design入门_Umi + ant Design Pro最简单的入门教程（一）初
weixin_42202078的博客
01-12 2396
前言umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。这个库入门的门槛比较高，umi是这个样子的，umi = react + redux + react-router + ts + dva + umi脚手架 + ant Design Pro + ant Design UI + umi-block。如果你没有丰富的react基础你来学习他或者是看懂它，那将是很困难的一件事，本博客...
umi+ant_pro-demo.rar
09-22
【umi+ant_pro-demo.rar】是一个包含使用Umi框架和Ant Design Pro库构建的Web应用示例项目的压缩包。这个项目展示了如何结合这两个强大的工具来快速开发企业级的前端应用。接下来，我们将深入探讨其中涉及的主要知识...
Umi + React + Ant Design Pro 项目实践（三）—— 组件封装
且听风吟的博客
03-09 431
Umi + React + Ant Design Pro 项目实践（三）—— 组件封装
UmiJs+Ant design pro 使用自定义iconfont图标
a1426152747的博客
08-27 3321
最近使用UmiJs+React+Ant design pro开发项目遇到菜单栏需要使用自定义图标的问题。查询官网发现暂时不支持图片，icon中使用的是antd的图标，如需之外的，可引入阿里字体库iconfont中的在线链接 。 首先，现在iconfont中常见一个项目 找到自己需要的图标，加入到自己的项目中，然后创建远程链接 注意：如果字体图标中有默认颜色，需要把颜色去掉，否则，选中菜单时，字体图标的颜色不会和选中的颜色一致！ 复制上述...
ant-design v-4.41版本动态引入路由中的icon
sunnyboysix的博客
07-09 3078
第一步 在路由中添加icon 名称 export const adminRoutes = [ { path: "/admin/dashboard", component: Index, isShow: true, title: "看板", icon: "AreaChartOutlined" }, ]; 对应的英文名配置在路由中 第二步页面中引入 import * as Icon from .
umi 中修改浏览器上的icon和title
bighead的博客
10-22 3023
在项目中找到这个文件 ：.umirc.ts，没有的话可以手动创建一个 文件中写入 export default { // 修改icon links: [ // href的图片你可以放在public里面，直接./图片名.png 就可以了，也可以是cdn链接 { rel: 'icon', href: './image/desktop.png', type: 'image/x-icon' }, ], // 修改title title:'标题'
umi后台项目导航自定义icon问题
weixin_46063007的博客
07-27 2139
后台自定义导航icon
react+umi 使用本地图片做菜单icon
weixin_50745161的博客
04-01 2538
1.看文档有这么一段 const IconMap = { smile: <SmileOutlined />, heart: <HeartOutlined />, }; const defaultMenus = [ { path: '/', name: 'welcome', icon: 'smile', children: [ { path: '/welcome', name: 'one',
umi pro-layout : 某个页面 禁用/移除 pro-layout ( 比如: 登录页不需要 layout )
未将对象引用设置到对象的实例
10-21 2439
umi 开启 layout 后, 会把所有页面都放在 pro layout 中. 但是 `登录页 或 其他一些页面` 是不需要这个 layout 的. 可以通过菜单中的 `layout:false` 属性关闭这个当前路由的 layout 可以通过菜单中的 属性关闭这个当前路由的 layout 例子: 截图 umi 的配置 附赠一个路由的 TypeScript 类型 可能不全, 具体的可以看官方的文档… 自己再补一些.
在react+umi+ant design pro框架下，已知关键字搜索的接口为“apiPipelineList”，帮我用typescript接口形式实现前端的关键字检索的接口调用
06-07
好的，根据您提供的信息，我可以帮您实现一个 TypeScript 接口，用于调用关键字搜索的接口。 首先，我们需要定义一个请求参数的接口，包括关键字和分页信息： ```typescript interface SearchParams { keyword: string; pageNum: number; pageSize: number; } ``` 然后，我们可以定义一个返回数据的接口，根据实际接口返回的数据结构进行定义： ```typescript interface SearchResult { totalCount: number; list: PipelineItem[]; } interface PipelineItem { id: number; name: string; description: string; // ... 其他字段 } ``` 最后，我们可以定义一个调用接口的函数，使用 `umi-request` 库来发送请求： ```typescript import { extend } from 'umi-request'; const request = extend({ prefix: '/api', // 接口前缀，根据实际情况修改 }); async function search(params: SearchParams): Promise<SearchResult> { const data = await request('/apiPipelineList', { method: 'GET', params, }); return data; } ``` 这样，我们就完成了一个用 TypeScript 实现的前端关键字检索的接口调用。当然，这只是一个简单的示例，具体实现需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值