各位前端的大佬好， antdv 的官网文档这处的 SVG 类型是什么，该怎么传入？

[NjcyNzMzNDQ3]

官网文档写着可以传入svg类型的 icon ，该如何传入呢？

我试了通过以下代码引入方式，都没有成功

const bxAnaalyse = () => import('@/assets/icons/bx-analyse.svg?inline')

import { bxAnaalyse } from '@/core/icons'

import { bxAnaalyse } from '@/assets/icons/bx-analyse.svg?inline'

引入后的 icon 变成了注释的 js函数

官网代码例子

[官网文档] https://pro.antdv.com/docs/router-and-nav

从昨天抠到现在，终于想明白解决了，感谢各位回复。

解决方法：

在 generator-routers.js 文件中

增加
import * as iconSvg from '@/core/icons'

改原有代码
meta: {
title: title,
icon: icon || undefined,
hiddenHeaderContent: hiddenHeaderContent,
target: target,
permission: item.name
}

改成：
meta: {
title: title,
icon: Object.hasOwn(iconSvg, icon) ? iconSvg[icon] : icon, //改这里，因为前面传过来的是 json ，会转成字符串，这里拿字符串引入动态组件
hiddenHeaderContent: hiddenHeaderContent,
target: target,
permission: item.name
}

[clf]

.svg 文件的 url 吧，svg 文件格式是一种常见的矢量图形格式。

[rioshikelong121]

svgr 了解一下

[NjcyNzMzNDQ3]

@clf
试过了，antdv 不判断是否是 url 。我想改源码也没找到在哪。


[billly]

我就是这么用的啊
在 icons.js 中
import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline'
export { bxAnaalyse }

然后在 route 中
import { bxAnaalyse } from 'icons'

[NjcyNzMzNDQ3]

@billly

我这么写就变成注释的 js 了。。。用的是·用户登录的 token 获取用户有权限的菜单·，src\mock\services\user.js 这个文件里

https://tvax4.sinaimg.cn/large/007h7hGdgy1h0bjiebm4uj30jj0fj42t.jpg

[NjcyNzMzNDQ3]

@billly
这个图

[ragnaroks]

如果我没记错的话，这里应该是 require('/path/to/file')

[ragnaroks]

看了你的第二张图，应该也不是 cjs 和 esm 的问题了，那我也没遇到过你这种例外了

[billly]

@NjcyNzMzNDQ3 icon 字段不是字符串吧，不要加引号，直接 icon: bxAnaalyse,

[billly]

@NjcyNzMzNDQ3 哦 忽略上面 看错了