Vue3+Vite引入 IconPark图标以及按需引入

最新推荐文章于 2024-05-23 14:43:39 发布

hpz1223

最新推荐文章于 2024-05-23 14:43:39 发布

阅读量3k

点赞数 10

分类专栏： Vue 文章标签： javascript vue.js ecmascript

本文链接：https://blog.csdn.net/qq_54140719/article/details/136587545

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue3和Vue2项目中安装和引用IconPark图标库，包括全局引入样式和在组件中使用，以及如何通过babel-plugin-import实现按需加载。还提供了相关链接以获取更多帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装

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,
            }
        ]
    ]
}

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

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

官网：ByteDance IconPark (oceanengine.com)