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 函数动态加载图标组件。在模板中，使用
这种方法简化了动态和可重用图标列表的创建，使其非常适合需要多个图标的菜单或其他组件。