ionic5 Vue3中使用ionic官网的图标

ionic5 Vue3中使用ionic官网的图标和ionic angular中还是有一些区别的，ionic angular中我们可以看官方文档直接使用，但是在 ionic Vue中的话还需要进行一些配置。

Ionic5 Vue3实战视频教程：https://www.itying.com/goods-1150.html

ionic图标官网：https://ionicons.com/

1、业务逻辑引入Icon并在setup里面返回

import { star, add,arrowForwardCircleOutline} from "ionicons/icons";

setup() {
    return {
      star,
      add,
      arrowForwardCircleOutline
    };
}

2、模板中使用icon

<ion-icon :icon="star" color="primary" size="large"></ion-icon>

** 3、ion-button中通过slot指定图标的位置:**

<ion-button>
  <ion-icon slot="start" :icon="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon :icon="star" slot="end" />
</ion-button>

<ion-button fill="clear" color="success">
    <ion-icon slot="icon-only" :icon="add"></ion-icon>
</ion-button>