vue IconPark 图标 的使用

iconPark地址：ByteDance IconPark

首先： 安装依赖

npm i @icon-park/vue

其次：在页面中引入

import { Camera,Video,Fm,Piano} from "@icon-park/vue-next";  // 引入字体图标

其中的花括号中的 内容为：图标库中的图标的名字

IconPark 引入的图标是一个组件，所以使用的时候：通过vue中的内置组件component,配合is,来展示不同的图标。

<script setup lang="ts">
// 定义一个公共的组件,用于处理图标
import { ref,defineProps } from 'vue'

const {icon,size,fill }= defineProps<{  // 通过 TS的泛型  定义接收的数据类型
    icon:any,
    size?:number|string, // size 可选参数，类型为 字符串或数值
    fill?:string| string[] // fill 可选参数，类型为 字符串或字符串类型的数组
}>()
</script>

<template>
    <!-- component 是vue的内置组件，:is可以动态展示不同的组件 -->
     <component :is='icon' :size='size' :fill="fill"></component> 
   
</template>