Heroicons version used : v2.0.14
Use easily the awesome library Heroicons in your Nuxt project. (Nuxt 2 & Nuxt 3 compatible).
Install by running the following command with your favorite package manager
npm install --save nuxt-tailwind-heroicons
or
yarn install --save nuxt-tailwind-heroicons
Add the package in nuxt.config.[js, ts]
For Nuxt 3
export default defineNuxtConfig({
modules: [
'nuxt-tailwind-heroicons'
]
})
For Nuxt 2
export default {
buildModules: [
'nuxt-tailwind-heroicons'
]
}
Prefix of icons is <hero-
. You can use it at :
<hero-type-name/>
type
can be : "solid", "outline" or "mini"name
is equal to the icon name separate with "-"
You can see all icons' name here.
You can use Tailwind CSS class directly on component
<hero-outline-x-mark class="w-4 h-4 text-slate-600"/>
<template>
<section>
<!-- Outline -->
<hero-outline-academic-cap />
<!-- Solid -->
<hero-solid-academic-cap />
<!-- Mini -->
<hero-mini-academic-cap />
</section>
</template>
Open a pull request or issue if you have any recommendation.
This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.