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 tag and specify the corresponding icon using the :is property.

This approach simplifies the creation of dynamic and reusable icon lists, making it ideal for menus or other components requiring flexibility with multiple icons.

⚖️ License

Released under MIT by @4slan.