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

svg-icon

v0.8.2

Published

an ultimate svg icons collection done right

Downloads

2,580

Readme

svg-icon

An ultimate svg icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.

Homepage

Download

You can download as many SVG icons as you need in homepage, or download the whole collection via npm:

npm install svg-icon --save

custom element

files:

dist/
    ├── svg-icon-element.js
    └── svg-icon-element.css

usage:

<svg-icon url="http://leungwensen.github.io/svg-icon/dist/sprite/symbol/logos.svg" type="si-logos-javascript"></svg-icon>

limitation:

use it locally

# clone the project
git clone https://github.com/leungwensen/svg-icon.git
# install dependencies
cd svg-icon
npm i
# startup a local server
gulp

SVG icon collections

name | id prefix | source | supported ----|----|----|---- ant-design | ant- | http://ant.design/#/components/icon | yes bootstrap | bootstrap- | https://github.com/twbs/bootstrap | yes devicons | dev- | https://github.com/vorillaz/devicons | yes elusive-iconfont | elusive- | https://github.com/reduxframework/elusive-iconfont | yes entypo | entypo- | https://github.com/danielbruce/entypo | yes evil-icons | evil- | https://github.com/outpunk/evil-icons | yes flag-icon | flag- | https://github.com/lipis/flag-icon-css | yes flat-ui | flat- | https://github.com/designmodo/Flat-UI | yes font-awesome | awesome- | https://github.com/FortAwesome/Font-Awesome | yes foundation | foundation- | https://github.com/zurb/foundation-icon-fonts | yes game-icons | game- | https://github.com/game-icons/icons | yes geomicons-open | geom- | https://github.com/jxnblk/geomicons-open | yes icomoon-free | icomoon- | https://github.com/Keyamoon/IcoMoon-Free | yes ioncons | ionic- | https://github.com/driftyco/ionicons | yes maki | maki- | https://github.com/mapbox/maki | yes map-icons | map- | https://github.com/scottdejonge/map-icons | yes material-design | material- | https://github.com/google/material-design-icons | yes metro-ui-css | metro- | https://github.com/olton/Metro-UI-CSS | yes mfglabs-iconset | mfglabs- | https://github.com/MfgLabs/mfglabs-iconset | yes octicons | oct- | https://github.com/primer/octicons | yes open-iconic | open- | https://github.com/iconic/open-iconic | yes payment-font | payment- | https://github.com/vendocrat/PaymentFont | yes payment-webfont | payment-web- | https://github.com/orlandotm/payment-webfont | yes semantic-ui | (oct-/awesome-) | https://github.com/Semantic-Org/Semantic-UI/ | yes simple-icons | simple- | https://github.com/danleech/simple-icons | yes subway | subway- | https://github.com/mariuszostrowski/subway | yes typicons | typcn- | https://github.com/stephenhutchings/typicons.font | yes weather-icons | weather- | https://github.com/erikflowers/weather-icons | yes windows-icons | windows- | https://github.com/Templarian/WindowsIcons | yes zero | zero- | src/zero | yes zocial | zocial- | https://github.com/smcllns/css-social-buttons | yes logos(svg porn) | logos- | http://svgporn.com | yes

Need more? Please leave an issue or a pull request.

Build your own collection

1. Install svg-icon via npm:

npm install svg-icon -g

2. Define a collection file (JSON format, demo)

3. Build it:

svg-icon build --source $path/to/icons.json --target $path/to/dest --name wow

Now you have a SVG sprite file and a demo page.

$path/to/dest/wow/
    ├── index.html
    └── svg-symbols.svg

Contribute

How did you collect all these SVG icons?

There are basically two kinds of icon collections, ones with SVG source files, and others with only icon fonts.

  • Those with SVG source files: I simply copy the icons to the dest folder, optimise them, trim the pads around every icon, and build an SVG sprite file from them.
  • Those with icon fonts: I need to separate every icon from a combined SVG font file(locating, transforming, etc.), optimise them, trim them, and build an SVG sprite.

So the data flow is like:

Sources(SVG icons/icon fonts) ---separating/copying---> SVG icons ---optimising---> mid products(dist/svg/*) ---trimming---> final products(dist/trimmed-svg/*) ---building---> SVG sprite

Is the contributing toolchain ready for me?

Yes, and no.

The collection of 10,000+ SVG icons is mostly collected by nodejs scripts(check out these folders for details bin/, gulp and lib ). But I still have to write some code when I want to add icons from a new vendor into this project, because of the uncertainty of icon collections.

If you are familiar with nodejs and SVG, and interested in making this collection more useful, please leave a PR. Feel free to contact me if you have any question.

Of course, the quickest way to add your favorite icons here is to leave an issue, and let me do the rest for you ;-).

References

Projects inspired svg-icon

Projects powered svg-icon

  • svgo: transforming and optimizing SVG icons would be impossible without this awesome project.
  • vinyl-fs: gulp and vinyl-fs helped me to process large amount of files without any pain.
  • phantomjs: it is the answer of lots of problems.
  • a lot more

Known issues