Modules UINuxt Icons
Nuxt Icons

Nuxt Icons

Use your own automatically imported SVG icons

Installation

npm i nuxt-icons

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['nuxt-icons']
Usage
  1. 1. Create a icons folder in assets: assets/icons
  2. 2. Drop your icons with the .svg extension into the icons folder
  3. 3. In the project, use <NuxtIcon name="" />, where name is the name of your svg icon from the folder

If you need to use the original color from the svg file (for example, if your icon has defs) you need to use the filled attribute: <nuxt-icon name="mySuperIcon" filled />

Demo

Icons.vue
<template>
  <NuxtIcon name="home" />
  <NuxtIcon name="tech/html" filled />
</template>