Nuns Practicing Misanthropy

    nuxt-icon
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.8 • Public • Published

    nuxt-icon

    Nuxt Icon

    npm version License npm downloads

    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

    Keywords

    none

    Install

    npm i nuxt-icon

    DownloadsWeekly Downloads

    3,510

    Version

    0.1.8

    License

    MIT

    Unpacked Size

    9.28 kB

    Total Files

    9

    Last publish

    Collaborators

    • atinux