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

mergus-icons

v1.0.0

Published

mergus-icons it's a hard-to-get set of scalable icons commonly used in Argentina

Downloads

2

Readme

#mergus-icons

###Getting started Install the package with:

npm install --save mergus-icons

or

bower install --save mergus-icons

In the < head > of your html, reference the location to your mergus-icons.min.css:

<link rel="stylesheet" href="path/to/build/font/mergus-icons.min.css">

###Usage

All icons require the class mgi as base, followed by the individual icon class. This classes, can be combined with any helper class to style icons.

<i class="mgi mgi-mergus"></i>
<i class="mgi mgi-mergus mgi-lg"></i>

Tip: You can also use the svg files individually, you can find them in the folder /lib/svg .

###Helper classes

  • Larger icons: The class mgi-lg makes the font 33% larger relative to the icon container. mgi-2x, mgi-3x, mgi-4x, mgi-5x make the font x times larger relative to the icon container.

  • Fixed Width Icons: mgi-fw sets icons at a fixed width.

  • List Icons: mgi-ul and mgi-li are used to replace default bullets in unordered lists.

  • Bordered & Pulled Icons: mgi-border creates a border around the icon and it can be combined with mgi-pull-left or mgi-pull-right to make an icon stand out.

  • Animated Icons: mgi-spin makes icons rotate and use mgi-pulse to make the icon rotate with 8 steps.

  • Rotate & Flip: Use mgi-rotate-90, mgi-rotate-180 and mgi-rotate-270 to rotate icons X degrees over itself. Use mgi-flip-horizontal and mgi-flip-vertical to make icons flip horizontally or vertically.

  • Stacked Icons: To stack multiple icons, use the mgi-stack class on the parent, the mgi-stack-1x for the regularly sized icon, and mgi-stack-2x for the larger icon.

  • Inverse color: mgi-inverse makes icons to change its color to white.

  • Accessibility: sr-only allows to add alternative information such as displays and text for screen readers.

You can also change the icons color through CSS, like with any font:

body {
    color: blue;
}

###Request an icon? Yes, sure! Just open an issue with the "new icon" label. The more information and references you leave us, the better!

###License All font files and SVG files are under SIL OFL 1.1 License

All other files are under MIT License

###Credits Based on Octicons and Font Awesome.

###Brand Icons

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Mergus Design, nor vice versa.
  • Brand icons should only be used to represent the company or product to which they refer.