Nuxt Feather Icons
Support for Nuxt 3
Install
npx nuxi@latest module add nuxt-feather-icons
Usage
nuxt.config.js
modules: [
'nuxt-feather-icons'
],
Sizing
Icons are automatically sized based on the font size of the parent element by default.
However, if you wish to customize the size, you can use the size attribute. For sizing based on multiples, specify the desired multiple followed by an x.
<XIcon size="1.5x" class="custom-class"></XIcon>
Additionally, you can set an absolute size in pixels (px) by simply passing an integer.
<XIcon size="30" class="custom-class"></XIcon>
This flexibility allows you to easily adjust the icon size according to your specific needs.
<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>
Use the resolveComponent function to dynamically load icon components. In the template, leverage the
This approach simplifies the creation of dynamic and reusable icon lists, making it ideal for menus or other components requiring flexibility with multiple icons.