V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
NjcyNzMzNDQ3
V2EX  ›  程序员

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

  •  
  •   NjcyNzMzNDQ3 · 2022-03-16 11:05:15 +08:00 · 1743 次点击
    这是一个创建于 743 天前的主题,其中的信息可能已经有所发展或是发生改变。

    官网文档写着可以传入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函数 QQ 截图 20220316105056

    官网代码例子 QQ 截图 20220316104821

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

    第 1 条附言  ·  2022-03-16 15:15:29 +08:00
    从昨天抠到现在,终于想明白解决了,感谢各位回复。

    解决方法:

    在 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
    }
    10 条回复    2022-03-16 13:08:31 +08:00
    clf
        1
    clf  
       2022-03-16 11:19:44 +08:00
    .svg 文件的 url 吧,svg 文件格式是一种常见的矢量图形格式。
    rioshikelong121
        2
    rioshikelong121  
       2022-03-16 11:22:11 +08:00
    svgr 了解一下
    NjcyNzMzNDQ3
        3
    NjcyNzMzNDQ3  
    OP
       2022-03-16 11:24:15 +08:00
    @clf
    试过了,antdv 不判断是否是 url 。我想改源码也没找到在哪。

    ![QQ 截图 20220316112226]( https://tva1.sinaimg.cn/large/007h7hGdgy1h0bk50ehauj31ci0dktlt.jpg)
    billly
        4
    billly  
       2022-03-16 11:33:06 +08:00
    我就是这么用的啊
    在 icons.js 中
    import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline'
    export { bxAnaalyse }

    然后在 route 中
    import { bxAnaalyse } from 'icons'
    NjcyNzMzNDQ3
        5
    NjcyNzMzNDQ3  
    OP
       2022-03-16 11:39:47 +08:00
    @billly

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

    https://tvax4.sinaimg.cn/large/007h7hGdgy1h0bjiebm4uj30jj0fj42t.jpg
    NjcyNzMzNDQ3
        6
    NjcyNzMzNDQ3  
    OP
       2022-03-16 11:43:38 +08:00
    ragnaroks
        7
    ragnaroks  
       2022-03-16 11:53:32 +08:00
    如果我没记错的话,这里应该是 require('/path/to/file')
    ragnaroks
        8
    ragnaroks  
       2022-03-16 11:56:19 +08:00
    看了你的第二张图,应该也不是 cjs 和 esm 的问题了,那我也没遇到过你这种例外了
    billly
        9
    billly  
       2022-03-16 13:07:36 +08:00
    @NjcyNzMzNDQ3 icon 字段不是字符串吧,不要加引号,直接 icon: bxAnaalyse,
    billly
        10
    billly  
       2022-03-16 13:08:31 +08:00
    @NjcyNzMzNDQ3 哦 忽略上面 看错了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5193 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 09:41 · PVG 17:41 · LAX 02:41 · JFK 05:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.