Nuxt Icon

Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.

• ✨  Release Notes
• 🏀  Online playground

Features ✨

• Nuxt 3 ready
• SSR friendly
• Support 200,000 open-source vector icons via Iconify
• Support both CSS mode / SVG mode
• Custom SVG support (via Vue component, or via local SVG files)

> [!NOTE] > You are viewing the v1.0 version of this module, which is a complete rewrite for a better developer experience and performance. If you are migrating from v0.6, please check this PR for the full list of changes.

Setup ⛓️

Run the following command to add the module to your project:

npx nuxi module add icon

That's it, you can now use the `` in your components!

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

npm i -D @nuxt/icon

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

Usage 👌

Props:

• name (required): icon name or global component name
• size: icon size (default: 1em)
• mode: icon rendering mode (svg or css, default: css)

Attributes:

When using an icon from Iconify, an <span> or <svg> will be created based on the rendering mode, you can give all the attributes of the native element.

Iconify Dataset

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

It supports the i- prefix (for example, i-uil-github).

It's highly recommended to install the icon data locally with

npm i -D @iconify-json/collection-name

For example, to use the uil:github icon, install it's collection with @iconify-json/uil. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.

> [!NOTE] > You may also know you can install @iconify/json package to include all iconify icons. This is not recommended because it will increase your server bundle size and building performance. If you choose to do so, we'd recommend to explicitly specify the collection names you need: > > ts > export default defineNuxtConfig({ > modules: ['@nuxt/icon'], > icon: { > serverBundle: { > collections: ['uil', 'mdi'] // > > > > > >

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 `` component:

</svg><p></p>

Contributing 🙏

1. Clone this repository
2. Install dependencies using pnpm install (install pnpm with corepack enable, learn more)
3. Run npm run dev:prepare to generate type stubs.
4. Use npm run dev to start playground in development mode.

Credits 💌

• @benjamincanac for the initial version
• @cyberalien for making Iconify

License 📎

MIT License