Nuxt Feather 图标
Nuxt 3 支持
安装
npx nuxi@latest module add nuxt-feather-icons
使用方法
nuxt.config.js
modules: [
'nuxt-feather-icons'
],
尺寸
默认情况下，图标的大小会根据父元素的字体大小自动调整。
但是，如果您希望自定义尺寸，可以使用 size 属性。对于基于倍数的尺寸调整，请指定所需的倍数，后跟 x。
<XIcon size="1.5x" class="custom-class"></XIcon>
此外，您可以通过简单地传递一个整数来设置像素 (px) 为单位的绝对尺寸。
<XIcon size="30" class="custom-class"></XIcon>
这种灵活性使您可以根据您的特定需求轻松调整图标大小。
<script setup>
const menuItems = ref([
{
icon: resolveComponent('HomeIcon'),
},
{
icon: resolveComponent('UsersIcon'),
},
{
icon: resolveComponent('LayersIcon'),
},
])
</script>
<template>
<ul>
<li v-for="(item, index) in menuItems" :key="index">
<component :is="item.icon" size="2x"/>
</li>
</ul>
</template>
使用 resolveComponent 函数来动态加载图标组件。在模板中，利用
这种方法简化了动态和可重用图标列表的创建，使其非常适合需要多种图标灵活性的菜单或其他组件。