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 函式動態載入圖示元件。在範本中，利用
這種方法簡化了動態和可重複使用圖示清單的建立，使其非常適合需要多個圖示的選單或其他元件。