nuxt-local-iconify
v0.1.1
Published
[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href]
Downloads
11
Readme
Nuxt Local Iconify
Module for enjoing iconify and nuxt-icon with your local icons for doing amazing things.
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
# 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