Vue Ionic引入名称带横杠的ionicons图标出现", expect"错误如何解决

JavaScript 语法规定变量/标识符不允许包含短横线-，你在导入语句中直接写{ arrow-back }时，JS解析器会把-识别为减号运算符，不符合ES6模块导入的语法规则，因此抛出语法错误。
同时Ionicons官方npm包的所有图标导出名称均采用驼峰命名格式，原名称含短横线的图标不会以短横线命名的形式导出。另外注意你示例代码中的arrow-black属于拼写错误，正确的返回箭头图标名称为arrow-back，需先修正名称后再转换为驼峰格式导入。

• 第一步：将你要导入的图标名称转换为驼峰格式，例如arrow-back对应驼峰名arrowBack，home-outline对应homeOutline
• 第二步：导入时直接使用对应驼峰名，也可按需自定义合法别名：

// 基础正确导入写法
import { arrowBack } from 'ionicons/icons';
// 自定义别名写法
import { arrowBack as backIcon } from 'ionicons/icons';

• 第三步：组件中正常使用即可，Vue3 + Ionic 示例代码如下：

<template>
  <ion-page>
    <ion-buttons slot="start">
      <ion-back-button :icon="arrowBack"></ion-back-button>
    </ion-buttons>
  </ion-page>
</template>

<script setup>
import { arrowBack } from 'ionicons/icons';
</script>

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