Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adinvadim/nuxt-local-iconify
https://github.com/adinvadim/nuxt-local-iconify
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/adinvadim/nuxt-local-iconify
- Owner: adinvadim
- Created: 2024-04-21T12:10:28.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-10-22T13:19:22.000Z (3 months ago)
- Last Synced: 2024-11-02T17:26:12.668Z (2 months ago)
- Language: TypeScript
- Size: 112 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Nuxt Local Iconify
Nuxt Icon now support local icons. [See](https://github.com/nuxt/icon/issues/19#issuecomment-2091935313).
[![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]
Module for enjoing iconify and nuxt-icon with your local icons for doing amazing things.
- [✨ Release Notes](/CHANGELOG.md)
## Features
- 🩵 Support monotone icons for correct working with currentColor
- 🎨 Support colorized icons
- 🥳 Ready for using with [nuxt-icon](https://github.com/nuxt-modules/icon)
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npm install --save-dev nuxt-local-iconify
# Using yarn
yarn add --dev nuxt-local-iconify
# Using pnpm
pnpm add --save-dev nuxt-local-iconify
```
```typescript
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`:
```vue
```
Or colorized icon in `~/assets/icons/color/twitch.svg`:
```vue
```
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
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-local-iconify/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-local-iconify
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-local-iconify.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-local-iconify
[license-src]: https://img.shields.io/npm/l/nuxt-local-iconify.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-local-iconify
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com