📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP
Socket
Sign inDemoInstall
Socket

nuxt-tailwind-heroicons

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-tailwind-heroicons

Nuxt.js package for Tailwind Heroicons

1.0.4
latest
Source
npm
Version published
Weekly downloads
7
-22.22%
Maintainers
2
Weekly downloads
 
Created
Source

Nuxt Heroicons

Heroicons version used : v2.0.14

Use easily the awesome library Heroicons in your Nuxt project. (Nuxt 2 & Nuxt 3 compatible).

Install

Install by running the following command with your favorite package manager

npm install --save nuxt-tailwind-heroicons 
or
yarn install --save nuxt-tailwind-heroicons

Configuration

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'
  ]
}

Usage

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"/>

Exemple

<template>
  <section>
    <!-- Outline -->
    <hero-outline-academic-cap />
    
    <!-- Solid -->
    <hero-solid-academic-cap />
    
    <!-- Mini -->
    <hero-mini-academic-cap />
  </section>
</template>

And now enjoy ! 🚀

Contribute

Open a pull request or issue if you have any recommendation.

Licence

This project is licensed under the terms of the MIT open source license. Please refer to LICENSE for the full terms.

Keywords

Nuxt.js

FAQs

Package last updated on 08 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts