npm private modules

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

    3.0.0 • Public • Published

    nuxt-icons

    Nuxt Icons

    A module for Nuxt 3 that allows you to use your own SVG icons quickly and enjoyably.

    playground-usage

    Installation

    1. npm i nuxt-icons
    2. add nuxt-icons to modules, nuxt.config.ts:
    export default defineNuxtConfig({
        modules: ['nuxt-icons']
    })

    Usage

    1. Create a icons folder in assets: assets/icons
    2. Drop your icons with the .svg extension into the icons folder
    3. In the project, use <nuxt-icon name="">, where name is the name of your svg icon from the folder

    If you need to use the original color from the svg file (for example, if your icon has defs) you need to use the filled attribute:
    <nuxt-icon name="mySuperIcon" filled />

    Subfolders

    If you would like to use some more complicated folder arrangement you will have to use paths from /icons

    If you have a svg icon in nested directories such as:

    📁icons
      └📁admin
      ⠀⠀└ badge.svg
      └📁user
      ⠀⠀└ badge.svg
    

    then the icons's name will be based on its own path directory and filename. Therefore, the icon's name will be:

    <nuxt-icon name="admin/badge"> and <nuxt-icon name="user/badge">

    What this module does

    The module retrieves all svg files from the assets/icons folder, overwrites the height and width from them to make them scalable, and using the <nuxt-icon> component allows them to be used. <nuxt-icon> injects the SVG code directly into <span>.

    Features

    • Easy SVG icon management
    • HMR (You don't have to reset the project to reload the icons)
    • Ability to manipulate icons just like fonts, e.g. using color, font-size instead of fill,width,height
    • Ability to use the original color scheme for complex icons using the filled attribute
    • Icon only loads if used

    Development

    • Run npm run dev:prepare to generate type stubs.
    • Use npm run dev to start playground in development mode.

    Thoughts and ToDo's:

    • Automatic svg file optimization
    • Automatic icon scaling that have non-square dimensions to maintain their proportions (maybe with preserveAspectRatio)
    • Usable for previous nuxt versions (just use something like this)

    A big thank you to @Diizzayy for his invaluable help in developing the project

    Install

    npm i nuxt-icons

    DownloadsWeekly Downloads

    1,012

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    5.86 kB

    Total Files

    8

    Last publish

    Collaborators

    • npmfoxcode