vue3项目搭建连载文章(7)-IconPark字节图标库

推荐说明

之前在项目中使用fontawesome图标库. 感觉不好用。 IconPark清爽的设计风格。 全面的icon支持一下就吸引到我。 所以记录一下在vue3+vite+ts前端架构中如何使用这个图标库。

IconPark官网地址

安装说明

• cd切换到项目路径

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

• main.ts中引入

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

• 页面使用--按需引用

<template>

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

</template>
<script setup lang='ts'>
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>
<style lang='less' scoped></style>