轻松打造Vite+Vue3+Element-Plus图标方案：完整攻略

2023-07-12 22:59:14

在 Vite+Vue3+Element-Plus 项目中优雅地使用图标

局部引入：灵活的按需加载

局部引入图标是最直接的方法。在需要图标的组件中导入特定的图标组件即可。例如，要在组件中使用“加号”图标：

import PlusIcon from 'element-plus/es/components/icon/src/plus.js';

然后在模板中使用：

<PlusIcon />

局部引入的好处是按需加载，不会引入不需要的图标，减小包大小。但缺点是需要手动导入每个图标组件。

全局引入：简单粗暴的一劳永逸

全局引入更为简单，在项目的根组件中导入所有图标组件即可：

import 'element-plus/lib/components/icon/index.js';

这样，项目中的任何组件都可以使用任何图标组件。全局引入的好处是无需手动导入，但缺点是会增加包大小。

自动引入：智能的折中方案

自动引入结合了局部引入和全局引入的优点。无需手动导入，还能实现按需加载。通过使用 webpack 的自动引入功能，可以实现：

在项目根目录创建 webpack.config.js：

module.exports = {
  plugins: [
    new IconifyPlugin({
      prefix: 'iconify',
      utils: 'iconify-icon',
    }),
  ],
};

在根组件导入插件：

import 'iconify-icon';

然后在组件中使用图标：

<iconify-icon icon="iconify-plus" />

最佳方案的选择

选择最佳方案取决于具体需求：

局部引入： 按需加载，包大小最小，但需手动导入。
全局引入： 简单方便，无需手动导入，但包大小较大。
自动引入： 结合了局部和全局的优点，按需加载，无需手动导入。

常见问题解答

1. 如何获取图标列表？

Element-Plus 提供的图标列表可以在官网查看：https://element-plus.org/#/zh-CN/component/icon

2. 如何更改图标颜色、大小？

可以通过 CSS 样式更改图标颜色、大小：

.icon {
  color: red;
  font-size: 20px;
}

3. 如何在不同组件间复用图标？

可以使用 Vue 的 scoped 插槽来在不同组件间复用图标：

<template>
  <div>
    <slot name="icon" />
  </div>
</template>

<script>
export default {
  components: {
    PlusIcon: () => import('element-plus/es/components/icon/src/plus.js'),
  },
};
</script>

4. 如何使用第三方图标库？

Element-Plus 集成了对第三方图标库的支持，可以通过以下步骤使用：

import {
  IconifyIcon,
  IconifyPlugin,
} from '@iconify/vue';
import {
  mdiPlus,
  mdiCogOutline,
} from '@iconify/mdi-icons';

app.component('IconifyIcon', IconifyIcon);
app.use(IconifyPlugin, {
  icons: {
    mdiPlus,
    mdiCogOutline,
  },
});

5. 如何解决图标显示不正确的问题？