Vue中的图标库常见的有以下三种：

• ElementUI自带的图标库：缺点是不够专业，可用图标太少了
• FontAwesome：很专业，并且非常全，可惜走上了商业化的歪门邪道
• IconPark：很专业，很全，国产

本文介绍一下Vue3集成IconPark的具体步骤。

安装

在pacakge.json目录下面，执行安装命令

# vue2
npm install @icon-park/vue
# 或者使用yarn
yarn add @icon-park/vue

# vue3
npm install @icon-park/vue-next
# 或者使用yarn
yarn add @icon-park/vue-next

使用

最近新兴的图标库大部分都是需要以组件的形式进行导入的，旧版的elementUI和font-awesome都是以className的形式定义图标的样式，新版的ElementUIPlus只支持以组件的形式进行导入。 IconPark跟ElementPlus相比，使用方式上是一样的，但是IconPark支持的图标更丰富，所以推荐使用IconPark而不要使用ElementPlus。

首先，在main.js中添加引入样式：

import "@icon-park/vue-next/styles/index.css";

导入语句如下所示，在导入的时候可以使用as进行图标重命名，这样做的好处是可以避免与自己的组件重名，看上去比较整齐。

<script setup>
import {
  CheckOne as IconCheckOne,
  Home as IconHome,
  Book as IconBook,
  Gamepad as IconGamepad,
  AppStore as IconStore,
  Android as IconAndroid,
  Headset as IconHeadphones,
  Command as IconCommand,
  Download as IconDownload
} from "@icon-park/vue-next";

</script>

使用时：

<icon-home></icon-home>
<icon-android></icon-android>
<icon-headphones></icon-headphones>
<icon-gamepad></icon-gamepad>
<icon-book></icon-book>
<icon-store></icon-store>

想要寻找更多图标，直接去官网上搜索： iconpark.oceanengine.com/home

想要了解图标的具体用法，可以直接操作，然后复制代码。

<all-application theme="two-tone" size="41" :fill="['#333' ,'#2F88FF']"/>