路由支持使用自定义的icon吗？ about ant-design-vue-pro HOT 6 CLOSED

如果不是 ant design 带的图标，需要自己改源代码实现
https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/menu/index.js#L60

from ant-design-vue-pro.

你好，路由自定义图标功能已提供支持。

具体可以看 master 分支的 /src/config/router.config.js 中 dashboard 的 icon 设定。
或者查看 路由配置说明 router/README.md

from ant-design-vue-pro.

路由如何支持自定义的icon？

import { Icon } from 'ant-design-vue'
// iconfont
import './assets/less/style.less'

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_730323_xk8qmej2ayl.js' // 在 iconfont.cn 上生成
})
Vue.component('icon-font', IconFont)「

然后调整下 menu.js 的 renderIcon 方法

renderIcon (icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }

      if(icon.startsWith('icon-')) {
        return (
          <icon-font type={icon} />
        )
      }

      const props = {}
      typeof (icon) === 'object' ? props.component = icon : props.type = icon
      return (
        <Icon {... { props } }/>
      )
    }

就可以使用 iconfont 图标，也可以使用自带的图标

from ant-design-vue-pro.

路由如何支持自定义的icon？

import { Icon } from 'ant-design-vue'
// iconfont
import './assets/less/style.less'

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_730323_xk8qmej2ayl.js' // 在 iconfont.cn 上生成
})
Vue.component('icon-font', IconFont)「

然后调整下 menu.js 的 renderIcon 方法

renderIcon (icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }

      if(icon.startsWith('icon-')) {
        return (
          <icon-font type={icon} />
        )
      }

      const props = {}
      typeof (icon) === 'object' ? props.component = icon : props.type = icon
      return (
        <Icon {... { props } }/>
      )
    }

就可以使用 iconfont 图标，也可以使用自带的图标

能不能解释详细一点？自定义的icon是什么文件？需要在main.js引入吗？menu.js是哪个路径下的？是不是需要自己修改源代码呀？

from ant-design-vue-pro.

路由如何支持自定义的icon？

import { Icon } from 'ant-design-vue'
// iconfont
import './assets/less/style.less'

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_730323_xk8qmej2ayl.js' // 在 iconfont.cn 上生成
})
Vue.component('icon-font', IconFont)「

然后调整下 menu.js 的 renderIcon 方法

renderIcon (icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }

      if(icon.startsWith('icon-')) {
        return (
          <icon-font type={icon} />
        )
      }

      const props = {}
      typeof (icon) === 'object' ? props.component = icon : props.type = icon
      return (
        <Icon {... { props } }/>
      )
    }

就可以使用 iconfont 图标，也可以使用自带的图标

能不能解释详细一点？自定义的icon是什么文件？需要在main.js引入吗？menu.js是哪个路径下的？是不是需要自己修改源代码呀？

太久了，源码应该变动了，之前这个项目应该是有一个menu.js。

现在的话，当前layout是引用ant-desing-vue/pro-layout，定位到@ant-design-vue/pro-layout/es/components/RouteMenu/BaseMenu.js

var renderIcon = function renderIcon(h, icon) {
  if (icon === undefined || icon === 'none' || icon === null) {
    return null;
  }

  var props = {};
  typeof icon === 'object' ? props.component = icon : props.type = icon;
  return h(Icon, {
    props: props
  });
};

所以，现在的话，你可能需要去改这里的代码，建议你直接到ant-design-vue这个项目搜下issue或者提个issue咨询一下，看是pro-layout这里的BaseMenu的逻辑可否调整为可以支持iconfont的形式，或是询问下是否有其他更好的方案，

from ant-design-vue-pro.

不要再老 issue 反复提问，有问题请开新 issue

from ant-design-vue-pro.