irishkooky / icon

The <Icon> component, supporting Iconify, Emojis and custom components.

Home Page:https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

nuxt-icon

Nuxt Icon

npm version License npm downloads Volta board

Icon module for Nuxt with 100,000+ ready to use icons from Iconify.

Features ✨

  • Nuxt 3 ready
  • Support 100,000 open source vector icons via Iconify
  • Emoji Support
  • Custom SVG support (via Vue component)

Setup ⛓️

Add nuxt-icon dependency to your project:

npm install --save-dev nuxt-icon

# Using yarn
yarn add --dev nuxt-icon

Add it to the modules array in your nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

That's it, you can now use the <Icon /> in your components!

✨ If you are using VS Code, you can use the Iconify IntelliSense extension by @antfu

Usage πŸ‘Œ

Props:

  • name (required): icon name, emoji or global component name
  • size: icon size (default: 1em)

Iconify dataset

You can use any name from the https://icones.js.org collection:

<Icon name="uil:github" />

Emoji

<Icon name="πŸš€" />

Vue component

<Icon name="NuxtIcon" />

Note that NuxtIcon needs to be inside components/global/ folder (see example).

Configuration βš™οΈ

To update the default size (1em) of the <Icon />, create an app.config.ts with the nuxtIcon.size property.

You can also define aliases to make swapping out icons easier by leveraging the nuxtIcon.aliases property.

// app.config.ts
export default defineAppConfig({
  nuxtIcon: {
    size: '24px', // default <Icon> size applied
    aliases: {
      'nuxt': 'logos:nuxt-icon',
    }
  }
})

The icons will have the default size of 24px and the nuxt icon will be available:

<Icon name="nuxt" />

Render Function

You can use the Icon component in a render function (useful if you create a functional component), for this you can import it from #components:

import { Icon } from '#components'

See an example of a <MyIcon> component:

<script setup>
import { Icon } from '#components'

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>

Contributing πŸ™

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Run npm run dev:prepare to generate type stubs.
  4. Use npm run dev to start playground in development mode.

Credits πŸ’Œ

License πŸ“Ž

MIT License

About

The <Icon> component, supporting Iconify, Emojis and custom components.

https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

License:MIT License


Languages

Language:Vue 74.8%Language:TypeScript 25.2%