Vue.js项目中如何显示icons文件夹所有图标？排查显示失败问题

问题描述 #

我基于Vue.js搭建了一个小型项目，想要展示icons文件夹下的所有图标，但图标无法正常显示。请帮忙排查代码中的错误，实现将所有图标展示在指定的div元素内。

相关代码 #

ValidatingProps.vue #

<template>
  <div>
    <h1>How to use Validation in props</h1>
    <h3>{{ status }}</h3>
    <div class="icons" v-html="icons"></div>
  </div>
</template>

<script>
import icons from "./icons";

console.log(icons);

export default {
  name: "validatingProps",
  props: {
    status: {
      type: String,
      default: "Validating",
      validator: (value) => {
        console.log("Val", value);
        return ["in-progress", "complete"].includes(value);
      },
    },
    icons: {
      type: String,
      required: true,
      validator: (value) => {
        console.log("Value >>>> ", value);
        Object.keys(icons).includes(value);
        console.log("Icons props: ", Object.keys(icons).includes(value));
      },
    },
  },
  mounted() {
    console.log("mounted ", Object.keys(icons));
    console.log("this.Icons: ", this.icons);
  },
};
</script>

<style scoped>
.icons {
  height: 200px;
  width: 200px;
  border: 2px solid red;
  margin: 0 auto;
  background: lightcyan;
}
</style>

App.vue #

<div>
<template>
  <ValidatingProps
      status="progress"
      :icons="Object.keys(this.icons.default)"
    />
  </div>
</template>

<script>
import ValidatingProps from "./components/validatingProps.vue";
import * as icon from "./components/icons/";

export default {
  name: "App",
  components: {
    ValidatingProps,
  },

 data() {
    return {
      icons: icon,
   }
}
</script>

文件夹结构 #

当前显示效果 #

错误分析 #

1. Props类型不匹配：ValidatingProps组件中icons props定义为String类型，但父组件传入的是数组（Object.keys(this.icons.default)），类型不匹配导致验证失败，props无法正确接收值。
2. 图标渲染逻辑错误：v-html需要传入HTML字符串，但当前传入的是图标文件名数组，没有实际的图标内容（如SVG代码或图片路径），无法渲染出图标。
3. Props验证函数无返回值：icons的validator函数没有return语句，无法完成验证逻辑，导致验证失效。
4. 图标导入方式问题：App.vue中使用* as icon from "./components/icons/"导入，但如果icons文件夹没有index.js统一导出图标，无法正确获取每个图标的资源内容。
5. Status值不符合验证规则：父组件传入的status="progress"不在validator允许的["in-progress", "complete"]范围内，会触发默认值。

修复步骤 #

步骤1：统一导出图标文件 #

在components/icons/目录下创建index.js，统一导出所有图标（假设是SVG格式）：

// components/icons/index.js
import home from './home.svg';
import menu from './menu.svg';
import settings from './settings.svg';

export default {
  home,
  menu,
  settings
};

步骤2：修正ValidatingProps.vue的Props定义与渲染逻辑 #

<template>
  <div>
    <h1>如何在Props中使用验证</h1>
    <h3>{{ status }}</h3>
    <div class="icons">
      <!-- 循环渲染每个图标 -->
      <img 
        v-for="(iconSrc, index) in icons" 
        :key="index" 
        :src="iconSrc" 
        alt="项目图标"
        style="width: 50px; height: 50px; margin: 10px;"
      />
    </div>
  </div>
</template>

<script>
import icons from "./icons";

export default {
  name: "validatingProps",
  props: {
    status: {
      type: String,
      default: "Validating",
      validator: (value) => {
        return ["in-progress", "complete"].includes(value);
      },
    },
    icons: {
      type: Array,
      required: true,
      validator: (value) => {
        const validIconNames = Object.keys(icons);
        // 验证传入的图标是否都在合法列表中
        return value.every(src => validIconNames.includes(Object.keys(icons).find(key => icons[key] === src)));
      },
    },
  },
};
</script>

<style scoped>
.icons {
  height: auto;
  min-height: 200px;
  width: 200px;
  border: 2px solid red;
  margin: 0 auto;
  background: lightcyan;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
</style>

步骤3：修正App.vue的导入与传参 #

<template>
  <ValidatingProps
    status="in-progress"
    :icons="Object.values(icons)"
  />
</template>

<script>
import ValidatingProps from "./components/validatingProps.vue";
import icons from "./components/icons/index.js";

export default {
  name: "App",
  components: {
    ValidatingProps,
  },
  data() {
    return {
      icons: icons,
    };
  },
};
</script>

修复说明 #

• 类型匹配：将icons props改为Array类型，与父组件传入的数组保持一致，避免类型验证失败。
• 正确渲染：使用v-for循环遍历图标资源路径，通过img标签渲染图标；如果是SVG字符串，可改用v-html插入内容。
• 验证函数修复：给validator添加return语句，确保验证逻辑生效，同时验证传入的图标是否都在合法列表中。
• 图标导出优化：通过index.js统一导出图标，简化导入逻辑，确保能正确获取每个图标的资源路径。
• Status值修正：传入符合验证规则的in-progress，避免使用默认值。

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