element-plus的icon按需自动引入

Element Plus 的 Icon 组件是基于 SVG 图标的，它支持按需自动引入。具体来说，它使用了 webpack 的 `require.context` 方法来实现自动引入。

在使用 Element Plus 时，你可以通过 `el-icon` 组件来引用图标。例如：

<el-icon name="el-icon-edit"></el-icon>

其中，`name` 属性值对应了 Element Plus 提供的 SVG 图标名。这些 SVG 图标都被存放在 `@element-plus/icons` 包中。当你需要使用某个特定的图标时，需要在代码中先引入该图标，如下所示：

import 'element-plus/packages/theme-chalk/src/base.scss'; // 引入 Element Plus 样式文件
import { ElButton, ElIcon } from 'element-plus';
import { EditOutlined } from '@element-plus/icons';

export default {
  components: {
    [ElButton.name]: ElButton,
    [ElIcon.name]: ElIcon,
  },
  mounted() {
    ElIcon.add({ EditOutlined });
  },
};

以上代码中，我们首先引入了 Element Plus 的样式文件，然后分别引入了 `ElButton` 和 `ElIcon` 组件，并且通过 `ElIcon.add` 方法将 `EditOutlined` 图标添加到 `ElIcon` 组件中。这样，在模板中使用 `el-icon` 组件时，就可以直接使用 `name` 属性值为 `edit-outlined` 了，而不需要显式地引入该图标了。如下所示：

<template>
  <el-button type="primary">
    <el-icon name="edit-outlined"></el-icon>
    编辑
  </el-button>
</template>