Skip to content

Latest commit

 

History

History
85 lines (58 loc) · 3.03 KB

README.md

File metadata and controls

85 lines (58 loc) · 3.03 KB
Raw

Material Icons Bundle

Material Design SVG icons as ES modules

Browse Icons

Visit Icon Browser featuring:

  • Visually similar icons (using per pixel compare)
  • Simple bundle (icon selection) copy/paste editor
  • Various view, filtering and grouping options
  • Large preview with various 24×24 grids and keyline blueprints (click preview to switch backgrounds)
  • Full screen preview (press Esc to open/close)
  • Hold Ctrl to compare with previously selected icon
  • Instant search

Install

$ yarn add github:darosh/material-icons-bundle

Usage

export {
  signal_cellular_connected_no_internet_0_bar,
  keyboard_arrow_left,
  keyboard_arrow_right,
  keyboard_arrow_up
} from 'material-icons-bundle'

will produce object like:

{
  signal_cellular_connected_no_internet_0_bar: '<path fill-opacity=".3" d="M22 8V2L2 22h16V8z"></path>...',
  keyboard_arrow_left: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z',
  ...
}

where most of values are <path> d attribute data. Some data starting with < are svg inner elements, such icons are tagged as multi-shape in the browser.

Icon aliases points to same *.js file for minimal build.

Tree-shaking rollup.js or webpack recommended.

Here is some real usage example (and previous re-exporting version using another icon package.)

Sources

Sources are merged comparing rendered pixel with some additional auto tagging. See compare table for more information.

Metadata

Used by Icon Browser:

Poster generator

Leverages pixels and frame metadata in meta.json.

Development

Note: you may experience issues with installing material-design-icons package, it may be easier to download & unpack it manually

npm install --ignore-scripts
npm run install
yarn build
yarn export