Needed an to take an SVG and individually grab frames of the same SVG and place them into an animated gif. This lib simplifies it to await gif.addFrame(svgString, delay).

The SvgGif util below simplified the use of gif-encoder, convert-svg-to-png, and png-js.

const fs = require('fs');
const GifEncoder = require('gif-encoder');
const { convert } = require('convert-svg-to-png');
const Png = require('png-js');

function decode(data) {
    return new Promise((resolve) => {
        new Png(data).decode((pixels) => {
            resolve(pixels);
        });
    });
}

class SvgGif {
    constructor({ width, height, fileName = 'img.gif', repeat = 0 }) {
        // Create GIF
        this.gif = new GifEncoder(width, height);
        this.gif.setRepeat(0);
        this.gif.on('error', (err) => console.log(err));

        // Collect output
        const file = fs.createWriteStream('img.gif');
        this.gif.pipe(file);
        this.gif.writeHeader();
    }

    async addFrame(svg, delay = 1000) {
        this.gif.setDelay(delay);
        const data = await convert(svg);
        const pixels = await decode(data);
        this.gif.addFrame(pixels);
    }

    finish() {
        this.gif.finish();
    }
}

module.exports = SvgGif;

Example usage:

const SvgGif = require('./SvgGif');

const width = 1280;
const height = 720;

var svg = `
    ... place full svg file contents here ...
`;

(async () => {

    const gif = new SvgGif({
        width,
        height,
        fileName: 'img.gif'
    });

    console.log(`Generating...`);
    
    // Render 1 frame for 1 second
    await gif.addFrame(svg, 1000);
    
    // Modify SVG here and render frame
    await gif.addFrame(svg, 1000);
    
    // Done
    gif.finish();
    console.log(`Done.`);
})();

Short post for a very easy to use script that creates components for Lightning Web Component. Already saved me a lot of time wiring up presentation only components.

npx lwc-component

You will be prompted to select a namespace from a list if more than one is found in your src/modules folder.

Open Source: https://github.com/Templarian/lwc-component
License: MIT

Around 2 years ago I got the idea of making an alternative to MDI that favored a slightly lighter style with the same consistent design. Unfortunately it always sat second to all of my other open source efforts (mainly MDI).

• Preview on the CDN

Now with the effort of the MDI contributor team we're working to make MDI Light a first class icon set! This will mean regular updates and improvements from the community.

• Managed by the same awesome team as MDI
  • MaterialDesignLight
• Similar structured NPM Packages as MDI
• View History of Changes

The only real difference is that for an icon to exist in MDI Light it must first exist in MDI. The team views this as a way to ensure MDI gets icons first and that we can perfectly map codepoints in the font between the two.

NPM

• npm i @mdi/light-font | NPM | GitHub
• npm i @mdi/light-svg | NPM GitHub |
• npm i @mdi/light-js | NPM | GitHub
• npm i @mdi/react - Same react library works great for MDI Light.

Future

MDI Light is a side project for our team, but over the next year we're going to quickly add icons to ensure it's a great alternative for everyone.

Everything will live under the @mdi organization on NPM.

Material Design Icons released with 145 icons and updated several older icons. The team is very excited to finally have the 3.0 release out only 1 month after the 2.8.94 release.

Our goal was to fix some of the outstanding issues and add a lot of the outline variants of many of the existing icons. This will be a continued goal as we reach 4000 icons.

• fridge-filled renamed to fridge.
• fridge renamed to fridge-outline.
• tooltip-outline-plus renamed to tooltip-plus-outline
• script was updated will an solid and outline style.
• eventbrite Updated with latest logo.
• diamond renamed to diamond-stone
  • Also added diamond and outline as shapes.

Documentation

Really proud of the teams work to improve the documentation.

View the new Documentation

All of these docs are stored in GitHub and can be edited in markdown. This allows for richer formatting and more specific doc pages for various frameworks.

Website Updates

We're very focused working on the new site. In addtion to adding mere aliases and cleaning up tagging the icons will be getting styles assigned for future searching.

