Naive 组件库 动态渲染icon图标

使用Naive组件库默认你已经安装了对应的icon图标库

没有安装的参考链接安装 点击传送

Naive组件动态渲染Icon图标

主要是使用 component Vue内置组件来渲染对应的icon组件, 配合 h 函数来修改图标组件颜色

// 导入你对应的图标库
<template>
	<div
	   v-for='item in list'
	   :key='item.title'
    >
       <component :is="renderIcon(item.icon)"></component>
    </div>
</template>

<script lang="ts" setup>
	import { FireFilled, ArrowUpOutlined, DollarOutlined, LaptopOutlined } from '@vicons/antd'
	import { NIcon } from 'naive-ui'
	import type { Component } from 'vue'
	
	interface List {
	  	title: string;
	    total: number
	    state: string;
	    percent: string;
	    color: string;
	    icon: Component
	}
	// 本示例采用的是自动导入vue3 API
	const list = reactive<List[]>([
	  {
	    title: '访问量',
	    total: 12039,
	    state: 'up',
	    percent: '30%',
	    icon: shallowRef(FireFilled) // 对应的icon 使用 shallowRef 避免组件被设置为响应式对象, 导致不必要的性能开销
	  },
	  {
	    title: '销售额',
	    total: 4039,
	    state: 'up',
	    percent: '30%',
	    icon: shallowRef(DollarOutlined) // 对应的icon
	  },
	])
	// 渲染icon的函数
	function renderIcon(item: List) {
  		return h(NIcon, { size: 24, color: item.color }, { default: () => h(item.icon) })
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46