Nuxt Feather Icons
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 函數來動態載入圖示組件。在範本中，利用
這種方法簡化了動態且可重複使用圖示列表的建立，使其非常適合需要多個圖示彈性的選單或其他組件。