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

webfont-generator-cli

v1.0.9

Published

Generate webfont from svgs

Downloads

32

Vulnerabilities

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

Links

Git

Maintainers

leonardjouveleonardjouve

Keywords

webfontfontsvgfontellocli

Readme

webfont-generator-cli

Convenient CLI to generate webfonts and css helper classes from SVGs.

Uses fontello API.

Preview

image

Installation

Install with NPM

npm i webfont-generator-cli --save-dev

Remove

npm remove webfont-generator-cli

Usage

Generate the webfont and css files

  • FROM: SVGs located in the icons folder | Path can be changed with --icons option
  • TO: webfont | Path can be changed with --out option

npx webfont-generator

Help

Get a list of the available options

npx webfont-generator-cli --help

Icons

Set the path to the SVGs folder (DEFAULT icons)

npx webfont-generator-cli --icons path_to_your_svgs

Out

Set the path of the output directory containing the font and CSS files (DEFAULT webfont)

npx webfont-generator-cli --out path_to_the_output_folder

Use the webfont

There are two different ways to use it

Import the webfont directly in your CSS

The font can be found to the following format on the output directory (DEFAULT webfont) inside the font subdirectory.

  • .eot
  • .svg
  • .ttf
  • .woff
  • .woff2

Import premade CSS file including a helper class for every icon

Premade CSS file can be found on the output directory (DEFAULT webfont) inside the css subdirectory.

webfont.css includes the required helpers class for all of your icons.

After importing the stylesheet, you can use the icon-{svg-file-name} class pattern to automatically render your icon inside a ::before pseudo-element

Styling

You can use the [class^="icon-"]:before, [class*=" icon-"]:before CSS selector to override any predefined styles as needed.

Example

npm i webfont-generator-cli --save-dev

my-icons
    - close.svg
    - profile.svg
index.html

Every SVG must have a viewBox attribute.

npx webfont-generator --icons my-icons --out my-webfont

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./my-webfont/css/webfont.css">
  </head>
  <body>
        <i class="icon-profile"></i>
        <i class="icon-close"></i>
    </body>
</html>

image