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

eos-icons

v5.4.0

Published

The iconic and open source font made for EOS Design System.

Downloads

755

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

manuelecarlinimanuelecarlinicyntsscyntsskwwiikwwiizmarjanoviczmarjanovicjhmarinajhmarinaricha.bishtricha.bishten3sisen3sis

Keywords

iconicfonteosicons

Readme

Open Source Love svg2 MIT license Website shields.io

EOS icons

EOS icons

Visit the EOS icons website

Visit our Storybook to use the react library in your react project.

An iconic font created for hi-tech open source software.

EOS icons comprises a set of free and open source icons. Handmade, using strict and consistent guidelines and processes, our icons set is an exceptionally scalable and cohesive solution that will boost the user experience in your applications and websites.

Additionally, EOS icons includes all of Material Design icons (*) and solves dozens of conflicting and duplicated icons from it.

If you find any issue let us know by opening an issue.

(*) https://github.com/google/material-design-icons

Migrating from v4 to v5

Go to the migration guidelines to see what changed in V5 and to get a comprehensive list of all icons removed or renamed, together with their new replacement.

Installation guide

npm install eos-icons --save

Using EOS icons in your projects

Add the Fonts and CSS file in your project as follows:

1- Add into your projects <head> the file eos-icons.css which is available inside the folder dist/css:

<link rel="stylesheet" href="assets/eos-icons.css">

or just add CDN and import icons easily :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/eos-icons/dist/css/eos-icons.css" />

2- The file mentioned above will look for the font files which you can find inside the folder dist/fonts and should move to your assets/fonts folder.

3- Use the icons in your html as follows:

<i class="eos-icons"> LIGATURE_OF_THE_ICON</i>

Where the LIGATURE_OF_THE_ICON is the name of the icon. Use our online tool to see the icon's name: https://www.eos-icons.com/.

Using animated icons

1- Download the animated icon of your choice from https://www.eos-icons.com/ and add them into your project.

2- To use them you need to add the img tag in your html.

For example:

<img src="icon.svg" />

See the other animated icons classes in our demo page. Click on the icon you want to use to see the code snippet.

Development of EOS icons

Main dependencies

This project uses Webfont for Grunt to build. More info about the project: https://www.npmjs.com/package/grunt-webfont

We use Fontforge to render our icons since the quality is better than using plain node, and it supports Ligatures. Our icons follow Google Material Icons guidelines one-to-one. This is the main reason for us to use ligatures as well. We made a perfectly compatible icon font for those already using MD icons. If you want to know more about all the standards we follow for the EOS, visit our public wiki, which is our main internal guideline: https://gitlab.com/SUSE-UIUX/eos/wikis/home

Installing dependencies

  • Clone this repository and go to the folder:
git clone [email protected]:SUSE-UIUX/eos-icons.git
cd eos-icons
  • Make sure you have NODE.js installed, if not:
brew install node
  • Install Grunt globally:
npm install -g grunt-cli
  • Install npm dependencies:
npm install

Install Fontforge:

On OSX

brew install ttfautohint fontforge --with-python

You will need to have Xcode installed. First install the command line tool:

xcode-select --install

And then download the latest version from:

https://developer.apple.com/xcode/

  • On Linux
sudo apt-get install fontforge ttfautohint

Design and add your SVG icons

Add your icons into the svg/ folder. All our icons have been designed with Illustrator, but designing with any tool like Inkscape will work just fine, just make sure to export the SVG code is as clean as possible.

Have a look at our guidelines on how to design icons.

SVG file names with more than one word in it should not have a minus character separating the words (e.g.: some-name.svg), instead, use an underscore (e.g.: some_name.svg). The use of spaces in the filename also creates conflicts in the resulting iconic font.

Once you have the svg ready inside the svg/ folder, all you need to do, is run

grunt

This will build the assets under the dist/ folder. Open the demo file in dist/demo.html to see the results.

We recommended sizes MD icons use: 18, 24, 36, and 48 pixels, plus 16px which is our minimum allowed size at EOS Design System.

That's it!!.. easy as pie

Our "thank you" section

Tested for every browser in every device

Thanks to browserstack and their continuous contribution to open source projects, we continuously test the EOS to make sure all our features and components work perfectly fine in all browsers. Browserstack helps us make sure our Design System also delivers a peace of mind to all developers and designers making use of our components and layout in their products.