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

@innotec/workshop-glyphs

v1.1.1

Published

All Innotec Workshop Glyphs

Downloads

19

Vulnerabilities

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

Links

Git

Maintainers

pablo.barrosopablo.barrosomwiesmuellermwiesmuellerbernhardmaierbernhardmaier

Keywords

Readme

workshop-glyphs

This project contains the vector graphics and the created fonts (icons) used by the werbasinnotec webprojects.

Structure

svg-icons

is the folder containing all the original vector graphics in SVG-Format (note that this folder is not obligatory added to the werbasinnotec projects once we want to use/reference the existing icons in our code).

rendered

is the folder containing the complete font package generated from the fonts plateforme https://icomoon.io/app/#/select/font which is used to render the fonts as following formats

  • svg
  • wof
  • eot
  • ttf

/!\ Note: this folder is the only one needed to be included into the webproject/src/assets/ with a folder name /workshopfonts/ insteread of /rendered/

What's included?

Once you want to check the work on the werbasinnotec/workshop-glyphs then please clone this repo and open the file rendered/demo.html in your favorite webbrowser to get all glyphs listed with their css class-names.

/!\ Note: the css class-names used in order to reference the icons in our source code could have multiple sub-elements, as it is the case with the icon-NEW-ICON, due to the svg layer concept, for example:

Do you want to add new Icons?

Once you would like to add a new svg icon to the existing icon collection, then just:

  1. Navigate to https://icomoon.io/app/#/projects
  2. Click on the appropriate project to extend its icon collection, in our case, it is werbasinnotec
  3. Click on load. Then once the existing icons are listed, you can (un)select from them. The number of selected icons in from the package will be displayed in the bottom of the page.
  4. Click on Generate Font in order to list all the current package/project contained icons, with their visual output as their principal class-name.
  5. Before you download the icons package be sure that the icons are well defined, regarding their images dimension (if not you can select and edit the scale, color ..etc) but also their Tags and names and other functionalities will be available on the same page https://icomoon.io/app/#/select/font.
  6. Once you are satisfied with the current icons package content then click on Downmload from the page https://icomoon.io/app/#/select/font
  7. The folder you have dowloaded is the new folder rendered. Its content is supposed to be stored into the src/assets/workshopfonts/
  8. That's all. Now you can reference the icons the way it is done inside the src/assets/workshopfonts/demo.html
  9. Enjoy!

Useage

  1. Download the fonts from https://github.com/werbasinnotec/workshop-glyphs/tree/master/rendered/fonts and place it into a folder of your webproject called font
  2. Download the stylesheet from https://github.com/werbasinnotec/workshop-glyphs/blob/master/rendered/style.css.
  3. link to the stylesheet from your website: eg. like this:
...
<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>
...
  1. Add your fonts at the desired places inside your html-code eg. via <span class="icon-sparkplug"></span> to add the icon of a spark plug.
  2. As long as the font is monochrome, it will adapt your color-settings from your own css. Eg. if you have hyperlinks in blue, these glyphs will get blue es well, if their span is inside a hyperlink-tag.