This means for example account-circle-outline will have the styles listed circle and outline. There are a lot of plans to use these new properties to allow more clean searching and tracking of missing icons.

Basically there can be a grid of missing variants for each base icon now for us to work toward filling in, so that each icon has as many style variations as possible. This will allow more consistent UI's going forward.

Thanks!

I tell our core team all the time, but also want to say thanks to all the open source projects that continue to use the icons and the individual developers for all the suggestions and feedback. Especially those that have submitted PR's to the new documentation.

Material Design Icons released with 100 icons and updated several older icons.

With the next release being the 3.x.xx we're excited to get through the backlog and continue focus on the website and tooling to empower developers and designers.

• alpha-a to alpha-z with boxes were added.
• numeric-0 to numeric-9 were added.
• uber Updated with latest logo.
• bullhorn Updated with a cleaner design.
• google-fit Updated with latest logo.
• hexagon-slice-5 Glyph oversight fixed.

Documentation

With this release we've also removed the getting started page from the current site and are linking to the development server.

View the new Documentation

All of these docs are stored in GitHub and can be edited in markdown. This allows for richer formatting and more specific doc pages for various frameworks.

Material Design Icons released with 100 new icons and several renames.

• phone-locked renamed to phone-lock
• email-secure renamed to email-lock
• send-secure renamed to send-lock
• book-secure renamed to book-lock
• book-unsecure renamed to book-lock-open
• account-settings-variant replaced with account-details
  • This was removed as we standardized on ... for settings related icons to be inline with the Material Design guidelines.
• Various bell icons were updated to match the official updates.

Reminder we support several libraries to help developers.

• @mdi/js All the icons for JavaScript and TypeScript developers
• @mdi/react React component with full TypeScript support
• @mdi/font Webfont with all glyphs
• @mdi/angular-material For use with Angular Material.
• @mdi/util Helper library for working with NodeJS and @mdi/svg.
• @mdi/svg Release of all icons in individual SVG files with the sites meta data, like aliases and tags.

Note: The Angular and VueJS components are still under development.

The new site is still under development, but has been slow as summer wraps up. Prioritization on components and icon releases still comes first.

Today we released the first version of the @mdi/react NPM package. Hoping this helps with adoption of Material Design Icons in exisiting ReactJS projects.

npm install @mdi/react

MaterialDesign-React

import Icon from '@mdi/react'
import { mdiAccount, mdiLoading } from '@mdi/js'

const Example = (props) => (
  <div>
    <Icon path={mdiAccount}/>
    <Icon path={mdiLoading} spin/>
  </div>
)

Props

path: string - SVG path data. Usually from @mdi/js
size: number, string (1) - {size * 1.5}rem
horizontal: bool (false) - Flip Horizontal
vertical: bool (false) - Flip Vertical
rotate: number (0) - degrees 0 to 360
color: string (#000) - Ex: rgb() / rgba() / #000
spin: bool, number (false) - Ex: true = 2s, {spin}s

@mdi/js ?

The @mdi/js package contains all the icons after each release as both CommonJS for Node and a module for use with import/export. Ideal for TypeScript and ES6 developers.

What about x Framework

The team is working on VueJS and Angular 6 components that will offer similar functionality. In the future we'll hopefully get to other more niche frameworks.

Backported to v2.5.94 developers will now have access to MDI through @mdi/js for use in their projects.

We are in the process of writing first party components for each of the main frameworks with the communities help (and updating 3rd party components to use @mdi/js).

A basic example for React would look like below.

import { mdiAccount } from '@mdi/js'

function Icon(props) {
  return (
    <svg viewBox="0 0 24 24"
      style={{ width: '1.5rem' }}>
      <path d={props.path}/>
    </svg>
  )
}

function App(props) {
  return (
    <Icon path={mdiAccount}/>
  )
}

Importing only the icons you need will ensure shaking works out of the box for Webpack and Rollup.

We're in the process of working on the new website and wrapping up the release for v2.6.xx. A helper package @mdi/meta will also be releasing shortly that contains the meta.json from @mdi/svg including all the website's icon data for 3rd party apps.

[Due to a bad backup this was removed, will retype soon]