Icon module for Nuxt with 100,000+ ready to use icons from Iconify.
- Nuxt 3 ready
- Support 100,000 open source vector icons via Iconify
- Emoji Support
- Custom SVG support (via Vue component)
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
Props:
name
(required): icon name, emoji or global component namesize
: icon size (default:1em
)
You can use any name from the https://icones.js.org collection:
<Icon name="uil:github" />
<Icon name="🚀" />
<Icon name="NuxtIcon" />
Note that NuxtIcon
needs to be inside components/global/
folder (see example).
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" />
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>
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Run
npm run dev:prepare
to generate type stubs. - Use
npm run dev
to start playground in development mode.
- @benjamincanac for the initial version
- @cyberalien for making Iconify