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

@mdi/font-build

v1.8.10

Published

Material Design Icons webfont builder.

Downloads

312

Vulnerabilities

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

Links

Git

Maintainers

mririgoyenmririgoyenmdi-ownermdi-ownertemplariantemplarianmrgrigrimrgrigripeternoblepeternoblegreenturtwiggreenturtwig

Keywords

Readme

@mdi/font-build

Goal: Build the Material Design Icons SVG icons to a webfont.

Most notably this generates @mdi/font, but is written to allow others to add custom icons or tweak the output.

CLI

By installing @mdi/font-build globally one can generate their own webfont build.

# Install Globally
npm install -g @mdi/font-build
# Reads config from font-build.json
font-build

To run without installing use npx @mdi/font-build

Input

Any version of @mdi/svg v3.9.95+ will work with no changes. For earlier versions copy the font-build.json and update the version: { major: 3, minor: 9, patch: 95 } values.

Download from MaterialDesign-SVG

font-build --help explains all the possible overrides.

Folder Structure

meta.json
font-build.json
svg/
  account.svg
  ...

font-build is ran in the root of this folder.

Output

The output is essentially the @mdi/font package that is released to NPM and the CDN after every release. These are built to target IE11+.

dist/
  css/
    materialdesignicons.css
    materialdesignicons.css.map
    materialdesignicons.min.css
    materialdesignicons.min.css.map
  fonts/
    materialdesignicons-webfont.eot
    materialdesignicons-webfont.ttf
    materialdesignicons-webfont.woff
    materialdesignicons-webfont.woff2
  scss/
    materialdesignicons.scss
    _animated.scss
    _core.scss
    _extras.scss
    _functions.scss
    _icons.scss
    _paths.scss
    _variables.scss
  index.html

Why is the SVG font not generated?

The .svg format is very heavy font format not used by modern browsers, but it can be included. Simply append the --fontSvg flag.

font-build --fontSvg

Request Features

Please let us know if you need any features beyond the current CLI options by opening an issue.

The webfont Package is Amazing!

99% of this is thanks to the https://www.npmjs.com/package/webfont package. They really have done amazing work.