Skip to content

An easy way to integrate Feather Icons with NuxtJS

License

Notifications You must be signed in to change notification settings

nuxtclub/feathericons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@nuxtclub/feathericons

Setup

  1. Add @nuxtclub/feathericons dependency to your project
npm i -D @nuxtclub/feathericons
  1. Add @nuxtclub/feathericons to the buildModules section of nuxt.config.js

⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

export default {
	buildModules: ['@nuxtclub/feathericons'],
}

Typescript support

Add the types to your "types" array in tsconfig.json after the @nuxt/types entry.

⚠️ Use @nuxt/vue-app instead of @nuxt/types for nuxt < 2.9.

{
	"compilerOptions": {
		"types": ["@nuxt/types", "@nuxtclub/feathericons"]
	}
}

Usage

This module will inject $feathericons in the context of your application.

Using $feathericons you can access to an object with all the icons of the Feather Icons Package.

Example

<template>
	<div v-html="$feathericons['home'].toSvg()"></div>
</template>

Learn more about Feather Icons here.