mirror of
https://github.com/zoriya/v10.git
synced 2026-08-14 18:04:49 +00:00
130 lines
3.6 KiB
Markdown
130 lines
3.6 KiB
Markdown
# @videojs/icons
|
||
|
||
SVG icon library for Video.js. Ships optimized icons as **React components** and **HTML strings**, organized into icon sets.
|
||
|
||
## Icon Sets
|
||
|
||
Icons are grouped into visual sets. Each set contains the same icon names with different designs.
|
||
|
||
| Set | Description |
|
||
| --- | --- |
|
||
| `default` | Standard icon set used by the default skin |
|
||
| `minimal` | Simplified icon set used by the minimal skin |
|
||
|
||
### Available Icons
|
||
|
||
| Icon | React Export | HTML Export |
|
||
| --- | --- | --- |
|
||
| `fullscreen-enter` | `FullscreenEnterIcon` | `fullscreenEnterIcon` |
|
||
| `fullscreen-exit` | `FullscreenExitIcon` | `fullscreenExitIcon` |
|
||
| `pause` | `PauseIcon` | `pauseIcon` |
|
||
| `pip-enter` | `PipEnterIcon` | `pipEnterIcon` |
|
||
| `pip-exit` | `PipExitIcon` | `pipExitIcon` |
|
||
| `play` | `PlayIcon` | `playIcon` |
|
||
| `restart` | `RestartIcon` | `restartIcon` |
|
||
| `seek` | `SeekIcon` | `seekIcon` |
|
||
| `spinner` | `SpinnerIcon` | `spinnerIcon` |
|
||
| `volume-high` | `VolumeHighIcon` | `volumeHighIcon` |
|
||
| `volume-low` | `VolumeLowIcon` | `volumeLowIcon` |
|
||
| `volume-off` | `VolumeOffIcon` | `volumeOffIcon` |
|
||
|
||
## Usage
|
||
|
||
### React
|
||
|
||
Import icons as React components. They accept standard SVG props and support ref forwarding.
|
||
|
||
```tsx
|
||
import { PlayIcon, PauseIcon } from '@videojs/react/icons';
|
||
|
||
function Controls() {
|
||
return (
|
||
<button>
|
||
<PlayIcon className="icon" aria-hidden="true" />
|
||
</button>
|
||
);
|
||
}
|
||
```
|
||
|
||
Import from a specific icon set:
|
||
|
||
```tsx
|
||
import { PlayIcon } from '@videojs/react/icons/minimal';
|
||
```
|
||
|
||
### HTML
|
||
|
||
Import icons as SVG strings for use in plain HTML or web components.
|
||
|
||
```ts
|
||
import { playIcon, pauseIcon } from '@videojs/html/icons';
|
||
|
||
button.innerHTML = playIcon;
|
||
```
|
||
|
||
Import from a specific icon set:
|
||
|
||
```ts
|
||
import { playIcon } from '@videojs/html/icons/minimal';
|
||
```
|
||
|
||
Register the `<media-icon>` custom element separately when you want HTML skins to render icons lazily:
|
||
|
||
```ts
|
||
import '@videojs/html/icons/element';
|
||
```
|
||
|
||
Import a specific element icon set when eager family registration is preferred:
|
||
|
||
```ts
|
||
import '@videojs/html/icons/element/minimal';
|
||
```
|
||
|
||
## Styling
|
||
|
||
All icons use `fill="currentColor"`, so they inherit the text color of their parent element. Size and color can be controlled with CSS:
|
||
|
||
```css
|
||
.icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: white;
|
||
}
|
||
```
|
||
|
||
Icons are designed on an **18×18 grid**. Rendering at `18px` (or exact multiples like `36px`) produces the crispest result. Other sizes may introduce sub-pixel rendering artifacts.
|
||
|
||
## Adding Icons
|
||
|
||
1. Add an SVG file to `src/assets/<set>/` (e.g., `src/assets/default/my-icon.svg`).
|
||
2. Run `pnpm -F @videojs/icons build`.
|
||
3. The build script optimizes the SVG with SVGO and generates React components and HTML string exports.
|
||
|
||
The build automatically:
|
||
|
||
- Removes hardcoded `fill`, `stroke`, `clip-rule`, and `fill-rule` attributes.
|
||
- Adds `fill="currentColor"` for dynamic styling.
|
||
- Preserves the `viewBox` attribute.
|
||
- Generates `.js`, `.d.ts`, and `.tsx` files for each icon.
|
||
|
||
## Adding an Icon Set
|
||
|
||
Create a new directory under `src/assets/` (e.g., `src/assets/custom/`), add SVG files, and rebuild. The set is automatically available via:
|
||
|
||
```ts
|
||
import { PlayIcon } from '@videojs/react/icons/custom';
|
||
import { playIcon } from '@videojs/html/icons/custom';
|
||
```
|
||
|
||
## Development
|
||
|
||
Running `pnpm -F @videojs/icons dev` starts the build in watch mode. Any changes to `.svg` files under `src/assets/` trigger an automatic rebuild, including new icons and new icon sets — no restart required.
|
||
|
||
## Scripts
|
||
|
||
```bash
|
||
pnpm -F @videojs/icons build # Build all icon sets
|
||
pnpm -F @videojs/icons dev # Build and watch for changes
|
||
pnpm -F @videojs/icons clean # Remove build output
|
||
```
|