在WEB开发中，为了让网站更加生动，通常会使用一些字体图标，比如FontAwesome/IconPark等，IconPark是字节跳动提供的图标库，超过2000个高质量图标，能满足和覆盖大部分场景。这篇文章分享下
在Vue3中使用IconPark的方法。



安装IconPark


复制下面的命令安装IconPark：

npm install @icon-park/vue-next --save


使用IconPark


如果你不在乎打包大小，可以全局注册IconPark并使用。在你的main.js中配置如下代码：

import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';

const app = createApp({});

// Install
install(app); // use default prefix 'icon', eg: icon is People, name is icon-people.
install(app, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.

app.mount('#app');


打开IconPark官方网站：https://iconpark.oceanengine.com/official

找到你要使用的图标，比如这个：config



那么你组件在使用（template中）的时候则为：



个人不太推荐全局注册，因为很多图标你用不着，会导致打包的体积非常大，官方提供了按需引入的方法，使用的babel-plugin-import插件，但是我没有成功，不知道这个插件咋配的。也或者说Vue 3现在使用Vite打包无法使用babel-plugin-import插件？有知道的大佬可以给xiaoz解惑下。

于是xiaoz只能使用笨办法，需要哪个图标就导入哪个图标。首先在main.js里面导入IconPark默认样式：

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


然后在你的组件内导入需要使用的图标，比如：

import {
ListNumbers as iconListNumbers,
Warehousing as iconWarehousing,
CodeComputer as iconCodeComputer,
EthernetOn as iconEthernetOn,
LinkThree as iconLinkThree,
FolderOpen as iconFolderOpen

} from '@icon-park/vue-next';


我这里统一加了一个别名前缀icon避免和自己的组件重命导致冲突（建议加上别名前缀来使用）。在template中调用只需要：



当然了，你还可以加上颜色、尺寸等属性，比如：



注意事项


1. 官方的在线图标中，给的名称全是小写的，比如config，手动导入的时候使用的驼峰命名法，import的时候首字母则是大写，比如：import Config from '@icon-park/vue-next'
2. 如果名称是dislike-two这种，则import导入的时候为DislikeTwo
3. template中使用时全部改为小写，并且要用-线分隔

> IconPark官网：https://iconpark.oceanengine.com/
> 此文部分内容参考了：https://github.com/bytedance/IconPark/blob/master/packages/vue-next/README.md