You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
林华焜 b6f8f922cf
first commit
4 years ago
..
css first commit 4 years ago
custom-icons first commit 4 years ago
fonts first commit 4 years ago
lib first commit 4 years ago
scss first commit 4 years ago
templates first commit 4 years ago
.babelrc first commit 4 years ago
.jshintrc first commit 4 years ago
.npmignore first commit 4 years ago
Gruntfile.js first commit 4 years ago
LICENSE first commit 4 years ago
README.md first commit 4 years ago
icons.json first commit 4 years ago
index.html first commit 4 years ago
package.json first commit 4 years ago

README.md

Video.js Icon Font

This project contains all of the tooling necessary to generate a new icon font for Video.js. The icons themselves are from Google's Material Design Icons.

Usage

$ npm install grunt-cli // only if you don't already have grunt installed
$ npm install
$ grunt

Custom icons

You can add custom icons by calling grunt with the --custom-json option. It takes a comma delimited list of paths to JSON files of the same format as below and merges it with the default icons file.

Example:

$ grunt --custom-json=custom.json,custom2.json

Making changes to the font

To make changes to the font, simply edit the icons.json file. You can add or remove icons, either by just selecting new SVGs from the Material Design set, or pulling in new SVGs altogether.

{
  "font-name": "VideoJS",
  "root-dir": "./node_modules/material-design-icons/",
  "icons": [
    {
      "name": "play",
      "svg": "av/svg/production/ic_play_arrow_48px.svg"
    },
    {
      "name": "pause",
      "svg": "av/svg/production/ic_pause_48px.svg"
    },
    {
      "name": "cool-custom-icon",
      "svg": "neato-icon.svg",
      "root-dir": "./custom-icons/neato-icon.svg"
    }
  ]
}

Once you're done, simply run grunt again to regenerate the fonts and scss partial. To edit the _icons.scss partial, update templates/scss.hbs.