npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-icons

v3.2.1

Published

[![nuxt-icons](https://i.imgur.com/67g6UGS.png "nuxt-icons banner")](https://github.com/gitFoxCode/nuxt-icons) # Nuxt Icons A module for Nuxt 3 that allows you to use your own SVG icons quickly and enjoyably.

Downloads

49,512

Readme

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">

I don't like the basic styles that are assigned to the icons!

The styles that have been created for the icons look as follows:

width: 1em;
height: 1em;
margin-bottom: 0.125em;
vertical-align: middle;

You can easily change these styles using regular CSS for example in your index.vue file:

<style>
.nuxt-icon svg{
  margin-bottom: 0;
}
</style>

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)
  • If a lot of the same icons are used on the page create a separate svg sprite (significant improvement in performance)

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