vant组件中自定义icon图标怎么引入到页面中

在 Vant 组件中自定义 Icon 图标，可以通过以下步骤引入到页面中：

1. 首先，将自定义的 Icon 图标文件（通常是 SVG 格式）放置在项目的某个目录下，比如 `src/icons`。

2. 在 `src/icons` 目录下创建一个 `index.js` 文件，用于统一导出所有的自定义 Icon。

3. 在 `index.js` 文件中，使用 `require` 或 `import` 导入每个 Icon 文件，并且为每个 Icon 文件创建一个别名。

例如，假设你有两个自定义 Icon 图标文件：`src/icons/home.svg` 和 `src/icons/user.svg`。

// src/icons/index.js

// 导入自定义 Icon 文件
import HomeIcon from './home.svg';
import UserIcon from './user.svg';

// 导出自定义 Icon 别名
export {
  HomeIcon,
  UserIcon,
};

4. 在需要使用自定义 Icon 的页面中，使用 Vant 的 `Icon` 组件，并通过 `name` 属性指定自定义 Icon 的别名。

<template>
  <div>
    <van-icon name="home" />
    <van-icon name="user" />
  </div>
</template>

<script>
import { HomeIcon, UserIcon } from '@/icons';

export default {
  name: 'MyComponent',
  components: {
    VanIcon,
  },
};
</script>

这样就可以在页面中引入和使用自定义的 Icon 图标了。记得将 `@/icons` 替换为你实际的自定义 Icon 目录路径。