Nuxt Local Iconify

Nuxt Icon now support local icons. See.

Module for enjoing iconify and nuxt-icon with your local icons for doing amazing things.

• ✨  Release Notes

Features

• 🩵 Support monotone icons for correct working with currentColor
• 🎨 Support colorized icons
• 🥳 Ready for using with nuxt-icon

Quick Setup

Install the module to your Nuxt application with one command:

npm install --save-dev nuxt-local-iconify

# Using yarn
yarn add --dev nuxt-local-iconify

# Using pnpm
pnpm add --save-dev nuxt-local-iconify

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  modules: [
    "nuxt-icon", // If you use nuxt-icon to work with iconify
    "nuxt-local-iconify",
  ],
});

Example usage with nuxt-icon

Suppose you have an icon in ~/assets/icons/monotone/abc.svg:

<Icon name="local:abc" color="red" />

Or colorized icon in ~/assets/icons/color/twitch.svg:

<Icon name="local-color:twitch" />

That's it! You can now use Nuxt Local Iconify in your Nuxt app ✨

Configuration

By default Nuxt Local Iconify look for icons in ~/assets/icons directory. For monoton icons it looks in ~/assets/icons/monotone and for colorized icons in ~/assets/icons/color.

You can change this behavior by providing custom configuration with the localIconify.iconPath option.

If you want to change iconify prefix you can use localIconify.prefix option. You will get your-prefix:icon-name as icon name and your-prefix-color:icon-name for color icons.

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release