【vue3+ts】引入incopark图标，及动态组件componet渲染字体图标

1、iconpark官网地址iconpark官网地址跳转

npm i @icon-park/vue-next -S

如果只是使用单个或者是少量的图标，直接使用的方式：

import {Camera} from '@icon-park/vue-next'//引入字体图标，首字母大写

模板区直接使用

<template>
<div>
<Camera size="32" fill="#f60">
<div/>
<template/>

如果需要在数组中循环使用且是有规律的使用，比如菜单导航栏，图标加文字的效果

可以封装公共组件，新建iconpark.vue

<script setup lang="ts">
import {ref,defineProps} from 'vue'

const {icon,size,fill} = defineProps<{
icon:any,
size?:number|string,
fill?:string|string[]
}>()

</script>

<template>
<div>
<component :is="icon" :size="size" :fill="fill">
//在 JavaScript 中，大小写不敏感是一种常见的语法规则。因此，无论使用大写字母还是小写字母来引用组件//名称，JavaScript 都会将它们解释为相同的标识符，即组件的名称。在 Vue 中，动态组件的渲染通过使用 //component 标签，并将组件的名称传递给其 is 属性来实现，因此大小写不敏感不会影响动态组件的渲染。
<!-- <Component :is="icon" :size="size" :fill="fill" /> -->

<div/>
<template/>
<style scoped>
</style>

新建useMenu.ts,处理菜单数据

import {Camera,Music,Videoone,Like,Song,Download} from '@icon-park/vue-next'//引入字体图标，首字母大写
interface IMenu {
name:string;
key:string;
icon?:any;
}

interface IMenus {
nameLstring,
menus:IMenu[]
}
export function useMenu(){
const menus :IMenus[] = [{
name:'在线音乐',
menus:[
{
name:'推荐',
key:'recommend',
icon:Camera,
},
{
name:'音乐馆',
key:'music',
icon:Music,
},
{
name:'视频',
key:'audio',
icon:Videoone,
},
]
},{
name:'我的音乐',
menus:[
{
name:'我喜欢',
key:'recommend',
icon:Like,
},
{
name:'本地歌曲',
key:'localsong',
icon:Song,
},
{
name:'下载歌曲',
key:'download',
icon:Download,
},
]

}

];
return {
menus
}
}

在页面中使用

<script setup lang="ts">
import {ref} from 'vue'
import Iconpark from '@/component/iconpark'
import {useMenu} from './useMenu'//引入useMenu函数
const {menus} = useMenu()//调用useMenu函数
</script>

<template>
<div v-for="(item,i) in menus" :key="i">
<div >{{item.name}}<div/>
<div v-for="menu in item.menus" :key="menu.key">
 
  <router-link :to="{name:menu.key}">
  <Iconpark :icon="menu.icon"></Iconpark >
{{menu.name}}</router-link>
<div/>
<div/>
<template/>

<style scoped>

</style>

2、动态组件component
vue3官网vue官网跳转

在 Vue 中使用动态组件时，可以使用 元素配合 is 属性来实现。这个 元素可以根据所提供的组件名字动态地渲染不同的组件。

Vue.component('ComponentA', {
  template: '<div>This is Component A</div>'
})

Vue.component('ComponentB', {
  template: '<div>This is Component B</div>'
})

<component :is="componentName"></component>

componentName 是一个在 Vue 实例中定义的数据属性，它包含要渲染的组件名字。当 componentName 更新时， 元素会自动重新渲染，并动态地加载对应的组件.

例如：如果 componentName 的值是 ‘ComponentA’，那么就会渲染 ComponentA 组件，结果就是会显示 “This is Component A”。如果 componentName 的值是 ‘ComponentB’，则会渲染 ComponentB 组件，结果会显示 “This is Component B”。
可以通过改变 componentName 的值来触发动态组件的切换，从而实现根据不同的条件渲染不同的组件。这种方式非常适用于动态加载路由组件、根据用户权限动态显示不同的组件等场景