图标库如何配置自动导入

[strongyc]

• [ ] I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: arco-design-pro-vue@2.5.0
• Browser: chrome101.0.4951.41

Extra info

图标库如何配置自动导入，在钱盾菜单中，不自动导入无法解析到该图标

What is expected?

图标库如何配置自动导入

Steps to reproduce

图标库如何配置自动导入

[hehehai]

@strongyc 你好

需要引入图标文件 https://github.com/arco-design/arco-design-pro-vue/blob/9ccc0047ce0f1a92e117fbc8bfe0cdd0779c4786/arco-design-pro-vite/src/main.ts#L3-L18

使用 unplugin-vue-components 的话，需要开启图标引入

https://github.com/antfu/unplugin-vue-components/blob/ab90df66bd79cb5525139efdd9c72533a918880a/src/core/resolvers/arco.ts#L140-L159

export interface ArcoResolverOptions {
  /**
   * import style css or less with components
   *
   * @default 'css'
   */
  importStyle?: boolean | 'css' | 'less'
  /**
   * resolve icons
   *
   * @default false
   */
  resolveIcons?: boolean
  /**
   * Control style automatic import
   *
   * @default true
   */
  sideEffect?: boolean
}

[strongyc]

你好，在antdProVue 模板中，是否有案例代码，我找了没发现啊，图标主要用于渲染菜单栏图片，不自动引入不方便

[strongyc]

const renderSubMenu = () => { function travel(_route: RouteRecordRaw[], nodes = []) { if (_route) { _route.forEach((element) => { // This is demo, modify nodes as needed const icon = element?.meta?.icon ? () => h(compile(<${element?.meta?.icon}/>)) : null; const node = element?.children && element?.children.length !== 0 ? ( <a-sub-menu key={element?.name} v-slots={{ icon, title: () => h(compile(t(element?.meta?.locale || ''))), }}

{travel(element?.children)} ) : ( <a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}

{t(element?.meta?.locale || '')} ); nodes.push(node as never); }); } return nodes; } return travel(menuTree.value); }; 后台用的是jsx渲染，图标是如何引入的，求告知，我在main函数中也引入了

[hehehai]

@strongyc 使用 jsx 渲染的，实际生成的是 <icon-xx /> https://github.com/arco-design/arco-design-pro-vue/blob/9ccc0047ce0f1a92e117fbc8bfe0cdd0779c4786/arco-design-pro-vite/src/components/menu/index.vue#L53-L55

需要 icon 属性 https://github.com/arco-design/arco-design-pro-vue/blob/9ccc0047ce0f1a92e117fbc8bfe0cdd0779c4786/arco-design-pro-vite/src/router/routes/modules/dashboard.ts#L7-L12

[strongyc]

这图标是如何自动导入的啊，我这里和你配置一样，但是会渲染错误，图标没导入，我是自己塔的后台，写法和你的一样

[hehehai]

@strongyc 要是要导入非 arco 的 icon，修改 h(compile(<${element?.meta?.icon}/>)) 这个就好

[strongyc]

我的icon 是后台配置返回

[strongyc]

报错如上，就是因为没导入图标

[strongyc]

import { createApp } from 'vue' import App from './App.vue' import router from './router' import piniaStore from './store' import './index.css' import ArcoVue from '@arco-design/web-vue' // 额外引入图标库 import ArcoVueIcon from '@arco-design/web-vue/es/icon' import '@arco-design/web-vue/dist/arco.css' import '@/assets/style/global.less' // 支持SVG import 'virtual:svg-icons-register' createApp(App).use(router).use(ArcoVue).use(ArcoVueIcon).use(piniaStore).mount('#app') main配置

[hehehai]

@strongyc

1. 后台的不影响的，可以调试下，看 icon 名称是否正确
2. 就菜单的图标不显示吗？其他使用的地方正常？

[strongyc]

其他地方可以的，但是得引入，不引入就报错 import { IconSync, IconDelete, IconEdit, IconPlus, IconSettings, } from "@arco-design/web-vue/es/icon"; 必须这样导入才可以用

[strongyc]

在组件里引入

[strongyc]

有没有种办法，自动引入了

[strongyc]

我看你们的后台好像并没有配置就可以啊

[hehehai]

@strongyc 嗯，应该是全局引入这里有问题（重新复制检查下，也可能有冲突，import 'virtual:svg-icons-register' 注释下看看？），可以调试下。

https://github.com/arco-design/arco-design-pro-vue/blob/9ccc0047ce0f1a92e117fbc8bfe0cdd0779c4786/arco-design-pro-vite/src/main.ts#L3-L18

[strongyc]

你好已找到问题，是没配置这个 { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js', // compile template },