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']
- 1. Create a icons folder in assets: assets/icons
- 2. Drop your icons with the .svg extension into the icons folder
- 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>