Icons - Templarian (Page 3)

Material Design Icons v2.3.50

Note: v2.3.50 was unpublished due to a bug and replaced by v2.3.54.

Please read the release notes for: v2.3.54

The v2.3.50 release was out for less an hour before being unpublished and only affected the @mdi/svg package. All other packages including @mdi/font were unaffected.

Scripting with NodeJS and Material Design Icons

The team has been active working on building out scripts to generate helper libraries for various uses of Material Design Icons. This got me to thinking it might be useful to share how easy these scripts can be to write.

Goal: Write a NodeJS script that takes the @mdi/svg package and converts it into a easy to view preview.html.

I picked this since it accesses the meta.json (this contains all the meta information about each icon, like tags, aliases, etc.) and in the end generates a single html file.

Prerequisites

Empty Folder named "preview"
NodeJS Installed (for npm command line)
Visual Studio Code (or another editor, but my examples will use this)

The NodeJS command line will allow us to pull down some helper scripts and execute our build.js we'll be writing.

NPM Init

The first step will require you to open a command line of your choice (CTRL+tilde in VS Code).

Run npm init in your /preview folder
Press enter a few times to accept all the defaults.
Run npm install @mdi/svg @mdi/util

Awesome, you will now see a folder called node_modules this contains a copy of the latest version of the SVG's and the meta.json file.

Note: If you want to see the meta.json open it and then run CTRL+P followed by typing format. This will format the JSON file.

Creating the Build Script

The build.js file is below. We'll break down what each part does and what the @mdi/util provides.

const util = require('@mdi/util');

const fileName = "./preview.html";
const version = util.getVersion();
const meta = util.getMeta(true); // withPaths

const body = meta.map(icon => `
  <span onClick="a('${icon.name}')"
        title="${icon.name}">
    <svg viewBox="0 0 24 24">
      <path d="${icon.path}" />
    </svg>
  </span>
`).join('');

const template = `
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Material Design Icons - Preview</title>
    <style>
      svg { width: 24px; height: 24px }
    </style>
    <script>
      window.a = x => alert(x);
    </script>
  </head>
  <body>
    <h1>MDI Preview</h1>
    ${body}
  </body>
  </html>
`;

util.write(fileName, template);
console.log(`\u2714 Build ${version}`);

The @mdi/util includes a few helper methods for working with the @mdi/svg package's data with NodeJS.

util.getVersion() Get the semver formatted string major.minor.build of the current @mdi/svg release.
util.getMeta(true) Get the meta.json data. Passing true will parse the SVG folder for path data assigning it to .path.
util.write(file, data) Write data to a file.
util.read(file) Read data from a file.

View the util.js to understand these utilities.

Update `package.json`

In the package.json a new script needs to be added to handle build.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "node build.js"
},

To run the build execute npm run build.

MDI Preview

Wrapup

Hopefully you found the above tutorial useful and allows you to create more complex build scripts.

NPM @mdi/angular-material

In the first of many new packages for integration with MDI is for the popular Angular Material framework.

npm install @mdi/angular-material for v2.2.43.

The package can be used with the icon component provided.

Like all future packages this one uses @mdi/svg as a devDependency meaning if someone wants they can build any version by change the version in package.json.

npm install
npm run build (updates mdi.svg)

Welcome to the @MDI Organization

Material Design Icons' growing community has introduced a lot of options for consuming the icons across numerous frameworks. Our goal is not to provide libraries for every framework, but to ensure the large ones are supported through NPM (Node Package Manager) dependencies. To facilitate this effort we've created the NPM Organization @mdi.

https://www.npmjs.com/org/mdi

What Does this mean?

In the short term we will support both existing packages by publishing to both repositories.

@mdi/font = mdi
@mdi/svg = mdi-svg

Note: Starting with v2.2.43 users of the mdi package are suggested to start moving to the @mdi/font package. We will wait a few releases before deprecating.

Future Planning

We'll be wrapping and publishing more officially maintained packages for Angular, React, and Polymer. This means we'll be onboarding more open source developers and ensuring each project has multiple contributors and a dedicated Maintainer.

We'll be looking at existing third party open source projects and reaching out if solutions already exist.

Our overarching goal of this is to ensure that all supporting libraries are updated in a timely manner for the community.

Extra Posters on Etsy

UPDATE: SALE DONE

Due to some shipping / logistic issues I'll be putting up the remaining posters for order.

15 Gray Blue / White Icons
4 White / Grey Icons

Each order comes with assortment of stickers.

'Profits' (using lightly as this won't break even) are being used to cover the cost of posters/shipping to the contribution team. 8 out of the 11 contributor posters were international shipping.

US / Canada ship\ping only.

Etsy

Menu