mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
dab7914eab
* Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript (#265) * Trying a new github workflow to install javascript packages * Bump tailwindcss from 1.9.2 to 1.9.4 in /build/javascript (#266) Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 1.9.2 to 1.9.4. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript Bumps [preact](https://github.com/preactjs/preact) from 10.5.4 to 10.5.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.5.4...10.5.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> * Bump @justinribeiro/lite-youtube in /build/javascript Bumps [@justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) from 0.9.0 to 0.9.1. - [Release notes](https://github.com/justinribeiro/lite-youtube/releases) - [Commits](https://github.com/justinribeiro/lite-youtube/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
# 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](https://github.com/google/material-design-icons).
|
|
|
|
You can see an overview of the icons used in the default Video.js font here: https://videojs.github.io/font/
|
|
|
|
## Usage
|
|
|
|
```sh
|
|
$ 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:
|
|
```sh
|
|
$ grunt --custom-json=./lib/custom.json,./lib/custom2.json
|
|
```
|
|
|
|
## Making changes to the font
|
|
|
|
To make changes to the default Video.js font, simply edit the `icons.json` file. You can add or remove icons, either by just selecting new
|
|
SVGs from the [Material Design set](https://www.google.com/design/icons/), or pulling in new SVGs altogether.
|
|
|
|
```json
|
|
{
|
|
"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`.
|
|
|
|
## Creating your own font
|
|
|
|
If you are developing a Video.js plugin that uses custom icons, you can also create a new font instead of modifying the
|
|
default font. Simply specify a new `font-name` and define the icons you want to include:
|
|
|
|
```json
|
|
{
|
|
"font-name": "MyPluginFont",
|
|
"root-dir": "./node_modules/material-design-icons/",
|
|
"icons": [
|
|
{
|
|
"name": "av-perm",
|
|
"svg": "action/svg/production/ic_perm_camera_mic_48px.svg"
|
|
},
|
|
{
|
|
"name": "video-perm",
|
|
"svg": "av/svg/production/ic_videocam_48px.svg"
|
|
},
|
|
{
|
|
"name": "audio-perm",
|
|
"svg": "av/svg/production/ic_mic_48px.svg"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
Generate the `MyPluginFont` font files using the `--custom-json` option:
|
|
|
|
```sh
|
|
$ grunt --custom-json=MyPluginFont.json
|
|
```
|
|
|
|
### Exclude default icons
|
|
|
|
By default, the regular Video.js icons are also included in the font. If you want to exclude these icons, when you're creating a Video.js plugin font for example, use the `--exclude-default` option.
|
|
|
|
Example:
|
|
```sh
|
|
$ grunt --custom-json=MyPluginFont.json --exclude-default
|
|
```
|