目录

一、安装

 二、引用

1.在miain.js中引入样式文件

 2.在所需组件中引入

三、按需引入

四、相关链接

一、安装

Vue3版本使用下面命令：

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

Vue2版本使用下面命令：

npm install @icon-park/vue --save

其他版本如图：

 二、引用

1.在miain.js中引入样式文件

Vue3中：

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

Vue2中(可在node_modules找到路径)：

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

 2.在所需组件中引入

1.在官网：ByteDance IconPark (oceanengine.com) 挑选所需图标，在线配置，复制代码

2.别忘了使用 import 导入，然后才能使用

<script setup>
// 引入Search图标
import {Search} from '@icon-park/vue-next'

</script>

<template>
<search theme="outline" size="48" fill="#e50916" strokeLinejoin="bevel" strokeLinecap="square"/>
</template>

三、按需引入

  可以使用babel-plugin-import来按需加载图标，配置如下:

npm install babel-plugin-import -D

在Vite.config.js中配置如下代码：

{
    "plugins": [
        [
            "import",
            {
                libraryName: '@icon-park/vue',
                libraryDirectory: 'es/icons',
                camel2DashComponentName: false // default: true,
            }
        ]
    ]
}

注意：这里配置的“按需加载”只是对图标组件代码，如果你需要用到图标组件包中提供的预设样式文件，依然需要在你的项目中手动引入！！

完成之后就可以在项目中需要的地方引入使用了

四、相关链接

        使用指南：IconPark 使用指南 - 公开版 - 飞书云文档 (larkoffice.com)

        官网：ByteDance IconPark (oceanengine.com)