如何在Vue项目中自动获取并展示所有图标组件列表

不管你用Vite还是Webpack构建项目，都可以通过批量导入的方式自动获取所有图标组件，不用手动逐个添加到页面。

Vite项目实现方式 #

用Vite提供的import.meta.glob特性批量导入图标组件，然后动态渲染：

<template>
  <div class="icon-gallery">
    <div v-for="(Icon, name) in iconComponents" :key="name" class="icon-item">
      <Icon />
      <span>{{ name }}</span>
    </div>
  </div>
</template>

<script setup>
// 批量导入icons目录下所有.vue文件，eager设为true表示同步导入
const iconModules = import.meta.glob('../icons/*.vue', { eager: true })

const iconComponents = {}
for (const path in iconModules) {
  // 从路径里提取文件名，比如 "../icons/fooIcon.vue" 提取 "fooIcon"
  const fileName = path.split('/').pop().replace('.vue', '')
  // 转成大驼峰命名的组件名，比如 fooIcon -> FooIcon
  const componentName = fileName.replace(/^\w/, c => c.toUpperCase()) + 'Icon'
  // 将组件存入对象，键就是组件名
  iconComponents[componentName] = iconModules[path].default
}
</script>

<style scoped>
.icon-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 20px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.icon-item span {
  font-size: 14px;
  color: #333;
}
</style>

Webpack项目实现方式 #

用Webpack的require.context来批量导入，逻辑和Vite类似：

<template>
  <div class="icon-gallery">
    <div v-for="(Icon, name) in iconComponents" :key="name" class="icon-item">
      <Icon />
      <span>{{ name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconComponents: {}
    }
  },
  created() {
    // 创建上下文，指定图标目录、是否遍历子目录、匹配.vue文件
    const iconContext = require.context('../icons', false, /\.vue$/)
    iconContext.keys().forEach(path => {
      // 提取文件名，比如 "./fooIcon.vue" 转成 "fooIcon"
      const fileName = path.replace('./', '').replace('.vue', '')
      // 生成对应的组件名
      const componentName = fileName.replace(/^\w/, c => c.toUpperCase()) + 'Icon'
      // 获取组件的默认导出
      const Icon = iconContext(path).default
      this.iconComponents[componentName] = Icon
    })
  }
}
</script>

<style scoped>
.icon-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  padding: 20px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.icon-item span {
  font-size: 14px;
  color: #333;
}
</style>

注意事项 #

• 记得把代码里的../icons改成你实际的图标文件目录
• 如果你的图标文件名已经是FooIcon.vue这种大驼峰格式，那直接去掉.vue后缀就是组件名，不用再做转换
• 之后新增图标组件时，只要放在指定目录里，页面会自动加载并展示，完全不用手动修改展示页面

内容的提问来源于stack exchange，提问作者Menelaos Vergis